Added footer and blank FAQ and About pages

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>

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;

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;

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;

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",
-          height: "100%",
+        justifyContent: "space-between",
-          justifyContent: "center",
+        minHeight: "100%",
+        alignItems: "center",
       }}
+    >
+      <Flex
+        sx={{
+          flexDirection: "column",
+          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>
   );
 }
 

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",
-          height: "100%",
+        justifyContent: "space-between",
-          justifyContent: "center",
+        minHeight: "100%",
+        alignItems: "center",
       }}
+    >
+      <Flex
+        sx={{
+          flexDirection: "column",
+          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>
   );
 }
 

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%)",
+      },
+    },
+  },
 };