resolved merge conflict for NavBar.tsx

Author: khuongdn16

app/src/components/top/NavBar.tsx

@@ -3,7 +3,7 @@ import {
   withStyles,
   createStyles,
   makeStyles,
-  Theme
+  Theme,
 } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Avatar from '@material-ui/core/Avatar';
@@ -13,15 +13,16 @@ import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
-import { styleContext } from '../../containers/AppContainer';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
-import LoginButton from '../right/LoginButton'
-import ExportButton from '../right/ExportButton'
+import { Link } from 'react-router-dom';
+import { styleContext } from '../../containers/AppContainer';
+import LoginButton from '../right/LoginButton';
+import ExportButton from '../right/ExportButton';
 import SaveProjectButton from '../right/SaveProjectButton';
 import DeleteProjects from '../right/DeleteProjects';
 import ProjectsFolder from '../right/OpenProjects';
@@ -30,51 +31,44 @@ import StateContext from '../../context/context';
 import logo from '../../public/icons/win/logo.png';
 
 
-// ROUTING TO DASHBOARD 
-import { Link } from "react-router-dom";
+// ROUTING TO DASHBOARD
 
-<<<<<<< HEAD
-
-=======
->>>>>>> master
 // NavBar text and button styling
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1,
-      width: '100%'
-    },
-    menuButton: {
-      marginRight: theme.spacing(2),
-      color: 'white'
-    },
-    title: {
-      flexGrow: 1,
-      color: 'white'
-    },
-    manageProject: {
-      display: 'flex',
-      justifyContent: 'center'
-    }
-  })
-);
+const useStyles = makeStyles((theme: Theme) => createStyles({
+  root: {
+    flexGrow: 1,
+    width: '100%',
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+    color: 'white',
+  },
+  title: {
+    flexGrow: 1,
+    color: 'white',
+  },
+  manageProject: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+}));
 
 // Drop down menu button for export
 const StyledMenu = withStyles({
   paper: {
-    border: '1px solid #d3d4d5'
-  }
+    border: '1px solid #d3d4d5',
+  },
 })(props => (
   <Menu
     elevation={0}
     getContentAnchorEl={null}
     anchorOrigin={{
       vertical: 'bottom',
-      horizontal: 'center'
+      horizontal: 'center',
     }}
     transformOrigin={{
       vertical: 'top',
-      horizontal: 'center'
+      horizontal: 'center',
     }}
     {...props}
   />
@@ -84,10 +78,10 @@ const StyledMenuItem = withStyles(theme => ({
   root: {
     '&:focus': {
       '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
-        color: theme.palette.common.white
-      }
-    }
-  }
+        color: theme.palette.common.white,
+      },
+    },
+  },
 }))(MenuItem);
 
 export default function NavBar(props) {
@@ -101,7 +95,7 @@ export default function NavBar(props) {
   const [modal, setModal] = useState(null);
   const [state, dispatch] = useContext(StateContext);
 
-  const handleClick = event => {
+  const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
 
@@ -131,7 +125,7 @@ export default function NavBar(props) {
           style={{
             border: '1px solid #3f51b5',
             marginBottom: '2%',
-            marginTop: '5%'
+            marginTop: '5%',
           }}
         >
           <ListItemText
@@ -153,8 +147,8 @@ export default function NavBar(props) {
         primBtnAction: null,
         secBtnAction: null,
         secBtnLabel: null,
-        open: true
-      })
+        open: true,
+      }),
     );
   };
 
@@ -164,16 +158,16 @@ export default function NavBar(props) {
       <AppBar position="static">
         <Toolbar>
           <Avatar src={logo} ></Avatar>
-          <Typography variant="h6" style={{marginLeft: '1rem'}} className={classes.title}>
+          <Typography variant="h6" style={{ marginLeft: '1rem' }} className={classes.title}>
             ReacType
           </Typography>
 
           {/* ==================================Dashboard Button================================================== */}
-          {state.isLoggedIn ? <Link to='/dashboard' style ={ {textDecoration: 'none'} }>
+          {state.isLoggedIn ? <Link to='/dashboard' style ={ { textDecoration: 'none' } }>
             <Button
               variant="contained"
               color="primary"
-              style={{minWidth: '137.69px'}}
+              style={{ minWidth: '137.69px' }}
               className="navbarButton"
             >
               Dashboard
@@ -184,26 +178,26 @@ export default function NavBar(props) {
           <Button
             variant="contained"
             color="primary"
-            style={{minWidth: '137.69px'}}
-            onClick={clearWorkspace} 
-            className="navbarButton" 
+            style={{ minWidth: '137.69px' }}
+            onClick={clearWorkspace}
+            className="navbarButton"
             id="navbarButton"
           >
             Clear Canvas
           </Button>
           {/* ==================================ExportButton================================================== */}
           <ExportButton />
-          
-          
+
+
           <Button
             className="navbarButton"
             id="navbarButton"
             color="primary"
             variant="contained"
-            style={{minWidth: '113.97px'}}
+            style={{ minWidth: '113.97px' }}
             onClick={() => {
               !style.backgroundColor
-                ? setStyle({ backgroundColor: '#21262D' }) //dark mode color
+                ? setStyle({ backgroundColor: '#21262D' }) // dark mode color
                 : setStyle({});
               props.isThemeLight ? props.setTheme(false) : props.setTheme(true);
             }}
@@ -212,9 +206,9 @@ export default function NavBar(props) {
           </Button>
 
 {/* ================================MANAGE PROJECT DROPDOWN====================================== */}
-          
-          {state.isLoggedIn ? // render Manage Project button/dropdown only if user is logged in
-            <Button
+
+          {state.isLoggedIn // render Manage Project button/dropdown only if user is logged in
+            ? <Button
             variant="contained"
             color="primary"
             onClick={handleClick}
@@ -231,8 +225,8 @@ export default function NavBar(props) {
           />
 
 {/* ================================MANAGE PROJECT DROPDOWN====================================== */}
-          
-          <StyledMenu  // Dropdown menu connected to Manage Project Button
+
+          <StyledMenu // Dropdown menu connected to Manage Project Button
             id="customized-menu"
             anchorEl={anchorEl}
             keepMounted