Styling DashPage, Sessions, Actions; #40

BCIT-SSD-2020-21 · Apr 15, 2021 · 6476d09 · 6476d09
1 parent ec0e4be
commit 6476d09
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 133 deletions.
diff --git a/src/containers/SessionListItem.js b/src/containers/SessionListItem.js
@@ -1,12 +1,11 @@
 import React, {useState, useEffect} from 'react';
 import { Box, Button, Card, CardActions, CardContent, Paper, Tab, Tabs, Typography } from '@material-ui/core';
 import { useHistory } from 'react-router-dom';
-import SessionActions from './SessionActions';
-import sessionStyles from '../styles/sessionStyles';
+import { sessionListStyles } from '../styles/sessionStyles';
 
 
 export default function SessionListItem({session, openSession, cancelSession}) {
-    const classes = sessionStyles()
+    const classes = sessionListStyles()
     const history = useHistory();
 
     const [clientParticipants, setClientParticipants] = useState([])
@@ -38,7 +37,7 @@ export default function SessionListItem({session, openSession, cancelSession}) {
                     <Typography className={classes.listItemClientCount}>{session.clientIds.length}</Typography>
                 </Box>
             </CardContent>
-            <CardActions className={classes.listItemActions}>
+            <CardActions className={classes.listItemButtons}>
                 <Typography className={classes.listItemClientCount}>{session.status}</Typography>
                 {session.status === 'upcoming' && <Button className={classes.buttonSecondary} onClick={() => cancelSession(session)}>Cancel Session</Button>}
                 <Button className={classes.buttonPrimary} onClick={() => openSession(session)}>OPEN Session</Button>

diff --git a/src/containers/UserBanner.js b/src/containers/UserBanner.js
@@ -8,54 +8,55 @@ import { PhotoCamera } from '@material-ui/icons'
 import EditIcon from '@material-ui/icons/Edit';
 import DoneIcon from '@material-ui/icons/Done';
 import ClearIcon from '@material-ui/icons/Clear';
-import homeStyles from '../styles/homeStyles';
+import dashStyles from '../styles/dashStyles';
 
 export default function UserBanner({ dataUser }) {
-    const classes = homeStyles()
+    const classes = dashStyles()
     const [editBioMode, setEditBioMode] = useState(false)
     console.log(dataUser)
     return (
-        <Paper maxWidth="sm" className={classes.root}>
+        // <Box maxWidth="sm" className={classes.dash}>
 
-            {/* <Typography style={{marginLeft: 50, fontSize: 30, color: '#fbfbd4'}}>
-                User Profile
-            </Typography> */}
+            /* <Typography className={classes.dashTitle} >
+                Dashboard
+            </Typography> */
 
-            <Card variant="outlined" className={classes.card}>
+            <Card variant="outlined" className={classes.userBanner}>
 
-                <CardMedia
-                    className={classes.media}
+                {/* <CardMedia
+                    className={classes.userBannerImage}
                     // https://images.unsplash.com/photo-1506813561347-cbbdf7b3f520?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1547&q=80
                     // https://images.unsplash.com/photo-1597761081347-b9d37f912156?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80
 					image={dataUser?.bannerUrl ? dataUser.bannerUrl : "https://images.unsplash.com/photo-1495463349271-af9a2bf23aff?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1390&q=80"}
 					title={dataUser?.username}
-                />
 
-                <Box className={classes.userAvatar}>
+                /> */}
+
+                <Box className={classes.userAvatarBox}>
                     <Avatar 
                         alt={dataUser?.username||dataUser?.firstName+' '+dataUser?.lastName} 
                         src={dataUser?.profilePicture ? dataUser.profilePicture : "https://images.unsplash.com/photo-1574352067721-72d5913bd35c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=634&q=80"}  
-                        className={classes.avatar}
+                        className={classes.userAvatarImage}
                     />
                     {
                         dataUser?.email === dataUser?.email &&
-                        <IconButton className={classes.uploadBannerPicture}>
+                        <IconButton className={classes.userAvatarUploadIcon}>
                             <PhotoCamera />
                         </IconButton>
                     }
-
                 </Box>
+
                 <Box className={classes.userPanel}>
-                    {
+                    {/* {
                         dataUser?.email === dataUser?.email &&
                         <IconButton className={classes.uploadProfilePicture}>
                             <PhotoCamera />
                         </IconButton>
-                    }
+                    } */}
 
                     <Box className={classes.userInfo}>
                         <Typography className={classes.username}>{dataUser?.username}</Typography>
-                        {
+                        {/* {
                             editBioMode 
                             ? <TextField 
                                 className={classes.formField} 
@@ -67,12 +68,10 @@ export default function UserBanner({ dataUser }) {
                                 multiline
                             />	
                             : <Typography className={classes.userBio}>{dataUser?.bio && dataUser.bio}</Typography>
-
-
-                        }
+                        } */}
 
 
-                        {
+                        {/* {
                             dataUser?.email === dataUser?.email &&
                             editBioMode
                             ? 
@@ -104,7 +103,7 @@ export default function UserBanner({ dataUser }) {
                                     <EditIcon fontSize="small"/>
                                 </IconButton>
                             </Box>
-                        }
+                        } */}
                     </Box>
                 </Box>
 
@@ -128,6 +127,6 @@ export default function UserBanner({ dataUser }) {
                 }
                 </Box> */}
 		    </Card>
-        </Paper>
+        // </Box>
     )
 }
diff --git a/src/pages/DashPage.js b/src/pages/DashPage.js
@@ -32,10 +32,10 @@ export default function DashPage({authUser, dataUser}) {
 
     console.log("DashPage, dataUser.userType: ", dataUser.userType)
     return (
-        <div>
+        <div className={classes.container}>
             <UserBanner dataUser={dataUser} />
 
-            <AppBar className={classes.authAppBar} position="static">
+            <AppBar className={classes.dashAppBar} position="static">
                 <Tabs
                     className={classes.authTabs}
                     value={value}

diff --git a/src/styles/dashStyles.js b/src/styles/dashStyles.js
@@ -4,6 +4,10 @@ import bannerImage from '../assets/images/homeBanner_placeholder.jpg';
 import logoImage from '../assets/images/logo_placeholder.jpg';
 
 const dashStyles = makeStyles(() => ({
+    container: {
+        width: '98%',
+        margin: 'auto',
+    },
     userBanner: {
         display: 'flex',
         flexDirection: 'row',
@@ -29,7 +33,11 @@ const dashStyles = makeStyles(() => ({
     dashTitle: {
         marginLeft: 50, fontSize: 30, color: '#fbfbd4'
     },
-
+    dashAppBar: {
+
+        borderRadius: '15px 15px 0 0',
+        backgroundColor: holisticTheme.bgContainer,
+    },
 
 
     homePage: {
@@ -99,10 +107,7 @@ const dashStyles = makeStyles(() => ({
 		borderRadius: '15px',
 
     },
-    authAppBar: {
-        borderRadius: '15px 15px 0 0',
-        backgroundColor: holisticTheme.bgContainer,
-    },
+
     authTabs: {
         // borderRadius: '15px 15px 0 0',
         // backgroundColor: holisticTheme.bgContainer,