From bd73926fc1774a71e981d677fa34cfbba3cce414 Mon Sep 17 00:00:00 2001
From: Eric Jinks <ericjinks@gmail.com>
Date: Tue, 23 Jan 2018 13:33:21 +1000
Subject: [PATCH] Fix <NoMatch /> style, add <Footer />

---
 src/App.js                |  6 ++++--
 src/components/Footer.css | 14 ++++++++++++++
 src/components/Footer.js  | 13 +++++++++++++
 src/views/NoMatch.css     |  1 +
 src/views/NoMatch.js      | 11 +++++++++--
 5 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Footer.css
 create mode 100644 src/components/Footer.js

diff --git a/src/App.js b/src/App.js
index 722898f..ac6e8ba 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,7 @@ import About from './views/About'
 import Contact from './views/Contact'
 import NoMatch from './views/NoMatch'
 import Nav from './components/Nav'
+import Footer from './components/Footer'
 import GithubCorner from './components/GithubCorner'
 import ServiceWorkerNotifications from './components/ServiceWorkerNotifications'
 import data from './data.json'
@@ -33,7 +34,7 @@ class App extends Component {
     } = this.getDocument('settings', 'global')
     return (
       <Router>
-        <div>
+        <div className='React-Wrap'>
           <ScrollToTop />
           <ServiceWorkerNotifications reloadOnUpdate />
           <GithubCorner url='https://github.com/Jinksi/netlify-cms-react-starter' />
@@ -80,8 +81,9 @@ class App extends Component {
                 />
               )}
             />
-            <Route component={NoMatch} />
+            <Route render={() => <NoMatch siteUrl={siteUrl} />} />
           </Switch>
+          <Footer />
         </div>
       </Router>
     )
diff --git a/src/components/Footer.css b/src/components/Footer.css
new file mode 100644
index 0000000..2e70747
--- /dev/null
+++ b/src/components/Footer.css
@@ -0,0 +1,14 @@
+.Footer {
+  background: var(--primary);
+  color: white;
+}
+
+.Footer--Lower {
+  background: var(--primaryDark);
+  padding: 1rem 0;
+  font-weight: 100;
+}
+
+.Footer--Lower a {
+  color: inherit;
+}
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..e2f530a
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import './Footer.css'
+
+export default ({ globalSettings, socialSettings, navLinks }) => (
+  <footer className='Footer'>
+    <div className='Footer--Lower'>
+      <div className='Container taCenter'>
+        <span>© 2017 All rights reserved.</span>
+      </div>
+    </div>
+  </footer>
+)
diff --git a/src/views/NoMatch.css b/src/views/NoMatch.css
index 717edb6..b328bd2 100644
--- a/src/views/NoMatch.css
+++ b/src/views/NoMatch.css
@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  min-height: 100vh;
 }
diff --git a/src/views/NoMatch.js b/src/views/NoMatch.js
index 80cb11c..5e1e032 100644
--- a/src/views/NoMatch.js
+++ b/src/views/NoMatch.js
@@ -1,10 +1,11 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 
 import './NoMatch.css'
 
-export default ({ siteUrl }) => (
-  <div className='Page'>
+const NoMatch = ({ siteUrl }) => (
+  <div className='NoMatch'>
     <section className='Section thick'>
       <div className='Container taCenter'>
         <h1>404 - Page Not Found</h1>
@@ -22,3 +23,9 @@ export default ({ siteUrl }) => (
     </Helmet>
   </div>
 )
+
+NoMatch.propTypes = {
+  siteUrl: PropTypes.string.isRequired
+}
+
+export default NoMatch