Added footer and blank FAQ and About pages
This commit is contained in:
parent
a9ad15eaf1
commit
9b4aa07a79
@ -6,12 +6,20 @@ import theme from "./theme.js";
|
|||||||
import Home from "./routes/Home";
|
import Home from "./routes/Home";
|
||||||
import Game from "./routes/Game";
|
import Game from "./routes/Game";
|
||||||
import Join from "./routes/Join";
|
import Join from "./routes/Join";
|
||||||
|
import About from "./routes/About";
|
||||||
|
import FAQ from "./routes/FAQ";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
<Router>
|
<Router>
|
||||||
<Switch>
|
<Switch>
|
||||||
|
<Route path="/about">
|
||||||
|
<About />
|
||||||
|
</Route>
|
||||||
|
<Route path="/faq">
|
||||||
|
<FAQ />
|
||||||
|
</Route>
|
||||||
<Route path="/join">
|
<Route path="/join">
|
||||||
<Join />
|
<Join />
|
||||||
</Route>
|
</Route>
|
||||||
|
28
src/components/Footer.js
Normal file
28
src/components/Footer.js
Normal 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
34
src/routes/About.js
Normal 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
34
src/routes/FAQ.js
Normal 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;
|
@ -1,8 +1,10 @@
|
|||||||
import React from "react";
|
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 shortid from "shortid";
|
||||||
import { useHistory } from "react-router-dom";
|
import { useHistory } from "react-router-dom";
|
||||||
|
|
||||||
|
import Footer from "../components/Footer";
|
||||||
|
|
||||||
import owlington from "../images/Owlington.png";
|
import owlington from "../images/Owlington.png";
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
@ -16,13 +18,22 @@ function Home() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container sx={{ maxWidth: "300px", height: "100%" }}>
|
<Flex
|
||||||
|
sx={{
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
minHeight: "100%",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Flex
|
<Flex
|
||||||
sx={{
|
sx={{
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
height: "100%",
|
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
|
maxWidth: "300px",
|
||||||
|
flexGrow: 1,
|
||||||
}}
|
}}
|
||||||
|
mb={2}
|
||||||
>
|
>
|
||||||
<Text variant="display" as="h1" sx={{ textAlign: "center" }}>
|
<Text variant="display" as="h1" sx={{ textAlign: "center" }}>
|
||||||
Owlbear Rodeo
|
Owlbear Rodeo
|
||||||
@ -38,7 +49,8 @@ function Home() {
|
|||||||
Alpha v0.6.6
|
Alpha v0.6.6
|
||||||
</Text>
|
</Text>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Container>
|
<Footer />
|
||||||
|
</Flex>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
import React, { useState } from "react";
|
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 { useHistory } from "react-router-dom";
|
||||||
|
|
||||||
|
import Footer from "../components/Footer";
|
||||||
|
|
||||||
function Join() {
|
function Join() {
|
||||||
let history = useHistory();
|
let history = useHistory();
|
||||||
const [gameId, setGameId] = useState("");
|
const [gameId, setGameId] = useState("");
|
||||||
@ -16,13 +18,22 @@ function Join() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container sx={{ maxWidth: "300px", height: "100%" }}>
|
<Flex
|
||||||
|
sx={{
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
minHeight: "100%",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Flex
|
<Flex
|
||||||
sx={{
|
sx={{
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
height: "100%",
|
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
|
maxWidth: "300px",
|
||||||
|
flexGrow: 1,
|
||||||
}}
|
}}
|
||||||
|
mb={2}
|
||||||
>
|
>
|
||||||
<Box as="form" onSubmit={handleSubmit}>
|
<Box as="form" onSubmit={handleSubmit}>
|
||||||
<Label htmlFor="id">Let me see your identification</Label>
|
<Label htmlFor="id">Let me see your identification</Label>
|
||||||
@ -37,7 +48,8 @@ function Join() {
|
|||||||
<Button disabled={!gameId}>Join › (ノ◕ヮ◕)ノ*:・゚✧</Button>
|
<Button disabled={!gameId}>Join › (ノ◕ヮ◕)ノ*:・゚✧</Button>
|
||||||
</Box>
|
</Box>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Container>
|
<Footer />
|
||||||
|
</Flex>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
19
src/theme.js
19
src/theme.js
@ -28,6 +28,7 @@ export default {
|
|||||||
body: 1.1,
|
body: 1.1,
|
||||||
heading: 1.25,
|
heading: 1.25,
|
||||||
},
|
},
|
||||||
|
breakpoints: ["12em", "24em", "40em", "56em", "64em"],
|
||||||
text: {
|
text: {
|
||||||
heading: {
|
heading: {
|
||||||
fontFamily: "heading",
|
fontFamily: "heading",
|
||||||
@ -88,8 +89,11 @@ export default {
|
|||||||
fontSize: 1,
|
fontSize: 1,
|
||||||
},
|
},
|
||||||
a: {
|
a: {
|
||||||
color: "primary",
|
variant: "textStyles.caption",
|
||||||
"&:hover": {
|
"&:hover": {
|
||||||
|
color: "primary",
|
||||||
|
},
|
||||||
|
"&:active": {
|
||||||
color: "secondary",
|
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%)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user