adding footer component (#259)

unlock-app/.storybook/head.html

@@ -5,7 +5,7 @@
  */
 
 @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700');
-@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:200,500');
+@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:200i,200,500');
 @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Serif:300,400');
 
 :root {
@@ -27,7 +27,7 @@
 }
 
 h1 {
-  font-size: 24px;
+  font-size: 24px
   font-weight: 500;
 }
 

unlock-app/src/components/interface/Footer.js

@@ -0,0 +1,42 @@
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+import Icons from './icons'
+
+export default class Footer extends PureComponent {
+  render() {
+    return (
+      <Container>
+        <Button><Icons.About fill={'white'} /></Button>
+        <Button><Icons.Jobs fill={'white'} /></Button>
+        <Button><Icons.Github fill={'white'} /></Button>
+        <Colophon>Made with passion in Brooklyn, NY</Colophon>
+      </Container>
+    )
+  }
+}
+
+Footer.propTypes = {
+}
+
+const Container = styled.footer`
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: repeat(3, 24px) 1fr;
+  grid-auto-flow: column;
+  align-items: center;
+`
+
+const Button = styled.a`
+  background-color: var(--grey);
+  border-radius: 50%;
+  height: 24px;
+  display: grid;
+`
+
+const Colophon = styled.span`
+  justify-self: end;
+  font-size: 12px;
+  font-weight: 200;
+  font-style: italic;
+  font-family: 'IBM Plex Mono', 'Courier New', Serif;
+`

unlock-app/src/components/interface/Layout.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'
 import Header from './Header'
+import Footer from './Footer'
 import Unlock from './icons/Unlock'
 
 export default function Layout({ forContent, title, children }) {
@@ -15,6 +16,9 @@ export default function Layout({ forContent, title, children }) {
       <Content>
         <Header forContent={forContent} title={title} />
         {children}
+        {forContent &&
+          <Footer />
+        }
       </Content>
       <Right />
     </Container>

unlock-app/src/stories/interface/Footer.stories.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Footer from '../../components/interface/Footer'
+
+storiesOf('Footer')
+  .add('the footer', () => {
+    return (
+      <Footer />
+    )
+  })