Styling for DashPage #40; Styling for Auth #13

BCIT-SSD-2020-21 · Apr 16, 2021 · 627e57b · 627e57b
1 parent 29dfd1e
commit 627e57b
Show file tree

Hide file tree

Showing 12 changed files with 187 additions and 78 deletions.
diff --git a/src/components/atoms/EmptyList.js b/src/components/atoms/EmptyList.js
@@ -5,8 +5,8 @@ import { userListStyles } from '../../styles/dashStyles';
 export default function EmptyList({message}) {
     const classes = userListStyles();
     return (
-        <Card className={classes.container}>
-            <Typography className={classes.empty}>{message}</Typography>        
+        <Card className={classes.emptyList}>
+            <Typography className={classes.emptyListMessage}>{message}</Typography>        
         </Card>
     )
 }
diff --git a/src/containers/MenuAppBar.js b/src/containers/MenuAppBar.js
@@ -2,11 +2,13 @@ import React, {useState} from 'react';
 import clsx from 'clsx';
 import { useHistory } from "react-router-dom";
 import { Link } from 'react-router-dom';
-import { AppBar, CssBaseline, Drawer, Divider, IconButton, List, ListItem, ListItemText, ListItemIcon, Menu, MenuItem, Toolbar } from '@material-ui/core';
+import { AppBar, CssBaseline, Drawer, Divider, IconButton, List, ListItem, ListItemText, ListItemIcon, Menu, MenuItem, Toolbar, Typography } from '@material-ui/core';
 import AccountCircleTwoToneIcon from '@material-ui/icons/AccountCircleTwoTone';
 import MenuIcon from '@material-ui/icons/Menu';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import SettingsIcon from '@material-ui/icons/Settings';
+import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import InboxIcon from '@material-ui/icons/MoveToInbox';
 import MailIcon from '@material-ui/icons/Mail';
 import HighlightOffTwoToneIcon from '@material-ui/icons/HighlightOffTwoTone';
@@ -89,6 +91,7 @@ export default function MenuAppBar({dataUser}) {
                 <AccountCircleTwoToneIcon />
               </IconButton>
               <Menu
+                className={classes.menu}
                 id="menu-appbar"
                 anchorEl={anchorEl}
                 anchorOrigin={{
@@ -103,12 +106,12 @@ export default function MenuAppBar({dataUser}) {
                 open={open}
                 onClose={handleClose}
               >
-                <MenuItem><Link className={classes.menuItem} to="/dash">To Dash</Link></MenuItem>
-                <MenuItem onClick={() => {
+                <MenuItem className={classes.menuItem}><SettingsIcon />Settings</MenuItem>
+                <MenuItem className={classes.menuItem} onClick={() => {
                   userSignOut()
                   history.push('/')
                 }}>
-                  SignOut
+                  <ExitToAppIcon />SignOut
                 </MenuItem>
               </Menu>
             </div>
@@ -125,27 +128,19 @@ export default function MenuAppBar({dataUser}) {
         }}
       >
         <div className={classes.drawerHeader}>
-          <IconButton onClick={handleDrawerClose}>
+          <IconButton className={classes.drawerListItemText} onClick={handleDrawerClose}>
             {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
           </IconButton>
         </div>
         <Divider />
         <List>
-          {['All mail', 'Trash', 'Spam'].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
-          ))}
-        </List>
-        <Divider />
-        <List>
+          <Typography className={classes.drawerListItemTitle}>Connections: </Typography>
           {
             userConnections?.map((user, index) => 
               <ListItem button key={index}>
-                <IconButton><HighlightOffTwoToneIcon /></IconButton>
-                <ListItemText primary={user.username} />
-                <ListItemIcon><AccountCircleTwoToneIcon /></ListItemIcon>
+                <IconButton className={classes.drawerRemoveButton} ><HighlightOffTwoToneIcon /></IconButton>
+                <ListItemText className={classes.drawerListItemText} primary={user.username} />
+                <ListItemIcon className={classes.drawerListItemText} ><AccountCircleTwoToneIcon /></ListItemIcon>
               </ListItem>
             )
           }

diff --git a/src/containers/SessionCreatePanel.js b/src/containers/SessionCreatePanel.js
@@ -93,11 +93,12 @@ export default function SessionsCreatePanel({authUser, dataUser, changeTab}) {
 
     }
 
-    console.log("searchResultUsers: ", searchResultUsers)
+    // console.log("searchResultUsers: ", searchResultUsers)
     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)} />
                 <Box className={classes.dateTime}>
                     {/* Date & Time */}
@@ -123,9 +124,10 @@ export default function SessionsCreatePanel({authUser, dataUser, changeTab}) {
                 {/* Location */}
                 <TextField className={classes.location} 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.name} 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} />
@@ -135,19 +137,18 @@ export default function SessionsCreatePanel({authUser, dataUser, changeTab}) {
                 <TextField 
                     className={classes.searchField} 
                     id="searchField" 
-                    label='Search for a user. Start typing... *' 
+                    label='Search your connections. Start typing... *' 
                     value={userSearchValue} 
                     onChange={(e) => setUserSearchValue(e.target.value)} 
                 />
                 {/* Search Result - List clients */}
                 { 
-                    searchResultUsers.length > 0 
+                    userSearchValue.length > 2 && searchResultUsers.length > 0 
                     ? searchResultUsers.map((user, index) => <UserSearchListItem key={index} user={user} addUser={addParticipant} listToAppend={[participant]} />)
                     : <EmptyList message={'No search results.'}/>                     
                 }
-            </Card>
 
-            <Box className={classes.sessionActionsButtions}>
+                <Box className={classes.sessionActionsButtions}>
                     {!formDataValidationPassed && <Typography>Fields marked with * are required</Typography>}
                     <Button 
                         disabled={!formDataValidationPassed}
@@ -157,8 +158,8 @@ export default function SessionsCreatePanel({authUser, dataUser, changeTab}) {
                             changeTab(e, 2) // go to Drafts tab
                         }}
                     >Create Draft Session</Button>
-            </Box>
-
+                </Box>
+            </Card>
         </Box>
     )
 }
diff --git a/src/containers/SessionListItem.js b/src/containers/SessionListItem.js
@@ -9,22 +9,20 @@ export default function SessionListItem({session, openSession, cancelSession}) {
     console.log("SessionListItem session: ", session)
     return (
         <Card className={`${classes.listItem} ${session.status === 'completed' && classes.sessionCompleted} ${session.status === 'cancelled' && classes.sessionCancelled} : classes.listItem`}>
-            <CardContent className={classes.listItemInfo}>
-                <Box className={classes.listItemTitleInfo}>
-                    <Typography className={classes.name}>{session.name}</Typography>
-                    <Typography className={classes.dateTime}>{session.startDateTime.seconds}</Typography>
-                    </Box>
+            <CardContent className={classes.listItemColumn}>
+                <Typography className={classes.name}>{session.name}</Typography>
+                <Typography className={classes.dateTime}>{session.startDateTime}</Typography>
+                <Typography className={classes.location}>{session.location}</Typography>
                 <Typography className={classes.notes}>{session.notes}</Typography>
-
             </CardContent>
-            <CardContent className={classes.listItemParticipants}>
+            <CardContent className={classes.listItemColumn}>
                 <Box className={classes.listItemParticipantsInfo}>
                     <Typography className={classes.listItemLabel}>{'By coach: '}</Typography>
-                    <Typography className={classes.listItemCoachName}>{session.coachName}</Typography>
+                    <Typography className={classes.listItemValue}>{session.coachUsername}</Typography>
                 </Box>
                 <Box className={classes.listItemParticipantsInfo}>
                     <Typography className={classes.listItemLabel}>{'Participating: '}</Typography>
-                    <Typography className={classes.listItemClientCount}>{session.participantUsername}</Typography>
+                    <Typography className={classes.listItemValue}>{session.participantUsername}</Typography>
                 </Box>
             </CardContent>
             <CardActions className={classes.listItemButtons}>

diff --git a/src/containers/SessionsPanel.js b/src/containers/SessionsPanel.js
@@ -2,9 +2,12 @@ import React, {useState, useEffect} from 'react';
 import { Box } from '@material-ui/core';
 import SessionListItem from './SessionListItem';
 import SessionDetails from './SessionDetails';
+import EmptyList from '../components/atoms/EmptyList';
 import firebase from '../firebase/config';
+import {dashStyles} from '../styles/dashStyles';
 
 export default function SessionsPanel({authUser, dataUser, sessionStatus}) {
+    const classes = dashStyles();
 
     const sessionsRef = firebase.firestore().collection('sessions');
     const [sessions, setSessions] = useState([])
@@ -26,7 +29,7 @@ export default function SessionsPanel({authUser, dataUser, sessionStatus}) {
                     }
                 )
         }
-    }, [sessionsRef, authUser, dataUser.sessions, sessionStatus ])
+    }, [authUser, dataUser.sessions, sessionStatus ])
 
     const [sessionPanelMode, setSessionPanelMode] = useState("list")
     const [currentSession, setCurrentSession] = useState({})
@@ -42,14 +45,19 @@ export default function SessionsPanel({authUser, dataUser, sessionStatus}) {
         console.log("cancelSession clicked; to delete: ", session)
     }
 
-    console.log("SessionPanel sessions: ", sessions)
+    // console.log("SessionPanel sessions: ", sessions)
     return (
         <Box>
             { sessionPanelMode === 'list' &&
-            <Box>
-                { sessions?.map((session, index) => 
+            <Box className={classes.sessionPanelContainer}>
+                {   sessions.length > 0
+                    ? 
+                    sessions.map((session, index) => 
                         <SessionListItem key={index} session={session} openSession={openSession} cancelSession={cancelSession}/>
-                    )}
+                    )
+                    :
+                    <EmptyList message={`No ${sessionStatus} sessions.`} />
+                }
             </Box>
             }
             { sessionPanelMode === 'detail' &&

diff --git a/src/containers/UserConnections.js b/src/containers/UserConnections.js
@@ -26,7 +26,7 @@ export default function UserConnections({dataUser}) {
         } else {
             setSearchResultUsers([])
         }
-    }, [usersRef, userSearchValue])
+    }, [userSearchValue])
 
     const [searchingUser, setSearchingUser] = useState(false)
 
@@ -46,7 +46,7 @@ export default function UserConnections({dataUser}) {
             }).catch((error) => console.log(error))
     }
 
-    console.log("searchResultUsers", searchResultUsers)
+    // console.log("searchResultUsers", searchResultUsers)
     return (
         <Card className={classes.container}>
             <Box className={classes.field}>
@@ -84,7 +84,7 @@ export default function UserConnections({dataUser}) {
             }
 
 
-            <Button onClick={() => setSearchingUser(!searchingUser)}>{searchingUser ? "Cancel Search" : "Search for a user"}</Button>
+            <Button className={classes.buttonPrimary} onClick={() => setSearchingUser(!searchingUser)}>{searchingUser ? "Cancel Search" : "Search for a user"}</Button>
 
 
         </Card>

diff --git a/src/pages/DashPage.js b/src/pages/DashPage.js
@@ -7,8 +7,10 @@ import Tab from '@material-ui/core/Tab';
 import UserBanner from '../containers/UserBanner';
 import UserConnections from '../containers/UserConnections';
 import SessionsPanel from '../containers/SessionsPanel';
+import Footer from '../containers/Footer';
 import { dashStyles } from '../styles/dashStyles';
 import SessionsCreatePanel from '../containers/SessionCreatePanel';
+import { Box } from '@material-ui/core';
 
 export default function DashPage({authUser, dataUser}) {
     const classes = dashStyles();
@@ -31,13 +33,13 @@ export default function DashPage({authUser, dataUser}) {
         }
     };
 
-    console.log("DashPage, dataUser.userType: ", dataUser.userType)
+    // console.log("DashPage, dataUser.userType: ", dataUser.userType)
     return (
         <div className={classes.container}>
-            <Paper classes={classes.header}>
+            <Box classes={classes.header}>
                 <UserBanner dataUser={dataUser} />
                 <UserConnections dataUser={dataUser}/>
-            </Paper>
+            </Box>
             <AppBar className={classes.dashAppBar} position="static">
                 <Tabs
                     className={classes.authTabs}
@@ -47,12 +49,12 @@ export default function DashPage({authUser, dataUser}) {
                     // textColor="primary"
                     centered
                 >
-                    <Tab label="Upcoming" />
-                    <Tab label="Completed" />
-                    <Tab label="Drafts" />
+                    <Tab className={classes.tab} label="Upcoming" />
+                    <Tab className={classes.tab} label="Completed" />
+                    <Tab className={classes.tab} label="Drafts" />
                     {
                         dataUser?.userType === 'coach' &&
-                        <Tab label="Create Session" />
+                        <Tab className={classes.tab} label="Create Session" />
                     }
                 </Tabs>
             </AppBar>
@@ -69,6 +71,8 @@ export default function DashPage({authUser, dataUser}) {
             <TabPanel value={value} index={3}>
                 <SessionsCreatePanel authUser={authUser} dataUser={dataUser} changeTab={changeTab}/>
             </TabPanel>
+
+            <Footer />
         </div>
     )
 }
diff --git a/src/styles/colorThemes.js b/src/styles/colorThemes.js
@@ -11,6 +11,8 @@ export const holisticTheme = {
     bgLighter: '#d3ccdd',
     bgLight: '#c3bad1',
     bgContainer: '#A395B84D',
+    bgDrawer: "#2d2639E6",
+
     // Font
     textTitle: '#AAB895',
     // Text Inputs
@@ -23,6 +25,7 @@ export const holisticTheme = {
     // Buttons - secondary
     bgBtnSecondary: '#C8D1BB',
     textBtnSecondary: '#4E755C',
+    bgBtnRemove: '#c06136',
     // Error
     error: '#e71e0c',
 }