Skip to content

Feature:-Header Redesign #366 #402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
vernfongchao wants to merge 12 commits into
base: main
Choose a base branch
from
Draft

Feature:-Header Redesign #366 #402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d0ea6ac
Add Icons for Header
vernfongchao Jan 14, 2023
3bc5112
commented out font change for now
vernfongchao Jan 14, 2023
4fd9823
add montserrat font
vernfongchao Jan 16, 2023
ed2c1d0
remove extra montserrat font but regular
vernfongchao Jan 16, 2023
6457cea
remove useStates on hover effect
vernfongchao Jan 16, 2023
41e5f81
fix BEM styling
vernfongchao Jan 17, 2023
c796c36
Merge branch 'main' into vernfongchao/feature/header/redesign
vernfongchao Jan 17, 2023
e28fbea
merge with main
vernfongchao Jan 17, 2023
b65db70
remove unused imports
vernfongchao Jan 17, 2023
d0beadd
remove font license text and add to license page
vernfongchao Jan 19, 2023
e8e24c6
remove font license file
vernfongchao Jan 19, 2023
4bdbc82
fix type and naming convention on license page
vernfongchao Jan 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added client/src/assets/fonts/Montserrat-Regular.otf
View file
Open in desktop
Binary file not shown.
6 changes: 6 additions & 0 deletions client/src/components/App/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
54 changes: 51 additions & 3 deletions client/src/components/Auth/AuthButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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>
);
};
2 changes: 1 addition & 1 deletion client/src/components/Auth/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
116 changes: 44 additions & 72 deletions client/src/components/Header/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Loading