Skip to content

Commit

Permalink
Merge pull request #1389 from hackforla/1347-thematic-coloring-of-con…
Browse files Browse the repository at this point in the history
…tent-pages-3-v2-header-footer-updates

#3 v2 header & footer updates
  • Loading branch information
edwinjue authored Oct 6, 2022
2 parents e3b7eaa + e8be0d7 commit 0f4288b
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 27 deletions.
37 changes: 24 additions & 13 deletions client/components/Footer.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'proptypes';
import { Container, Typography } from '@material-ui/core';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';
import { Link } from 'react-router-dom';
import SocialMediaLinks from './SocialMediaLinks';

// Footer should make use of style overrides to look the same regardless of light/dark theme.
const useStyles = makeStyles(theme => ({
footer: {
position: 'fixed',
Expand All @@ -16,21 +17,24 @@ const useStyles = makeStyles(theme => ({
backgroundColor: theme.palette.primary.dark,
zIndex: 1,
},
footerSpacing: {
height: theme.footer.height,
},
lastUpdated: {
fontWeight: theme.typography.fontWeightMedium,
color: theme.palette.text.dark,
lineHeight: theme.footer.height,
fontSize: '14px',
fontFamily: 'Roboto',
},
copyright: {
fontSize: '14px',
fontWeight: theme.typography.fontWeightMedium,
lineHeight: theme.footer.height,
color: theme.palette.text.dark,
},
container: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
margin: theme.spacing(0, 2, 0),
},
copyrightContainer: {
display: 'flex',
Expand All @@ -46,26 +50,33 @@ const useStyles = makeStyles(theme => ({
// TODO: check with UI/UX re placement of social media, privacy policy links
const Footer = ({ lastUpdated }) => {
const classes = useStyles();
const currentDate = new Date();

return (
<footer className={classes.footer}>
{ lastUpdated && (
<Container maxWidth="lg" className={classes.container}>
<div className={classes.container}>
<div className={classes.copyrightContainer}>
<Typography className={classes.copyright}>
&#169;311 Data &nbsp;&nbsp;All Rights Reserved |&nbsp;
<Typography variant="body2" className={classes.copyright}>
&#169;
{currentDate.getFullYear()}
&nbsp;311 Data&nbsp;&nbsp;|&nbsp;&nbsp;All Rights Reserved&nbsp;&nbsp;|&nbsp;&nbsp;
<Link to="/privacy" className={classes.link}>
Privacy Policy
</Link>
&nbsp;| Powered by volunteers from Hack for LA |
&nbsp;&nbsp;|&nbsp;&nbsp;Powered by volunteers from Hack for LA
</Typography>
</div>
<div>
<Typography variant="body2" className={classes.lastUpdated}>
Data last updated&nbsp;
{moment(lastUpdated).format('MM/DD/YY')}
</Typography>
</div>
<div>
<SocialMediaLinks classes={classes} />
</div>
<Typography className={classes.lastUpdated}>
Data updated: &nbsp;
{moment(lastUpdated).format('MM/DD/YY')}
</Typography>
</Container>
</div>
)}
</footer>
);
Expand Down
28 changes: 14 additions & 14 deletions client/components/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ import {
Menu,
MenuItem,
} from '@material-ui/core';
import fonts from '@theme/fonts';

// Header should make use of style overrides to look the same regardless of light/dark theme.
const useStyles = makeStyles(theme => ({
appBar: {
height: theme.header.height,
Expand All @@ -20,19 +22,20 @@ const useStyles = makeStyles(theme => ({
textDecoration: 'none',
},
button: {
color: 'white',
textTransform: 'none',
fontFamily: 'Roboto',
fontFamily: fonts.family.roboto,
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
color: 'white',
textDecoration: 'none',
},
title: {
...theme.typography.h1,
flexGrow: 1,
...theme.typography.h4,
fontFamily: fonts.family.oswald,
fontSize: '30px',
fontWeight: 'bold',
letterSpacing: '4px',
letterSpacing: '0.13em',
fontWeight: theme.typography.fontWeightBold,
flexGrow: 1,
},
}));

Expand All @@ -56,7 +59,7 @@ const Header = () => {
return (
<AppBar position="static" className={classes.appBar}>
<Toolbar>
<Typography variant="h1" className={classes.title}>
<Typography variant="h4" className={classes.title}>
<Link to="/" className={classes.link}>311DATA</Link>
</Typography>
<NavLink className={classes.link} to="/map" activeStyle={activeStyle}>
Expand All @@ -81,13 +84,13 @@ const Header = () => {
horizontal: 'left',
}}
>
<Link to="/reports/dashboards/overview_combined" className={classes.link}>
<MenuItem onClick={handleClose} button className={classes.button}>
<Link to="/reports/dashboards/overview_combined">
<MenuItem onClick={handleClose}>
Overview
</MenuItem>
</Link>
<Link to="/reports/dashboards/nc_summary_comparison" className={classes.link}>
<MenuItem onClick={handleClose} button className={classes.button}>
<Link to="/reports/dashboards/nc_summary_comparison">
<MenuItem onClick={handleClose}>
Compare Two Neighborhoods
</MenuItem>
</Link>
Expand All @@ -98,9 +101,6 @@ const Header = () => {
<NavLink to="/about" className={classes.link} activeStyle={activeStyle}>
<Button className={classes.button}>About</Button>
</NavLink>
<NavLink to="/blog" className={classes.link} activeStyle={activeStyle}>
<Button className={classes.button}>Blog</Button>
</NavLink>
<NavLink to="/privacy" className={classes.link} activeStyle={activeStyle}>
<Button className={classes.button}>Privacy</Button>
</NavLink>
Expand Down

0 comments on commit 0f4288b

Please sign in to comment.