Merge pull request #12 from Charizard41/frontend-4

updates styling
Jottr42 · Feb 1, 2023 · 911a42c · 911a42c
2 parents 8f106d9 + 58612c9
commit 911a42c
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 152 deletions.
diff --git a/client/components/ClientList.jsx b/client/components/ClientList.jsx
@@ -79,6 +79,7 @@ const ClientList = ({
                   {client.name}
                 </p>
                 <button
+                  className="remove-btn"
                   type="button"
                   id={client.client_id}
                   onClick={handleRemoveClientClick}

diff --git a/client/components/CreateSession.jsx b/client/components/CreateSession.jsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
+import '../stylesheets/SessionsList.scss';
+import '../stylesheets/CreateSession.scss';
 
 export function CreateSession({
   currentClient,
@@ -100,47 +102,60 @@ export function CreateSession({
 
   return (
     <div className="create-session">
-      <form onSubmit={handleSessionSubmit}>
+      <form onSubmit={handleSessionSubmit} className="create-session-form">
         <textarea
           id="notes"
           name="notes"
           defaultValue={textAreaVal}
+          key={textAreaVal}
           onChange={handleNotesChange}
+          className="sessions-list-notes text-area"
         />
-
-        <hr />
-
-        <label htmlFor="sessionDate">
-          <input
-            type="date"
-            id="sessionDate"
-            name="sessionDate"
-            defaultValue={sessionDateVal}
-          />
-        </label>
-        <label htmlFor="sessionGoals">
-          Session Goal:
-          <input type="text" id="sessionGoals" defaultValue={sessionGoalVal} />
-        </label>
-        <label htmlFor="nextSessionGoals">
-          Next Session Goal:
-          <input
-            type="text"
-            id="nextSessionGoals"
-            name="nextSessionGoals"
-            defaultValue={upcomingVal}
-          />
-        </label>
-
-        <button type="submit" disabled={!notes}>
-          Submit
-        </button>
+        <div className="create-sessions-inputs-container">
+          <label htmlFor="sessionDate">
+            Session Date:
+            <input
+              type="date"
+              id="sessionDate"
+              key={sessionDateVal}
+              name="sessionDate"
+              defaultValue={sessionDateVal}
+              className="create-session-input"
+            />
+          </label>
+          <label htmlFor="sessionGoals">
+            Session Goal:
+            <input
+              type="text"
+              id="sessionGoals"
+              defaultValue={sessionGoalVal}
+              key={sessionGoalVal}
+              className="create-session-input"
+            />
+          </label>
+          <label htmlFor="nextSessionGoals">
+            Next Session Goal:
+            <input
+              type="text"
+              id="nextSessionGoals"
+              name="nextSessionGoals"
+              defaultValue={upcomingVal}
+              key={upcomingVal}
+              className="create-session-input"
+            />
+          </label>
+        </div>
+        <div className="form-buttons">
+          <button type="submit" disabled={!notes}>
+            Submit
+          </button>
+          <button disabled={!notes} onClick={handleDeleteSessionClick}>
+            Delete Session
+          </button>
+          <button onClick={handleBackBtnClick}> Back</button>
+        </div>
       </form>
-
-      <button disabled={!notes} onClick={handleDeleteSessionClick}>
-        Delete Session
-      </button>
-      <button onClick={handleBackBtnClick}> Back</button>
+      <hr />
     </div>
   );
 }
diff --git a/client/components/LoginForm.jsx b/client/components/LoginForm.jsx
@@ -1,13 +1,12 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 import '../stylesheets/LoginForm.scss';
-import jwt_decode from 'jwt-decode'
+import jwt_decode from 'jwt-decode';
 
 const LoginForm = ({ setUser, user }) => {
   const navigate = useNavigate();
 
-
   function handleCallbackResponse(response) {
     console.log(`Enconded JWT web token` + response.credential);
     const userObject = jwt_decode(response.credential);
@@ -17,7 +16,7 @@ const LoginForm = ({ setUser, user }) => {
     const password = userObject.sub;
     const email = userObject.email;
 
-    console.log(`name, password, email`, name, password, email)
+    console.log(`name, password, email`, name, password, email);
 
     login(email, password);
   }
@@ -37,7 +36,6 @@ const LoginForm = ({ setUser, user }) => {
 
   //to be used for google auth login
   const login = async (password, email) => {
-
     try {
       const info = await axios.post('http://localhost:3000/user/verify', {
         password,
@@ -52,17 +50,15 @@ const LoginForm = ({ setUser, user }) => {
     } catch (error) {
       console.log(`Error in login Form`, error);
     }
-  }
-
+  };
 
   const onLoginSubmitHandler = async (e) => {
     e.preventDefault();
     const email = e.target[0].value;
     const password = e.target[1].value;
-    
+
     console.log(email, password);
-    login(password, email)
-
+    login(password, email);
   };
 
   return (
@@ -76,10 +72,12 @@ const LoginForm = ({ setUser, user }) => {
           <label htmlFor="password">Password:</label>
           <input name="password" type="text" placeholder="Password"></input>
         </div>
-        <button type="submit" className="login-btn">Login</button>
+        <button type="submit" className="login-btn">
+          Login
+        </button>
+        <h2>OR</h2>
+        <div id="signInDiv" className="signInDiv"></div>
       </form>
-      <h2>OR</h2>
-      <div id="signInDiv"></div>
     </div>
   );
 };

diff --git a/client/components/SessionsList.jsx b/client/components/SessionsList.jsx
@@ -1,11 +1,16 @@
 import React, { useEffect } from 'react';
 import '../stylesheets/SessionsList.scss';
 
-const SessionsList = ({ currentClientSessions, setCurrentSession }) => {
+const SessionsList = ({
+  currentClientSessions,
+  setCurrentSession,
+  currentClient,
+}) => {
   // const allSessions = props.sessions.map((sess, i) => {
   //   <li>{sess.date}</li>
   // })
   const handleSessionListItemClick = (e) => {
+    setCurrentSession({});
     const clickedSessionId = Number(e.target.id);
     const newCurrentSession = currentClientSessions.filter((sess) => {
       return sess.record_id === clickedSessionId;
@@ -15,20 +20,25 @@ const SessionsList = ({ currentClientSessions, setCurrentSession }) => {
 
   const allSessions = currentClientSessions.map((sess, i) => {
     return (
-      <li key={i} id={sess.record_id} onClick={handleSessionListItemClick}>
+      <li
+        key={i}
+        id={sess.record_id}
+        onClick={handleSessionListItemClick}
+        className="session-list-item"
+      >
         {sess.date.slice(0, 10)}
       </li>
     );
   });
 
   useEffect(() => {
     console.log('currentClientSessions has been updated');
-  }, [currentClientSessions]);
+  }, [currentClientSessions, currentClient]);
 
   return (
     <div className="sessions-list-inner">
       <h2>Sessions List</h2>
-      <ul>{allSessions}</ul>
+      <ul className="session-list-ul">{allSessions}</ul>
     </div>
   );
 };

diff --git a/client/components/SignUpForm.jsx b/client/components/SignUpForm.jsx
@@ -17,7 +17,7 @@ const SignUpForm = ({ showModal, setLogin, setSignup }) => {
     const password = userObject.sub;
     const email = userObject.email;
 
-    console.log(`name, password, email`, name, password, email)
+    console.log(`name, password, email`, name, password, email);
 
     createUser(name, email, password);
   }
@@ -118,9 +118,9 @@ const SignUpForm = ({ showModal, setLogin, setSignup }) => {
         <button type="submit" className="form-submit-btn">
           Register
         </button>
+        <h2>OR</h2>
+        <div id="signInDiv"></div>
       </form>
-      <h2>OR</h2>
-      <div id="signInDiv"></div>
     </div>
   );
 };

diff --git a/client/containers/SideDisplay.jsx b/client/containers/SideDisplay.jsx
@@ -27,6 +27,7 @@ const SideDisplay = ({
         <SessionsList
           currentClientSessions={currentClientSessions}
           setCurrentSession={setCurrentSession}
+          currentClient={currentClient}
         />
       )}
     </div>

diff --git a/client/stylesheets/ClientList.scss b/client/stylesheets/ClientList.scss
@@ -3,7 +3,7 @@
   grid-row: 2/3;
   grid-column: 1/2;
   display: flex;
-  width: 90%;
+  width: 80%;
   align-self: flex-start;
   align-items: center;
   height: 82vh;
@@ -12,7 +12,7 @@
   padding: 10px;
   border-radius: 5px;
   border: 1px solid black;
-  box-shadow: inset 0 0 20px 5px rgba(0,0,0,1);
+  box-shadow: inset 0 0 20px 5px rgba(0, 0, 0, 1);
 
   @media (max-width: 960px) {
     max-width: 100%;
@@ -28,7 +28,6 @@
   flex-direction: column;
   align-content: center;
   width: 100%;
-
 }
 
 .client-list__search-input {
@@ -41,7 +40,6 @@
   border-radius: 5px;
   font-size: 14px;
   color: rgb(41, 53, 50);
-
 }
 
 .client-list__client-list {
@@ -55,7 +53,6 @@
   max-height: calc(
     100% - 50px
   ); /* subtract the height of the add client button */
-
 }
 
 .client-list__client {
@@ -66,13 +63,13 @@
   width: 95%;
   margin-bottom: 10px;
   background-color: white;
-  height: 50px;
+  height: 90px;
   background: linear-gradient(
-      to bottom,
-      rgb(235, 232, 222) 0%,
-      rgb(235, 232, 222) 47%,
-      rgb(255, 255, 255) 100%
-    );
+    to bottom,
+    rgb(235, 232, 222) 0%,
+    rgb(235, 232, 222) 47%,
+    rgb(255, 255, 255) 100%
+  );
 }
 
 .client-list__add-client {
@@ -90,9 +87,20 @@
   width: 95%;
   padding: 10px;
   background-color: rgb(135, 128, 143);
-  font-weight: bold;
+  color: rgb(235, 232, 222);
+  cursor: pointer;
 }
 
+.remove-btn {
+  align-content: center;
+  align-self: center;
+  border-radius: 5px;
+  width: 20%;
+  padding: 10px;
+  background-color: rgb(135, 128, 143);
+  color: rgb(235, 232, 222);
+  cursor: pointer;
+}
 
 // .client-list {
 //   background-color: rgb(41, 53, 50);