Fix 404 page styling (#322)

gatsbyjs · Mar 2, 2020 · e811f49 · e811f49
1 parent b720d95
commit e811f49
Showing 1 changed file with 25 additions and 27 deletions.
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -2,33 +2,31 @@ import React from 'react';
 import { Heading, Text, TextContainer } from '../components/shared/Typography';
 
 const NotFoundPage = () => (
-  <TextContainer>
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      }}
-    >
-      <Heading>Whoops - That Page Doesn’t Exist (404)</Heading>
-      <Text>
-        Looks like the page you requested either doesn’t exist or has been
-        moved. If you think this is an error or ended up at this page by
-        following a link, please{' '}
-        <a href="https://github.com/gatsbyjs/gatsby/issues/new">
-          open an issue
-        </a>{' '}
-        to let us know.
-      </Text>
-      <Text>
-        {' '}
-        <a href="https://store.gatsbyjs.org/">Gatsby Store Home page</a>{' '}
-        <a href="https://www.gatsbyjs.org/">Gatsby Home</a>{' '}
-        <a href="https://github.com/gatsbyjs/store.gatsbyjs.org">
-          Gatsby Github Page
-        </a>{' '}
-      </Text>
-    </div>
+  <TextContainer
+    style={{
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }}
+  >
+    <Heading>Whoops - That Page Doesn’t Exist (404)</Heading>
+    <Text>
+      Looks like the page you requested either doesn’t exist or has been moved.
+      If you think this is an error or ended up at this page by following a
+      link, please{' '}
+      <a href="https://github.com/gatsbyjs/gatsby/issues/new">open an issue</a>{' '}
+      to let us know.
+    </Text>
+    <Text>
+      {' '}
+      <a href="https://store.gatsbyjs.org/">Gatsby Store Home page</a>{' '}
+      <a href="https://www.gatsbyjs.org/">Gatsby Home</a>{' '}
+      <a href="https://github.com/gatsbyjs/store.gatsbyjs.org">
+        Gatsby Github Page
+      </a>{' '}
+    </Text>
   </TextContainer>
 );