Feature:-Header Redesign #366

client/src/components/App/App.css

@@ -498,3 +498,9 @@ a.btn.disabled, fieldset:disabled a.btn {
 .text-center {
   text-align: center !important;
 }
+
+@font-face {
+  font-family: 'Montserrat';
+  src: local('Montserrat'),
+    url('../../assets/fonts/Montserrat-Regular.otf') format('truetype');
+}

client/src/components/Auth/AuthButton.js

@@ -2,6 +2,9 @@
 import React from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import useAuthUtils from '@/components/Auth/useAuthUtils';
+import { GreenButton } from '@/components/Section/Section';
+import { MenuItem } from '@mui/material';
+import { LoginOutlined, LogoutOutlined } from '@mui/icons-material';
 
 export const AuthButton = () => {
   const { isAuthenticated, logout } = useAuth0();
@@ -18,12 +21,57 @@ export const AuthButton = () => {
   };
 
   return (
-    <button
+    <GreenButton
+      style={{
+        fontSize: '1.2rem',
+        '&:hover': {
+          padding: '6px 4px',
+          fontWeight: 'bold',
+        },
+      }}
       type="button"
-      className="authbutton btn btn-light btn-block"
       onClick={handleClick}
     >
       {isAuthenticated ? 'Log Out' : 'Log In'}
-    </button>
+    </GreenButton>
+  );
+};
+
+export const ProfileAuthButton = (props) => {
+  const LoginIcon = (props) => (
+    <LoginOutlined sx={{ fontSize: '2rem' }} {...props} />
+  );
+
+  const LogoutIcon = (props) => (
+    <LogoutOutlined sx={{ fontSize: '2rem' }} {...props} />
+  );
+  const { isAuthenticated, logout } = useAuth0();
+  const { loginToCurrentPage } = useAuthUtils();
+
+  const handleClick = () => {
+    if (isAuthenticated) {
+      // Only logging out to the root seems to be allowed, so if the user is on a subpage like
+      // /contact, they'll be sent back to /.
+      logout({ returnTo: location.origin });
+    } else {
+      loginToCurrentPage();
+    }
+  };
+
+  return (
+    <MenuItem
+      sx={{
+        padding: '8px',
+        width: '180px',
+        '&:hover': {
+          textDecoration: 'none',
+          color: '#3fab45',
+        },
+      }}
+      onClick={handleClick}
+    >
+      {isAuthenticated ? <LoginIcon /> : <LogoutIcon />}
+      {props.children}
+    </MenuItem>
   );
 };

client/src/components/Auth/index.js

@@ -1,5 +1,5 @@
 export { Loading } from './Loading';
-export { AuthButton } from './AuthButton';
+export { AuthButton, ProfileAuthButton } from './AuthButton';
 export { RedirectWithHash } from './RedirectWithHash';
 export { RequireAuth } from './RequireAuth';
 export { Auth0ProviderWithRedirect } from './Auth0ProviderWithRedirect';

client/src/components/Header/Header.js

@@ -1,92 +1,64 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Menu, MenuItem } from '@mui/material';
+import { TreeLogo } from '@/components/Icons';
+import HeaderLogo from '@/assets/images/logos/header-logo.svg';
 import { useAuth0 } from '@auth0/auth0-react';
 import { AuthButton } from '@/components/Auth';
-import HeaderLogo from '@/assets/images/logos/header-logo.svg';
+import Menu from './Menu';
+
 import './Header.scss';
 
 const Header = () => {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
   const { isAuthenticated } = useAuth0();
 
   return (
-    <div id="header" className="header">
-      <div className="header-content">
-        <Link to="/">
-          <img className="header--logo" src={HeaderLogo} alt="Header Logo" />
-        </Link>
-
-        <button
-          type="button"
-          className="header-btn-menu"
-          aria-controls="wtt-menu"
-          aria-haspopup="true"
-          onClick={handleClick}
-        >
-          &#9776;
-        </button>
-
-        <Menu
-          id="wtt-menu"
-          anchorEl={anchorEl}
-          keepMounted
-          open={Boolean(anchorEl)}
-          onClose={handleClose}
-        >
-          {isAuthenticated && (
-            <MenuItem onClick={handleClose}>
-              <Link to="/userprofile" className="header-link">
-                <HeaderButton menuItem="User Profile" />
-              </Link>
-            </MenuItem>
-          )}
-
-          <MenuItem onClick={handleClose}>
-            <Link to="/" className="header-link">
-              <HeaderButton menuItem="Map" />
+    <div className="header">
+      <div className="header__navigation">
+        <div className="header__navigation__logocontainer">
+          <Link to="/">
+            <TreeLogo />
+          </Link>
+          <Link to="/">
+            <img
+              className="header__navigation__logocontainer__logo"
+              src={HeaderLogo}
+              alt="Header Logo"
+            ></img>
+          </Link>
+        </div>
+        <div className="header__navigation__navcontainer">
+          <button className="header__navigation__navcontainer__buttons">
+            <Link to="/" title="Map">
+              Map
             </Link>
-          </MenuItem>
-
-          <MenuItem onClick={handleClose}>
-            <Link to="/about" className="header-link">
-              <HeaderButton menuItem="About" />
+          </button>
+          <button className="header__navigation__navcontainer__buttons">
+            <Link to="/about" title="About">
+              About
             </Link>
-          </MenuItem>
-
-          <MenuItem onClick={handleClose}>
-            <Link to="/contact" className="header-link">
-              <HeaderButton menuItem="Contact" />
+          </button>
+          <button className="header__navigation__navcontainer__buttons">
+            <Link to="/contact" title="Contact">
+              Contact
             </Link>
-          </MenuItem>
-
-          <MenuItem onClick={handleClose}>
-            <Link to="/data" className="header-link">
-              <HeaderButton menuItem="Data" />
+          </button>
+          <button className="header__navigation__navcontainer__buttons">
+            <Link to="/data" title="Data">
+              Data
             </Link>
-          </MenuItem>
-
-          <MenuItem onClick={handleClose}>
-            <AuthButton />
-          </MenuItem>
-        </Menu>
+          </button>
+        </div>
+        <div className="header__navigation__authcontainer">
+          {isAuthenticated ? null : (
+            <div className="header__navigation__authcontainer__button">
+              <AuthButton />
+            </div>
+          )}
+          <Menu />
+        </div>
       </div>
     </div>
   );
 };
 
-const HeaderButton = ({ menuItem }) => (
-  <button type="button" className="btn btn-success btn-block">
-    {menuItem}
-  </button>
-);
-
 export default Header;