From 9b4aa07a79068dc1ae7eaf4b40a5d7f1a10f3a24 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 9 Apr 2020 18:19:07 +1000
Subject: [PATCH] Added footer and blank FAQ and About pages

---
 src/App.js               |  8 ++++++++
 src/components/Footer.js | 28 ++++++++++++++++++++++++++++
 src/routes/About.js      | 34 ++++++++++++++++++++++++++++++++++
 src/routes/FAQ.js        | 34 ++++++++++++++++++++++++++++++++++
 src/routes/Home.js       | 20 ++++++++++++++++----
 src/routes/Join.js       | 20 ++++++++++++++++----
 src/theme.js             | 19 ++++++++++++++++++-
 7 files changed, 154 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Footer.js
 create mode 100644 src/routes/About.js
 create mode 100644 src/routes/FAQ.js

diff --git a/src/App.js b/src/App.js
index a8264f2..ac1b803 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,12 +6,20 @@ import theme from "./theme.js";
 import Home from "./routes/Home";
 import Game from "./routes/Game";
 import Join from "./routes/Join";
+import About from "./routes/About";
+import FAQ from "./routes/FAQ";
 
 function App() {
   return (
     <ThemeProvider theme={theme}>
       <Router>
         <Switch>
+          <Route path="/about">
+            <About />
+          </Route>
+          <Route path="/faq">
+            <FAQ />
+          </Route>
           <Route path="/join">
             <Join />
           </Route>
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..5f9c5b7
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,28 @@
+import React from "react";
+import { Flex, Link } from "theme-ui";
+
+function Footer() {
+  return (
+    <Flex
+      bg="muted"
+      sx={{
+        height: "48px",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Link m={2} href="#/about" variant="footer">
+        About
+      </Link>
+      <Link m={2} href="#/" variant="footer">
+        Home
+      </Link>
+      <Link m={2} href="#/faq" variant="footer">
+        FAQ
+      </Link>
+    </Flex>
+  );
+}
+
+export default Footer;
diff --git a/src/routes/About.js b/src/routes/About.js
new file mode 100644
index 0000000..897e4c9
--- /dev/null
+++ b/src/routes/About.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { Flex, Text } from "theme-ui";
+
+import Footer from "../components/Footer";
+
+function About() {
+  return (
+    <Flex
+      sx={{
+        flexDirection: "column",
+        justifyContent: "space-between",
+        minHeight: "100%",
+        alignItems: "center",
+      }}
+    >
+      <Flex
+        sx={{
+          flexDirection: "column",
+          justifyContent: "center",
+          maxWidth: "300px",
+          flexGrow: 1,
+        }}
+        mb={2}
+      >
+        <Text variant="display" as="h1" sx={{ textAlign: "center" }}>
+          About
+        </Text>
+      </Flex>
+      <Footer />
+    </Flex>
+  );
+}
+
+export default About;
diff --git a/src/routes/FAQ.js b/src/routes/FAQ.js
new file mode 100644
index 0000000..e0ed503
--- /dev/null
+++ b/src/routes/FAQ.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { Flex, Text } from "theme-ui";
+
+import Footer from "../components/Footer";
+
+function FAQ() {
+  return (
+    <Flex
+      sx={{
+        flexDirection: "column",
+        justifyContent: "space-between",
+        minHeight: "100%",
+        alignItems: "center",
+      }}
+    >
+      <Flex
+        sx={{
+          flexDirection: "column",
+          justifyContent: "center",
+          maxWidth: "300px",
+          flexGrow: 1,
+        }}
+        mb={2}
+      >
+        <Text variant="display" as="h1" sx={{ textAlign: "center" }}>
+          FAQ
+        </Text>
+      </Flex>
+      <Footer />
+    </Flex>
+  );
+}
+
+export default FAQ;
diff --git a/src/routes/Home.js b/src/routes/Home.js
index e7d9773..c8eed5f 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -1,8 +1,10 @@
 import React from "react";
-import { Container, Flex, Button, Image, Text } from "theme-ui";
+import { Flex, Button, Image, Text } from "theme-ui";
 import shortid from "shortid";
 import { useHistory } from "react-router-dom";
 
+import Footer from "../components/Footer";
+
 import owlington from "../images/Owlington.png";
 
 function Home() {
@@ -16,13 +18,22 @@ function Home() {
   }
 
   return (
-    <Container sx={{ maxWidth: "300px", height: "100%" }}>
+    <Flex
+      sx={{
+        flexDirection: "column",
+        justifyContent: "space-between",
+        minHeight: "100%",
+        alignItems: "center",
+      }}
+    >
       <Flex
         sx={{
           flexDirection: "column",
-          height: "100%",
           justifyContent: "center",
+          maxWidth: "300px",
+          flexGrow: 1,
         }}
+        mb={2}
       >
         <Text variant="display" as="h1" sx={{ textAlign: "center" }}>
           Owlbear Rodeo
@@ -38,7 +49,8 @@ function Home() {
           Alpha v0.6.6
         </Text>
       </Flex>
-    </Container>
+      <Footer />
+    </Flex>
   );
 }
 
diff --git a/src/routes/Join.js b/src/routes/Join.js
index c66f91e..25f055f 100644
--- a/src/routes/Join.js
+++ b/src/routes/Join.js
@@ -1,7 +1,9 @@
 import React, { useState } from "react";
-import { Container, Box, Label, Input, Button, Flex } from "theme-ui";
+import { Box, Label, Input, Button, Flex } from "theme-ui";
 import { useHistory } from "react-router-dom";
 
+import Footer from "../components/Footer";
+
 function Join() {
   let history = useHistory();
   const [gameId, setGameId] = useState("");
@@ -16,13 +18,22 @@ function Join() {
   }
 
   return (
-    <Container sx={{ maxWidth: "300px", height: "100%" }}>
+    <Flex
+      sx={{
+        flexDirection: "column",
+        justifyContent: "space-between",
+        minHeight: "100%",
+        alignItems: "center",
+      }}
+    >
       <Flex
         sx={{
           flexDirection: "column",
-          height: "100%",
           justifyContent: "center",
+          maxWidth: "300px",
+          flexGrow: 1,
         }}
+        mb={2}
       >
         <Box as="form" onSubmit={handleSubmit}>
           <Label htmlFor="id">Let me see your identification</Label>
@@ -37,7 +48,8 @@ function Join() {
           <Button disabled={!gameId}>Join › (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧</Button>
         </Box>
       </Flex>
-    </Container>
+      <Footer />
+    </Flex>
   );
 }
 
diff --git a/src/theme.js b/src/theme.js
index ddd5b41..21662e9 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -28,6 +28,7 @@ export default {
     body: 1.1,
     heading: 1.25,
   },
+  breakpoints: ["12em", "24em", "40em", "56em", "64em"],
   text: {
     heading: {
       fontFamily: "heading",
@@ -88,8 +89,11 @@ export default {
       fontSize: 1,
     },
     a: {
-      color: "primary",
+      variant: "textStyles.caption",
       "&:hover": {
+        color: "primary",
+      },
+      "&:active": {
         color: "secondary",
       },
     },
@@ -225,4 +229,17 @@ export default {
       },
     },
   },
+  links: {
+    footer: {
+      variant: "text.caption",
+      textDecoration: "underline",
+      "&:hover": {
+        textDecorationColor: "hsl(260, 100%, 80%)",
+        cursor: "pointer",
+      },
+      "&:active": {
+        textDecorationColor: "hsl(290, 100%, 80%)",
+      },
+    },
+  },
 };