Fix <NoMatch /> style, add <Footer />

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>
     )

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;
+}

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>
+)

src/views/NoMatch.css

@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  min-height: 100vh;
 }

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 }) => (
+const NoMatch = ({ siteUrl }) => (
-  <div className='Page'>
+  <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