hackforla · MattPereira · Mar 13, 2023 · Mar 8, 2023 · Mar 8, 2023 · Mar 8, 2023
diff --git a/client/package.json b/client/package.json
@@ -7,7 +7,7 @@
     "@babel/plugin-transform-react-jsx-self": "^7.10.4",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@mui/material": "^5.11.11",
+    "@mui/material": "^5.11.12",
     "classnames": "^2.2.6",
     "cross-env": "^7.0.2",
     "cross-var": "^1.1.0",

diff --git a/client/src/App.js b/client/src/App.js
@@ -45,7 +45,7 @@ const routes = [
   { path: '/useradmin', name: 'useradmin', Component: UserAdmin },
   { path: '/projects', name: 'projects', Component: ManageProjects },
   {
-    path: '/project/:projectId',
+    path: '/projects/:projectId',
     name: 'project',
     Component: ManageProjects,
   },

diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js
@@ -1,116 +1,72 @@
-import React, {useState} from "react";
-import { Link, withRouter } from "react-router-dom";
-
+import React from 'react';
+import { NavLink, withRouter } from 'react-router-dom';
 import useAuth from '../hooks/useAuth';
-import {authLevelRedirect} from '../utils/authUtils'
+import HflaImg from '../svg/hflalogo.svg';
+import { Box, Button, Grid } from '@mui/material';
+import { styled } from '@mui/system';
+import theme from '../theme';
 
-import "../sass/Navbar.scss";
-//hooks
-//function -> class
 const Navbar = (props) => {
+  // check user accessLevel and adjust link accordingly
+  const { auth } = useAuth();
+
+  const StyledButton = styled(Button)({
+    color: '#757575',
+    padding: '0rem 0rem',
+    borderRadius: 0,
+    fontSize: '1rem',
+    fontFamily: 'Source Code Pro',
+    '&.active': {
+      color: '#000000',
+      borderBottom: `2px ${theme.palette.primary.main} solid`,
+      fontWeight: '800',
+    },
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+  });
 
-    // check user accessLevel and adjust link accordingly
-    const [page, setPage] = useState('home');
-    const { auth } = useAuth();
-    let loginRedirect = '/admin';
-    if (auth?.user) {
-      loginRedirect = authLevelRedirect(auth.user);
-    }
-    const notAuth = () => (
-        <>
-          {page === 'home' ?
-            <p className="nav-link-text nav-link-active">CHECK-IN</p>
-            :
-            <div className='nav-link-container'>
-              <Link to="/" onClick={e => setPage('home')} >
-                <p className="nav-link-text">
-                  CHECK-IN
-                </p>
-              </Link>
-            </div>}
-          {page === 'adminLogin' ?
-            <p className="nav-link-text nav-link-active">ADMIN</p>
-            :
-            <div className='nav-link-container'>
-              <Link to={loginRedirect} onClick={e => setPage('adminLogin')}>
-                <p className="nav-link-text">
-                  ADMIN
-                </p>
-              </Link>
-            </div>
-            }
-        </>
-    )
-    const isAuth = () => (
-      <>
-        {page === 'useradmin' ?
-          <p className="nav-link-text nav-link-active" >USER MANAGEMENT</p>
-          :
-          <div className='nav-link-container'>
-            <Link to="/useradmin" onClick={e => setPage('usermanagement')}>
-              <p className="nav-link-text">ADMIN</p>
-            </Link>
-          </div>}
-        {page === 'projects' ?
-          <p className="nav-link-text nav-link-active" >PROJECTS</p>
-          :
-          <div className='nav-link-container'>
-            <Link to="/projects" onClick={e => setPage('projects')}>
-              <p className="nav-link-text">PROJECTS</p>
-            </Link>
-          </div>}
-      </>
-    )
-    const isUser = () => (
-      <>
-        {page === 'home' ?
-          <p className="nav-link-text nav-link-active" >PROJECTS</p>
-          :
-          <div className='nav-link-container'>
-            <Link to="/projects" onClick={e => setPage('home')}>
-              <p className="nav-link-text">PROJECTS</p>
-            </Link>
-          </div>}
-      </>
-    )
-
-
-    return (
-      <div className="nav-wrapper">
-        <nav className="navbar" role="navigation" aria-label="main navigation">
-          <div className="navbar-buttons-container">
-
-            {!auth?.user &&
-              notAuth()
-            }
-
-            {auth?.user?.accessLevel === 'admin' &&
-              isAuth()
-            }
-
-            {auth?.user?.accessLevel === 'user' &&
-              isUser()
-            }
-
-          </div>
-
-          {props.location.pathname === '/' ||
-          props.location.pathname === '/success' ? (
-            <div className="navbar-logo grow">
-              <img src="/hflalogo.png" alt="Hack for LA Logo"></img>
-            </div>
-          ) : (
-            <div
-              className={`navbar-logo ${
-                props.location.pathname === '/admin' && 'justify-right'
-              }`}
-            >
-              <img src="/hflalogo.png" alt="Hack for LA Logo"></img>
-            </div>
-          )}
-        </nav>
-      </div>
-    );
+  return (
+        <Box sx={{ width: '100%', typography: 'body 1', mt: 4, mb: 2 }}>
+          <Grid container>
+            <Grid item xs={9} sx={{ display: 'flex', justifyContent: 'space-evenly', alignItems: 'center'}}>
+              {/* No auth page -> Displays 2 links -> 'Checkin' and 'Admin'. */}
+              {!auth?.user && (
+                <>
+                  <StyledButton component={NavLink} exact to="/">
+                    CHECK IN
+                  </StyledButton>
+                  <StyledButton component={NavLink} to="/login">
+                    ADMIN
+                  </StyledButton>
+                </>
+              )}
+              {/* Admin auth -> Displays 2 links -> 'Users' and 'Projects'. */}
+              {auth?.user?.accessLevel === 'admin' && (
+                <>
+                  <StyledButton component={NavLink} to="/useradmin">
+                    USERS
+                  </StyledButton>
+                  <StyledButton component={NavLink} to="/projects">
+                    PROJECTS
+                  </StyledButton>
+                </>
+              )}
+              {/* User auth -> Displays 1 link -> 'Projects' only. */}
+              {auth?.user?.accessLevel === 'user' && (
+                <>
+                  <StyledButton component={NavLink} to="/projects">
+                    PROJECTS
+                  </StyledButton>
+                </>
+              )}
+            </Grid>
+            <Grid item>
+              <Box component="img" src={HflaImg} sx={{ width: '100%' }} />
+            </Grid>
+          </Grid>
+        </Box>
+  );
 };
 
-export default withRouter(Navbar);
+export default withRouter(Navbar);
diff --git a/client/src/components/manageProjects/selectProject.js b/client/src/components/manageProjects/selectProject.js
@@ -21,7 +21,7 @@ const SelectProject = ({ projects, accessLevel, user }) => {
     .map((p) => (
       // eslint-disable-next-line no-underscore-dangle
       <li className="project-list-item" key={p._id}>
-        <Link className="project-list-button" to={`/project/${p._id}`}>
+        <Link className="project-list-button" to={`/projects/${p._id}`}>
           {p.name ? p.name : '[unnamed project]'}
         </Link>
       </li>

diff --git a/client/src/index.scss b/client/src/index.scss
@@ -53,6 +53,7 @@ body {
     font-style: normal;
 }
 
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700;800;900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap');
 
 code {

diff --git a/client/src/svg/hflalogo.png b/client/src/svg/hflalogo.png
diff --git a/client/src/svg/hflalogo.svg b/client/src/svg/hflalogo.svg
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -1584,36 +1584,36 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@mui/core-downloads-tracker@^5.11.11":
-  version "5.11.11"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.11.tgz#eb5b3f0900ad96a72a37f85fca11545d47a7bc10"
-  integrity sha512-0YK0K9GfW1ysw9z4ztWAjLW+bktf+nExMyn2+EQe1Ijb0kF2kz1kIOmb4+di0/PsXG70uCuw4DhEIdNd+JQkRA==
+"@mui/core-downloads-tracker@^5.11.12":
+  version "5.11.12"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.12.tgz#b2ea89ba71321a79c89dfb6b2a1b1886dc7de6e4"
+  integrity sha512-LHh8HZQ5nPVcW5QnyLwkAZ40txc/S2bzKMQ3bTO+5mjuwAJ2AzQrjZINLVy1geY7ei1pHXVqO1hcWHg/QdT44w==
 
-"@mui/material@^5.11.11":
-  version "5.11.11"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.11.11.tgz#9896e6f6e53057622345ebd078bc66a4100a364a"
-  integrity sha512-sSe0dmKjB1IGOYt32Pcha+cXV3IIrX5L5mFAF9LDRssp/x53bluhgLLbkc8eTiJvueVvo6HAyze6EkFEYLQRXQ==
+"@mui/material@^5.11.12":
+  version "5.11.12"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.11.12.tgz#b113c854fb1bb0aa473686a36a92322c6c754121"
+  integrity sha512-M6BiIeJjySeEzWeiFJQ9pIjJy6mx5mHPWeMT99wjQdAmA2GxCQhE9A0fh6jQP4jMmYzxhOIhjsGcp0vSdpseXg==
   dependencies:
     "@babel/runtime" "^7.21.0"
     "@mui/base" "5.0.0-alpha.119"
-    "@mui/core-downloads-tracker" "^5.11.11"
-    "@mui/system" "^5.11.11"
+    "@mui/core-downloads-tracker" "^5.11.12"
+    "@mui/system" "^5.11.12"
     "@mui/types" "^7.2.3"
-    "@mui/utils" "^5.11.11"
+    "@mui/utils" "^5.11.12"
     "@types/react-transition-group" "^4.4.5"
     clsx "^1.2.1"
     csstype "^3.1.1"
     prop-types "^15.8.1"
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.11.11":
-  version "5.11.11"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.11.11.tgz#f766a794a2f16fb27b510b11062b6e3a6c1464d1"
-  integrity sha512-yLgTkjNC1mpye2SOUkc+zQQczUpg8NvQAETvxwXTMzNgJK1pv4htL7IvBM5vmCKG7IHAB3hX26W2u6i7bxwF3A==
+"@mui/private-theming@^5.11.12":
+  version "5.11.12"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.11.12.tgz#07c60abac0547b89cc6ac68821c2366e8fab5389"
+  integrity sha512-hnJ0svNI1TPeWZ18E6DvES8PB4NyMLwal6EyXf69rTrYqT6wZPLjB+HiCYfSOCqU/fwArhupSqIIkQpDs8CkAw==
   dependencies:
     "@babel/runtime" "^7.21.0"
-    "@mui/utils" "^5.11.11"
+    "@mui/utils" "^5.11.12"
     prop-types "^15.8.1"
 
 "@mui/styled-engine@^5.11.11":
@@ -1626,16 +1626,16 @@
     csstype "^3.1.1"
     prop-types "^15.8.1"
 
-"@mui/system@^5.11.11":
-  version "5.11.11"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.11.11.tgz#6727b19245ad25e260cb8144104831315a8f7095"
-  integrity sha512-a9gaOAJBjpzypDfhbGZQ8HzdcxdxsKkFvbp1aAWZhFHBPdehEkARNh7mj851VfEhD/GdffYt85PFKFKdUta5Eg==
+"@mui/system@^5.11.12":
+  version "5.11.12"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.11.12.tgz#e7234c4e73e9af2b8e985fbed048d8b274338561"
+  integrity sha512-sYjsXkiwKpZDC3aS6O/6KTjji0jGINLQcrD5EJ5NTkIDiLf19I4HJhnufgKqlTWNfoDBlRohuTf3TzfM06c4ug==
   dependencies:
     "@babel/runtime" "^7.21.0"
-    "@mui/private-theming" "^5.11.11"
+    "@mui/private-theming" "^5.11.12"
     "@mui/styled-engine" "^5.11.11"
     "@mui/types" "^7.2.3"
-    "@mui/utils" "^5.11.11"
+    "@mui/utils" "^5.11.12"
     clsx "^1.2.1"
     csstype "^3.1.1"
     prop-types "^15.8.1"
@@ -1645,10 +1645,10 @@
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.3.tgz#06faae1c0e2f3a31c86af6f28b3a4a42143670b9"
   integrity sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==
 
-"@mui/utils@^5.11.11":
-  version "5.11.11"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.11.11.tgz#c5dddc80c02dc76bd95f492550a5a616548e5557"
-  integrity sha512-neMM5rrEXYQrOrlxUfns/TGgX4viS8K2zb9pbQh11/oUUYFlGI32Tn+PHePQx7n6Fy/0zq6WxdBFC9VpnJ5JrQ==
+"@mui/utils@^5.11.11", "@mui/utils@^5.11.12":
+  version "5.11.12"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.11.12.tgz#627f491c0e7267398590af5e6cb14b306170d914"
+  integrity sha512-5vH9B/v8pzkpEPO2HvGM54ToXV6cFdAn8UrvdN8TMEEwpn/ycW0jLiyBcgUlPsQ+xha7hqXCPQYHaYFDIcwaiw==
   dependencies:
     "@babel/runtime" "^7.21.0"
     "@types/prop-types" "^15.7.5"
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,6 +53,7 @@ body { @@
         font-style: normal;
     }
+    @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700;800;900&display=swap');
     @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap');
     code {
@@ Expand Down @@