Refactor components and styles to be consistent

1 files changed, 16 insertions, 44 deletions

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index ac489f1..6b0b85a 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,52 +1,24 @@
 import * as React from "react";
-import { Link } from "gatsby";
-
-// styles
-const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
-};
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-};
-
-const paragraphStyles = {
-  marginBottom: 48,
-};
-const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
-};
+import BlockLink from "../components/BlockLink";
+import { BlockBody, BlockHeader, Content } from "../styles";
 
 // markup
 const NotFoundPage = (): React.ReactElement => {
   return (
-    <main style={pageStyles}>
-      <title>Not found</title>
-      <h1 style={headingStyles}>Page not found</h1>
-      <p style={paragraphStyles}>
-        Sorry{" "}
-        <span role="img" aria-label="Pensive emoji">
-          😔
-        </span>{" "}
-        we couldn’t find what you were looking for.
-        <br />
-        {process.env.NODE_ENV === "development" ? (
-          <>
-            <br />
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
-            <br />
-          </>
-        ) : null}
-        <br />
-        <Link to="/">Go home</Link>.
-      </p>
+    <main>
+      <Content>
+        <BlockHeader>Not found</BlockHeader>
+        <BlockBody theme={{ padding: "4px 8px" }}>
+          Sorry{" "}
+          <span role="img" aria-label="Pensive emoji">
+            😔
+          </span>{" "}
+          we couldn&apos;t find what you were looking for.
+        </BlockBody>
+        <BlockLink href="/" aria-label="Return to the front page">
+          Home
+        </BlockLink>
+      </Content>
     </main>
   );
 };