Refactor templates

src/components/Container.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+const Container = styled.div`
+  max-width: 800px;
+  margin: 0 auto;
+`
+
+export default Container

src/components/LoginControls.js

@@ -3,9 +3,11 @@ import Button from './Button'
 import { Button as MaterialButton } from '@material-ui/core'
 import { signOut, getCachedUserDetails } from '../services/moocfi'
 import { navigate } from 'gatsby'
-import LoginStateContext from '../contexes/LoginStateContext'
+import LoginStateContext, {
+  withLoginStateContext,
+} from '../contexes/LoginStateContext'
 
-export default class LoginControls extends React.Component {
+class LoginControls extends React.Component {
   static contextType = LoginStateContext
 
   doSignOut = e => {
@@ -43,3 +45,5 @@ export default class LoginControls extends React.Component {
     )
   }
 }
+
+export default withLoginStateContext(LoginControls)

src/contexes/LoginStateContext.js

@@ -26,4 +26,12 @@ export class LoginStateContextProvider extends React.Component {
   }
 }
 
+export function withLoginStateContext(Component) {
+  return props => (
+    <LoginStateContextProvider>
+      <Component {...props} />
+    </LoginStateContextProvider>
+  )
+}
+
 export default LoginStateContext

src/pages/404.js

@@ -1,11 +1,15 @@
 import React from 'react'
-import Layout from '../templates/layout'
+import Layout from '../templates/Layout'
+import Container from '../components/Container'
+import { withLoginStateContext } from '../contexes/LoginStateContext'
 
 const NotFoundPage = () => (
   <Layout>
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <Container>
+      <h1>Ei löytynyt</h1>
+      <p>Olet päätynyt osoitteeseen, jota ei ole olemassa.</p>
+    </Container>
   </Layout>
 )
 
-export default NotFoundPage
+export default withLoginStateContext(NotFoundPage)