Styling for DashPage #40

BCIT-SSD-2020-21 · Apr 18, 2021 · 0c11734 · 0c11734
1 parent 0087b57
commit 0c11734
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 26 deletions.
diff --git a/src/containers/SessionCreatePanel.js b/src/containers/SessionCreatePanel.js
@@ -96,18 +96,15 @@ export default function SessionsCreatePanel({authUser, dataUser, changeTab}) {
                 usersRef.doc(authUser.uid).update({
                     sessions: firebase.firestore.FieldValue.arrayUnion(docRef.id),
                 })
-                // setNewSessionId(docRef.id)
         })
-
     }
-
-    console.log("startDateTime: ", startDateTime)
+    // console.log("userSearchValue", userSearchValue)
     return (
         <Box className={classes.container}>
             <Card className={classes.sessionDetails}>
                 {/* Session Info */}
-                <Typography className={classes.label}>Session Details: </Typography>
-                <TextField className={classes.name} id="name" label="New Session Name: *" value={name} onChange={(e) => setName(e.target.value)} />
+                <Typography className={classes.label}>Create a session with a client: </Typography>
+                <TextField className={classes.field} id="name" label="New Session Name: *" value={name} onChange={(e) => setName(e.target.value)} />
                 <Box className={classes.dateTime}>
                     {/* Date & Time */}
                     <TextField
@@ -132,17 +129,18 @@ export default function SessionsCreatePanel({authUser, dataUser, changeTab}) {
                     <TextField className={classes.duration} id="duration" label="Duration: " value={duration} onChange={(e) => setDuration(e.target.value)} />
                 </Box>
                 {/* Location */}
-                <TextField className={classes.location} id="location" label="Location: " value={location} onChange={(e) => setLocation(e.target.value)} />
+                <TextField className={classes.field} id="location" label="Location: " value={location} onChange={(e) => setLocation(e.target.value)} />
 
-                <TextField className={classes.name} id="notes" label="Notes: " value={notes} onChange={(e) => setNotes(e.target.value)} />
+                <TextField className={classes.field} id="notes" label="Notes: " value={notes} onChange={(e) => setNotes(e.target.value)} />
 
                 {/* Participating Clients */}
                 <Typography className={classes.label}>Participant: </Typography>
-                { 
+                {
                     participant?.username
                     ? <UserParticipatingListItem user={participant} setParticipant={setParticipant} />
                     : <EmptyList message={'No participants selected.'}/> 
                 }
+
                 {/* User SEARCH */}
                 <TextField 
                     className={classes.searchField} 
@@ -152,10 +150,15 @@ export default function SessionsCreatePanel({authUser, dataUser, changeTab}) {
                     onChange={(e) => setUserSearchValue(e.target.value)} 
                 />
                 {/* Search Result - List clients */}
-                { 
-                    searchResultUsers.length > 0 
-                    ? searchResultUsers.map((user, index) => <UserSearchListItem key={index} user={user} addUser={addParticipant} listToAppend={[participant]} />)
-                    : <EmptyList message={'No search results.'}/>                     
+                {   
+                    userSearchValue &&
+                    <Box>
+                    { 
+                        searchResultUsers.length > 0 
+                        ? searchResultUsers.map((user, index) => <UserSearchListItem key={index} user={user} addUser={addParticipant} listToAppend={[participant]} />)
+                        : <EmptyList message={'No search results.'}/>                     
+                    }
+                    </Box>
                 }
 
                 <Box className={classes.sessionActionsButtions}>

diff --git a/src/styles/atomStyles.js b/src/styles/atomStyles.js
@@ -12,8 +12,8 @@ export const searchBoxStyles = makeStyles(() => ({
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
-        margin: '2% auto',
-        padding: '4%',
+        margin: '4px 5%',
+        padding: '10px',
     },
     label: {
         color: holisticTheme.textLabel,

diff --git a/src/styles/dashStyles.js b/src/styles/dashStyles.js
@@ -38,7 +38,6 @@ const dashStyles = makeStyles(() => ({
         // paddingTop: '60px',
         backgroundColor: holisticTheme.bgDark,
     },
-
     username: {
         color: holisticTheme.textLabel,
         textAlign: 'center',
@@ -76,6 +75,9 @@ const dashStyles = makeStyles(() => ({
     },
     sessionPanelContainer: {
         backgroundColor: holisticTheme.bgContainer,
+        display: 'flex',
+        flexDirection: 'column',
+        // alignItems: 'center',
         margin: '0 auto',
         paddingTop: '10px',
         paddingBottom: '250px',
@@ -213,8 +215,17 @@ const dashStyles = makeStyles(() => ({
     infoValue: {
         fontSize: '12px',
         fontWeight: 'bold',
+    },
+    typeSwitchBox: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    typeSwitchOption: {
+        color: holisticTheme.textTitle,
+        padding: '0 15px'
     }
-
 }));
 
 const userListStyles = makeStyles(() => ({
@@ -264,8 +275,8 @@ const userListStyles = makeStyles(() => ({
         padding: 5,
     },
     emptyList: {
-        margin: '2%',
-        padding: '10%',
+        margin: '2% 4%',
+        padding: '5%',
         backgroundColor: holisticTheme.bgContainer,
     },
     emptyListMessage: {

diff --git a/src/styles/navbarStyles.js b/src/styles/navbarStyles.js
@@ -76,7 +76,7 @@ export const navbarStyles = makeStyles((theme) => ({
         padding: theme.spacing(0, 1),
         // necessary for content to be below app bar
         ...theme.mixins.toolbar,
-        justifyContent: 'flex-end',
+        justifyContent: 'space-between',
       },
       drawerListItemTitle: {
         marginLeft: '5%',
@@ -107,4 +107,7 @@ export const navbarStyles = makeStyles((theme) => ({
         }),
         marginLeft: 0,
       },
+      themeIcon: {
+        color: holisticTheme.textTitle,
+      },
 }));
diff --git a/src/styles/sessionStyles.js b/src/styles/sessionStyles.js
@@ -122,15 +122,17 @@ const newSessionFormStyles = makeStyles(() => ({
         backgroundColor: holisticTheme.bgLight,
         paddingTop: '10px',
         paddingBottom: '20px',
-
     },
     sessionDetails: {
-        margin: 'auto',
-        padding: '2%',
-        width: '95%',
+        borderRadius: '15px',
         display: 'flex',
         flexDirection: 'column',
-        borderRadus: '15px',
+        padding: '4%',
+        margin: '1% 4%',
+    },
+    field: {
+        margin: '2% 4%',
+        textAlign: 'center',
     },
     label: {
         fontStyle: 'italic',
@@ -139,7 +141,14 @@ const newSessionFormStyles = makeStyles(() => ({
     dateTime: {
         display: 'flex',
         flexDirection: 'row',
-        justifyContent: 'space-around',
+        justifyContent: 'space-between',
+        margin: '2% 4%'
+    },
+    startDateTime: {
+        width: '65%'
+    },
+    duration: {
+        width: '15%'
     },
     sessionActionsButtions: {
         display: 'flex',