styling AppBar Menu; #40

BCIT-SSD-2020-21 · Apr 18, 2021 · ca4248f · ca4248f
1 parent 227158f
commit ca4248f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 120 deletions.
diff --git a/src/containers/MenuAppBar.js b/src/containers/MenuAppBar.js
@@ -13,7 +13,7 @@ import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import HighlightOffTwoToneIcon from '@material-ui/icons/HighlightOffTwoTone';
 import { userSignOut } from '../firebase/services'; 
 import { useTheme } from '@material-ui/core/styles';
-import navbarStyles from '../styles/navbarStyles';
+import { navbarStyles } from '../styles/navbarStyles';
 import firebase from '../firebase/config';
 
 export default function MenuAppBar({dataUser}) {
@@ -84,11 +84,7 @@ export default function MenuAppBar({dataUser}) {
   return (
     <div>
       <CssBaseline />
-      <AppBar 
-        position="fixed"
-        className={clsx(classes.appBar, {
-          [classes.appBarShift]: drawerOpen,
-        })}>
+      <AppBar position="fixed" className={clsx(classes.appBar, {[classes.appBarShift]: drawerOpen,})}>
         <Toolbar className={classes.appBarContainer}>
           {/* DRAWER */}
           <IconButton
@@ -100,7 +96,6 @@ export default function MenuAppBar({dataUser}) {
           >
             <MenuIcon />
           </IconButton>
-          {/* <Typography className={classes.appBarTitle}>Holistic</Typography> */}
           <Link className={classes.appBarNavLink} to="/feed">Feed</Link>
           <Link className={classes.appBarNavLink} to="/">Dash</Link>
           {dataUser && (
@@ -115,6 +110,12 @@ export default function MenuAppBar({dataUser}) {
                 <AccountCircleTwoToneIcon />
               </IconButton>
               <Menu
+              PaperProps={{
+                style: {
+                  backgroundColor: '#2d2639E6',
+                  marginTop: "40px"
+                }
+               }}
                 className={classes.menu}
                 id="menu-appbar"
                 anchorEl={anchorEl}
@@ -134,14 +135,14 @@ export default function MenuAppBar({dataUser}) {
                   className={classes.menuItem}
                   onClick={() => toUserProfile(dataUser.id)}
                 >
-                  <AccountBoxTwoToneIcon />Profile
+                  <AccountBoxTwoToneIcon className={classes.menuItemIcon}/>Profile
                 </MenuItem>
-                <MenuItem className={classes.menuItem}><SettingsIcon />Settings</MenuItem>
+                <MenuItem className={classes.menuItem}><SettingsIcon className={classes.menuItemIcon}/>Settings</MenuItem>
                 <MenuItem className={classes.menuItem} onClick={() => {
                   userSignOut()
                   history.push('/')
                 }}>
-                  <ExitToAppIcon />SignOut
+                  <ExitToAppIcon className={classes.menuItemIcon}/>SignOut
                 </MenuItem>
               </Menu>
             </div>

diff --git a/src/styles/atomStyles.js b/src/styles/atomStyles.js
@@ -3,7 +3,9 @@ import { holisticTheme } from './colorThemes';
 import bannerImage from '../assets/images/homeBanner_placeholder.jpg';
 import logoImage from '../assets/images/logo_placeholder.jpg';
 
+// Stylesheet exclusively used for ATOM Styling (src/components/atoms)
 export const searchBoxStyles = makeStyles(() => ({
+    // 
     container: {
         backgroundColor: holisticTheme.bgContainer,
         borderRadius: '22px',

diff --git a/src/styles/navbarStyles.js b/src/styles/navbarStyles.js
@@ -3,20 +3,15 @@ import { holisticTheme } from './colorThemes';
 
 const drawerWidth = 240;
 
-const navbarStyles = makeStyles((theme) => ({
-    title: {
-        flexGrow: 1,
-    },
+export const navbarStyles = makeStyles((theme) => ({
+    // APPBAR
     appBarContainer: {
         flexGrow: 1,
         backgroundColor: holisticTheme.bgDark,
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'space-between',
     },
-    appBarTitle: {
-        fontSize: '38',
-    },
     appBarNavLink: {
         fontWeight: 'bold',
         color: holisticTheme.textTitle,
@@ -25,113 +20,22 @@ const navbarStyles = makeStyles((theme) => ({
         border: '1px solid black',
         borderRadius: '6px',
     },
-    authTitle: {
-        fontSize: '32px',
-        fontStyle: 'italic',
-        textAlign: 'left',
-        paddingLeft: '10%',
-        color: holisticTheme.textTitle,
-    },
+    // MENU 
+
     menu: {
-      color: holisticTheme.bgDrawer,
+      // backgroundColor: holisticTheme.bgDrawer,
     },
     menuItem: {
-        textDecoration: 'none',
-    },
-    authAppBar: { // Tabs: Login or Register?
-        borderRadius: '15px 15px 0 0',
-        backgroundColor: holisticTheme.bgContainer,
-    },
-    registerAppBar: { // Tabs: Client or Coach?
-        backgroundColor: holisticTheme.bgContainer,
-    },
-    authTabs: {
-        // borderRadius: '15px 15px 0 0',
-        // backgroundColor: holisticTheme.bgContainer,
-    },
-    authForm: {
-        // paddingBottom: '20px',
-        borderRadius: '0 0 15px 15px',
-		// flexGrow: 1,
-		backgroundColor: holisticTheme.bgContainer,
-		display: 'flex',
-		flexDirection: 'column',
-        justifyContent: 'center',
-		alignItems: 'center',
-	},
-    authField: {
-        width: '85%',
-        marginTop: '10px',
-    },
-    authFormLabel: {
-        color: holisticTheme.textLabel,
-        // paddingBottom: '5px',
-        marginLeft: '10px',
-        marginBottom: '10px',
-        fontSize: '18px',
-        fontStyle: 'italic',
-    },
-	authFormInput: {
-	  	// justifyContent: 'center',
-		// alignItems: 'center',
-        // marginTop: '5px',
-        padding: '5px',
-        borderRadius: '15px',
-        color: holisticTheme.textLabel,
-        backgroundColor: holisticTheme.bgInput,
-	},
-    authFormSubmit: {
-        margin: '15px',
-        paddingRight: '35px',
-        paddingLeft: '35px',
-        borderRadius: '25px',
-        color: holisticTheme.textBtnPrimary,
-        backgroundColor: holisticTheme.bgBtnPrimary,
-    },
-    authSectionSeparator: {
-        color: holisticTheme.textLabel,
-        textAlign: 'left',
-        fontSize: '10px',
-        marginBottom: '10px',
-        marginTop: '15px',
-    },
-    authFieldUserFirstLastName: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        width: '85%',
-    },
-    authFieldUserCityProvCountry: {
+        color: holisticTheme.textTitle,
         display: 'flex',
         flexDirection: 'row',
+        fontSize: 14,
         justifyContent: 'space-between',
-        width: '85%',
-    },
-    authFieldName: {
-        marginTop: '10px',
-        width: '48%',
-    },
-    authCity: {
-        marginTop: '10px',
-        width: '49%',
-    },
-    authProvince: {
-        marginTop: '10px',
-        width: '21%',
-    },
-    authCountry: {
-        marginTop: '10px',
-        width: '27%',
-    },
-    errorBox: {
-        display: 'flex',
-        alignItems: 'center',
-
+        padding: '5px 20px',
+        textDecoration: 'none',
     },
-    errorIcon: {
-        fontSize: '20px',
-        margin: '2px',
-        color: holisticTheme.error,
+    menuItemIcon: {
+      marginRight: '6px',
     },
     // DRAWER
     root: {
@@ -203,6 +107,4 @@ const navbarStyles = makeStyles((theme) => ({
         }),
         marginLeft: 0,
       },
-}));
-
-export default navbarStyles;
+}));