Added footer and blank FAQ and About pages

This commit is contained in:
Mitchell McCaffrey 2020-04-09 18:19:07 +10:00
parent a9ad15eaf1
commit 9b4aa07a79
7 changed files with 154 additions and 9 deletions

View File

@ -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>

28
src/components/Footer.js Normal file
View File

@ -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;

34
src/routes/About.js Normal file
View File

@ -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;

34
src/routes/FAQ.js Normal file
View File

@ -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;

View File

@ -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>
);
}

View File

@ -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>
);
}

View File

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