Add page footer with link to GitHub repo (#53)

* Add page footer with link to GitHub repo

* Add changelog entry

CHANGELOG.md

@@ -14,6 +14,7 @@ with the current date and the next changes should go under a **[Next]** header.
 * Rebrand from CS@Illinois Queues to Queues@Illinois. ([@genevievehelsel](https://github.com/genevievehelsel) in [#42](https://github.com/illinois/queue/pull/42))
 * Add web manifest for "Add to Home Screen" on Android. ([@shreyas208](https://github.com/shreyas208) in [#29](https://github.com/illinois/queue/pull/29))
 * Fix typo in user profile settings component. ([@genevievehelsel](https://github.com/genevievehelsel) in [#55](https://github.com/illinois/queue/pull/55))
+* Add footer containing link to GitHub repository. ([@nwalters512](https://github.com/nwalters512) in [#53](https://github.com/illinois/queue/pull/53))
 
 ## 27 February 2018
 

components/Footer.js

@@ -0,0 +1,31 @@
+import React, { Fragment } from 'react'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
+
+const Footer = () => (
+  <Fragment>
+    <div className="footer p-3 bg-light d-flex justify-content-center text-muted">
+      <a href="https://github.com/illinois/queue" className="text-muted">
+        <FontAwesomeIcon icon={faGithub} className="mr-2" />
+        GitHub
+      </a>
+    </div>
+    <style global jsx>{`
+      .footer {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+      }
+      .footer a {
+        transition: 300ms all;
+      }
+      .footer a:hover,
+      .footer a:focus {
+        text-decoration: none;
+        color: black !important;
+      }
+    `}</style>
+  </Fragment>
+)
+
+export default Footer

components/Layout.js

@@ -1,15 +1,25 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 
 import Header from './Header'
+import Footer from './Footer'
 
 const Layout = props => (
-  <div>
+  <Fragment>
     <Header />
     {props.children}
-    {/* This provides a bit of padding at the bottom of the page */}
-    <div className="mt-3" />
-  </div>
+    <Footer />
+    <style global jsx>{`
+      html {
+        height: 100%;
+      }
+      body {
+        min-height: 100%;
+        position: relative;
+        padding-bottom: 5rem;
+      }
+    `}</style>
+  </Fragment>
 )
 
 Layout.propTypes = {

package.json

@@ -18,6 +18,7 @@
   "license": "ISC",
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.2",
+    "@fortawesome/fontawesome-free-brands": "^5.0.8",
     "@fortawesome/fontawesome-free-solid": "^5.0.4",
     "@fortawesome/react-fontawesome": "0.0.17",
     "axios": "^0.17.1",