styling; Styling for DashPage #40

BCIT-SSD-2020-21 · Apr 15, 2021 · 16cacbd · 16cacbd
1 parent e25812f
commit 16cacbd
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 10 deletions.
diff --git a/src/components/atoms/Action.js b/src/components/atoms/Action.js
@@ -80,7 +80,7 @@ export default function SessionAction({action, authUser, dataUser}) {
                 <Typography>{'actual'}</Typography>
                 <Box className={classes.dataBox}>
                     <IconButton className={classes.dataButton} disabled={!actionEditMode} onClick={() => {if (qty > 0) {setQty(qty-1)} }}><RemoveCircleTwoToneIcon fontSize="small" className={classes.dataIcon} /></IconButton>
-                    <TextField className={classes.qty} disabled={!actionEditMode} id="qty" label={action.qtyType} value={qty} onChange={(e) => setQty(e.target.value)} />
+                    <TextField className={classes.qty} InputProps={{ className: classes.qty }} disabled={!actionEditMode} id="qty" label={action.qtyType} value={qty} onChange={(e) => setQty(e.target.value)} />
                     <IconButton className={classes.dataButton} disabled={!actionEditMode} onClick={() => setQty(qty+1)}><AddCircleTwoToneIcon fontSize="small" className={classes.dataIcon} /></IconButton>                
                 </Box>
                 <Box className={classes.dataBox}>

diff --git a/src/containers/SessionDetails.js b/src/containers/SessionDetails.js
@@ -55,8 +55,12 @@ export default function SessionDetails({authUser, dataUser, session, exitSession
             <Box className={classes.sessionDetails}>
                 <Box className={classes.sessionInfo}>
                     <Typography>{session.name}</Typography>
-                    <Typography>{session.name}</Typography>    
-                    <Typography>{session.name}</Typography>
+                    <Typography>{'Coach: ' + session.coachName}</Typography>    
+                    {
+                        session.clientNames.map((name, index) => <Typography key={index}>{name}</Typography>)
+                    }
+                    <Typography>{session.notes}</Typography>
+
                 </Box>
 
                 <Box className={classes.sessionButtons}>

diff --git a/src/containers/SessionListItem.js b/src/containers/SessionListItem.js
@@ -28,11 +28,11 @@ export default function SessionListItem({session, openSession, cancelSession}) {
 
             </CardContent>
             <CardContent className={classes.listItemParticipants}>
-                <Box classname={classes.listItemParticipantsInfo}>
+                <Box className={classes.listItemParticipantsInfo}>
                     <Typography className={classes.listItemLabel}>{'By coach: '}</Typography>
                     <Typography className={classes.listItemCoachName}>{session.coachName}</Typography>
                 </Box>
-                <Box classname={classes.listItemParticipantsInfo}>
+                <Box className={classes.listItemParticipantsInfo}>
                     <Typography className={classes.listItemLabel}>{'Participating: '}</Typography>
                     <Typography className={classes.listItemClientCount}>{session.clientIds.length}</Typography>
                 </Box>

diff --git a/src/containers/UserBanner.js b/src/containers/UserBanner.js
@@ -8,7 +8,7 @@ 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 dashStyles from '../styles/dashStyles';
+import { dashStyles } from '../styles/dashStyles';
 
 export default function UserBanner({ dataUser }) {
     const classes = dashStyles()

diff --git a/src/styles/dashStyles.js b/src/styles/dashStyles.js
@@ -159,4 +159,35 @@ const dashStyles = makeStyles(() => ({
 	},
 }));
 
-export default dashStyles;
+const userListStyles = makeStyles(() => ({
+    contaner: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    userData: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+    },
+    fullName: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+    },
+    username: {
+        fontWeight: 'bold',
+    },
+    firstName: {
+        fontStyle: 'italic',
+    },
+    lastName: {
+        fontStyle: 'italic',
+    },
+    actions: {
+
+    }
+
+}));
+
+export { dashStyles, userListStyles };
diff --git a/src/styles/sessionStyles.js b/src/styles/sessionStyles.js
@@ -213,9 +213,9 @@ const newActionFormStyles = makeStyles(() => ({
         padding: 0,
     },
     qty: {
-        // color: 'red',
-        // textAlign: 'center',
-        // fontSize: '40px',
+        color: 'red',
+        textAlign: 'center',
+        fontSize: '40px',
     }
 
 }));