#7 Privacy Page v2

client/components/Footer.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'proptypes';
-import { Container, Typography } from '@material-ui/core';
+import Container from '@material-ui/core/Container';
+import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
@@ -16,6 +17,9 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.primary.dark,
     zIndex: 1,
   },
+  footerSpacing: {
+    height: theme.footer.height,
+  },
   lastUpdated: {
     color: theme.palette.text.dark,
     lineHeight: theme.footer.height,
@@ -57,7 +61,7 @@ const Footer = ({ lastUpdated }) => {
               <Link to="/privacy" className={classes.link}>
                 Privacy Policy
               </Link>
-              &nbsp;| Powered by volunteers from Hack for LA |
+                &nbsp;| Powered by volunteers from Hack for LA |
             </Typography>
             <SocialMediaLinks classes={classes} />
           </div>

client/components/Header.jsx

@@ -9,26 +9,27 @@ import {
   Menu,
   MenuItem,
 } from '@material-ui/core';
+import colors from '@theme/colors';
 
 const useStyles = makeStyles(theme => ({
   appBar: {
     height: theme.header.height,
     backgroundColor: theme.palette.primary.main,
   },
   link: {
-    color: 'white',
+    color: colors.textPrimaryLight,
     textDecoration: 'none',
   },
   button: {
+    color: colors.textPrimaryLight,
     textTransform: 'none',
     fontFamily: 'Roboto',
     marginLeft: theme.spacing(1),
     marginRight: theme.spacing(1),
-    color: 'white',
     textDecoration: 'none',
   },
   title: {
-    ...theme.typography.h1,
+    ...theme.typography.h3,
     flexGrow: 1,
     fontSize: '30px',
     fontWeight: 'bold',
@@ -56,7 +57,7 @@ const Header = () => {
   return (
     <AppBar position="static" className={classes.appBar}>
       <Toolbar>
-        <Typography variant="h1" className={classes.title}>
+        <Typography variant="h3" className={classes.title}>
           <Link to="/" className={classes.link}>311DATA</Link>
         </Typography>
         <NavLink className={classes.link} to="/map" activeStyle={activeStyle}>
@@ -81,13 +82,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>
@@ -98,9 +99,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>

client/components/common/ContentBody/index.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Container from '@material-ui/core/Container';
+import Grid from '@material-ui/core/Grid';
+import sharedLayout from '@theme/layout';
+
+const ContentBody = ({ children, maxWidth }) => {
+  const classes = sharedLayout();
+
+  return (
+    <Grid container className={classes.contentMarginTop} alignItems="center" justify="center" direction="column">
+      <Grid item>
+        <Container component="main" maxWidth={maxWidth}>
+          {children}
+        </Container>
+      </Grid>
+    </Grid>
+  );
+};
+
+ContentBody.defaultProps = {
+  maxWidth: 'md',
+};
+
+ContentBody.propTypes = {
+  children: PropTypes.node.isRequired,
+  maxWidth: PropTypes.string,
+};
+
+export default ContentBody;

client/components/common/ContentBottom/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  bottomSpacing: {
+    height: theme.footer.height,
+  },
+}));
+
+const ContentBottom = () => {
+  const classes = useStyles();
+  return (
+    <Grid container className={classes.bottomSpacing}>
+      {/*  an empty grid container with footer height to prevent
+        *  fixed positioned footer from obscuring submit button */}
+    </Grid>
+  );
+};
+
+export default ContentBottom;

client/components/common/TextHeading/index.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles(theme => ({
+  headingBackground: {
+    background: theme.palette.primary.main,
+    backgroundPosition: 'top',
+    height: '15vh',
+    position: 'relative',
+  },
+  headingOverlayText: {
+    left: '50%',
+    color: 'white',
+    fontSize: '40px',
+    fontWeight: 'bold',
+    position: 'absolute',
+    textAlign: 'center',
+    top: '50%',
+    transform: 'translate(-50%, -70%)',
+  },
+}));
+
+const TextHeading = ({ children }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.headingBackground}>
+      <div className={classes.headingOverlayText}>
+        <Typography variant="h1">{children}</Typography>
+      </div>
+    </div>
+  );
+};
+
+TextHeading.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default TextHeading;

client/components/contact/Contact.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ToastContainer } from 'react-toastify';
-import ContactImage from './ContactImage';
+import TextHeading from '@components/common/TextHeading';
+import ContentBody from '@components/common/ContentBody';
 import ContactIntro from './ContactIntro';
 import ContactForm from './ContactForm';
 
@@ -22,9 +23,11 @@ const Contact = () => (
       />
     </div>
     <div>
-      <ContactImage>Contact Us</ContactImage>
-      <ContactIntro />
-      <ContactForm />
+      <TextHeading>Contact Us</TextHeading>
+      <ContentBody maxWidth="sm">
+        <ContactIntro />
+        <ContactForm />
+      </ContentBody>
     </div>
   </>
 );