diff --git a/public/favicon.ico b/public/favicon.ico
index bcd5dfd..03497d7 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index aa069f2..7a3fd88 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
- React App
+ Owlbear Rodeo
diff --git a/public/logo192.png b/public/logo192.png
index fc44b0a..713fcd2 100644
Binary files a/public/logo192.png and b/public/logo192.png differ
diff --git a/public/logo512.png b/public/logo512.png
index a4e47a6..068f114 100644
Binary files a/public/logo512.png and b/public/logo512.png differ
diff --git a/src/components/AddPartyMemberButton.js b/src/components/AddPartyMemberButton.js
index b4920b4..a3584c7 100644
--- a/src/components/AddPartyMemberButton.js
+++ b/src/components/AddPartyMemberButton.js
@@ -30,7 +30,7 @@ function AddPartyMemberButton({ streamId }) {
-
+
{streamId}
diff --git a/src/components/GameViewSwitch.js b/src/components/GameViewSwitch.js
index becbf7a..5837935 100644
--- a/src/components/GameViewSwitch.js
+++ b/src/components/GameViewSwitch.js
@@ -1,7 +1,5 @@
import React from "react";
-import { Flex, IconButton, Box } from "theme-ui";
-
-import AddPartyMemberButton from "./AddPartyMemberButton";
+import { Flex, IconButton } from "theme-ui";
function SocialIcon() {
return (
@@ -70,22 +68,32 @@ function GameViewSwitch({ view, onViewChange }) {
return (
onViewChange("social")}
>
onViewChange("encounter")}
>
diff --git a/src/components/Modal.js b/src/components/Modal.js
index a86bd2e..66ee3c2 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -24,7 +24,7 @@ function StyledModal({ isOpen, onRequestClose, children }) {
>
{children}
diff --git a/src/images/Owlington.png b/src/images/Owlington.png
new file mode 100644
index 0000000..191ac5f
Binary files /dev/null and b/src/images/Owlington.png differ
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..365684a
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css?family=Bree+Serif|Pacifico&display=swap");
diff --git a/src/index.js b/src/index.js
index 63e6260..2cf4590 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,8 @@ import Modal from "react-modal";
import * as serviceWorker from "./serviceWorker";
+import "./index.css";
+
ReactDOM.render(, document.getElementById("root"));
Modal.setAppElement("#root");
diff --git a/src/routes/Game.js b/src/routes/Game.js
index 6719f1c..209cfca 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -15,7 +15,6 @@ import useSession from "../helpers/useSession";
import Party from "../components/Party";
import Tokens from "../components/Tokens";
import Map from "../components/Map";
-import GameViewSwitch from "../components/GameViewSwitch";
function Game() {
const { gameId } = useContext(GameContext);
diff --git a/src/routes/Home.js b/src/routes/Home.js
index ac9500a..5f86cd8 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -1,9 +1,11 @@
import React, { useContext } from "react";
import { navigate } from "hookrouter";
-import { Container, Flex, Button } from "theme-ui";
+import { Container, Flex, Button, Image, Heading } from "theme-ui";
import GameContext from "../contexts/GameContext";
+import owlington from "../images/Owlington.png";
+
function Home() {
const { setGameId } = useContext(GameContext);
@@ -25,6 +27,10 @@ function Home() {
justifyContent: "center"
}}
>
+
+ Owlbear Rodeo
+
+
diff --git a/src/routes/Join.js b/src/routes/Join.js
index 70acd8f..69757d9 100644
--- a/src/routes/Join.js
+++ b/src/routes/Join.js
@@ -26,7 +26,7 @@ function Join() {
}}
>
-
+
-
+
diff --git a/src/theme.js b/src/theme.js
index 7f8c507..0e74547 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -10,15 +10,14 @@ export default {
gray: "hsl(210, 50%, 60%)"
},
fonts: {
- body:
- 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
- heading: "inherit",
+ body: "'Bree Serif', serif",
+ heading: "'Pacifico', cursive",
monospace: "Menlo, monospace"
},
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
fontWeights: {
body: 400,
- heading: 700,
+ heading: 400,
display: 900
},
lineHeights: {
@@ -150,7 +149,62 @@ export default {
},
forms: {
label: {
- fontWeight: 700
+ fontWeight: 400
+ },
+ input: {
+ "&:focus": {
+ outlineColor: "primary"
+ }
+ }
+ },
+ buttons: {
+ primary: {
+ color: "text",
+ bg: "transparent",
+ borderStyle: "solid",
+ borderWidth: "1px",
+ borderColor: "text",
+ "&:hover": {
+ borderColor: "highlight",
+ cursor: "pointer"
+ },
+ fontFamily: "body",
+ "&:focus": {
+ outline: "none"
+ },
+ "&:active": {
+ borderColor: "primary"
+ }
+ },
+ secondary: {
+ color: "secondary",
+ bg: "transparent",
+ borderStyle: "solid",
+ borderWidth: "1px",
+ borderColor: "text",
+ fontFamily: "body"
+ },
+ icon: {
+ "&:hover": {
+ cursor: "pointer"
+ },
+ "&:focus": {
+ outline: "none"
+ },
+ "&:active": {
+ color: "primary"
+ }
+ },
+ close: {
+ "&:hover": {
+ cursor: "pointer"
+ },
+ "&:focus": {
+ outline: "none"
+ },
+ "&:active": {
+ color: "primary"
+ }
}
}
};