964 cmpt global footer

client/components/Footer.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'proptypes';
-import {
-  Container,
-  Typography,
-} from '@material-ui/core';
+import { Container, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import moment from 'moment';
+import { Link } from 'react-router-dom';
+import SocialMediaLinks from './SocialMediaLinks';
 
 const useStyles = makeStyles(theme => ({
   footer: {
@@ -22,22 +21,48 @@ const useStyles = makeStyles(theme => ({
     fontSize: '14px',
     fontFamily: 'Roboto',
   },
+  copyright: {
+    fontSize: '14px',
+    lineHeight: theme.footer.height,
+    color: theme.palette.text.dark,
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  copyrightContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  link: {
+    color: theme.palette.text.dark,
+    textDecoration: 'none',
+  },
 }));
 
 // TODO: check with UI/UX re placement of social media, privacy policy links
-const Footer = ({
-  lastUpdated,
-}) => {
+const Footer = ({ lastUpdated }) => {
   const classes = useStyles();
 
   return (
     <footer className={classes.footer}>
       { lastUpdated && (
-        <Container maxWidth="xs">
+        <Container maxWidth="lg" className={classes.container}>
+          <div className={classes.copyrightContainer}>
+            <Typography className={classes.copyright}>
+              &#169;311 Data &nbsp;&nbsp;All Rights Reserved |&nbsp;
+              <Link to="/privacy" className={classes.link}>
+                Privacy Policy
+              </Link>
+              &nbsp;| Powered by volunteers from Hack for LA |
+            </Typography>
+            <SocialMediaLinks classes={classes} />
+          </div>
           <Typography className={classes.lastUpdated}>
-            Data Updated Through:
-            &nbsp;
-            {moment(lastUpdated).format('MMMM Do YYYY, h:mm:ss a')}
+            Data updated: &nbsp;
+            {moment(lastUpdated).format('MM/DD/YY')}
           </Typography>
         </Container>
       )}

client/components/SocialMediaLinks.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+
+import TwitterSVG from '../assets/twitter-round.svg';
+import FacebookSVG from '../assets/facebook-round.svg';
+
+const useStyles = makeStyles(theme => ({
+  socialMedia: {
+    display: 'flex',
+    flexDirection: 'row',
+    lineHeight: theme.footer.height,
+    justifyContent: 'space-between',
+    width: '37px',
+    marginLeft: '5px',
+    alignContent: 'center',
+  },
+  image: {
+    filter:
+      ' invert(85%) sepia(0%) saturate(0%) hue-rotate(53deg) brightness(94%) contrast(88%)',
+    width: '16px',
+    height: '16px',
+    verticalAlign: 'middle',
+  },
+}));
+
+const SocialMediaLinks = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.socialMedia}>
+      <a
+        href="https://www.facebook.com/311-Data-113014693792634"
+        target="_blank"
+        rel="external noopener noreferrer"
+        aria-label="311 data facebook link"
+      >
+        <img className={classes.image} src={FacebookSVG} alt="FaceBook Icon" />
+      </a>
+      <a
+        href="https://twitter.com/data_311"
+        rel="external noopener noreferrer"
+        target="_blank"
+        aria-label="311 data twitter link"
+      >
+        <img className={classes.image} src={TwitterSVG} alt="Twitter Icon" />
+      </a>
+    </div>
+  );
+};
+
+export default SocialMediaLinks;