Changed styled to be more subdued, added bear image and icons
This commit is contained in:
Mitchell McCaffrey
parent
d1b1780763
commit
980462b109
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 107 KiB |
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
content="Web site for table top game session sharing"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Owlbear Rodeo</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 28 KiB |
|
|
@ -30,7 +30,7 @@ function AddPartyMemberButton({ streamId }) {
|
|||
</Flex>
|
||||
<Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
|
||||
<Box>
|
||||
<Label p={2}>Other people can join using your ID (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧</Label>
|
||||
<Label p={2}>Other people can join using your ID › ʕ•ᴥ•ʔ</Label>
|
||||
<Box p={2} bg="hsla(230, 20%, 0%, 20%)">
|
||||
<Text>{streamId}</Text>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Flex sx={{ width: "128px", height: "32px" }} m={2}>
|
||||
<Flex
|
||||
bg={view === "social" ? "primary" : "highlight"}
|
||||
color={view === "social" ? "text" : "highlight"}
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
borderRadius: "32px 0 0 32px",
|
||||
justifyContent: "center"
|
||||
justifyContent: "center",
|
||||
borderWidth: "1px",
|
||||
borderStyle: "solid",
|
||||
borderColor: "text",
|
||||
alignItems: "center",
|
||||
transform: "translate(0.5px, 0)"
|
||||
}}
|
||||
onClick={() => onViewChange("social")}
|
||||
>
|
||||
<SocialIcon />
|
||||
</Flex>
|
||||
<Flex
|
||||
bg={view === "encounter" ? "primary" : "highlight"}
|
||||
color={view === "encounter" ? "text" : "highlight"}
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
borderRadius: "0 32px 32px 0",
|
||||
justifyContent: "center"
|
||||
justifyContent: "center",
|
||||
borderWidth: "1px",
|
||||
borderStyle: "solid",
|
||||
borderColor: "text",
|
||||
alignItems: "center",
|
||||
transform: "translate(-0.5px, 0)"
|
||||
}}
|
||||
onClick={() => onViewChange("encounter")}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ function StyledModal({ isOpen, onRequestClose, children }) {
|
|||
>
|
||||
{children}
|
||||
<Close
|
||||
m={1}
|
||||
m={0}
|
||||
sx={{ position: "absolute", top: 0, right: 0 }}
|
||||
onClick={onRequestClose}
|
||||
/>
|
||||
|
|
|
|||
BIN
src/images/Owlington.png
Normal file
BIN
src/images/Owlington.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
1
src/index.css
Normal file
1
src/index.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Bree+Serif|Pacifico&display=swap");
|
||||
|
|
@ -5,6 +5,8 @@ import Modal from "react-modal";
|
|||
|
||||
import * as serviceWorker from "./serviceWorker";
|
||||
|
||||
import "./index.css";
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
Modal.setAppElement("#root");
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}}
|
||||
>
|
||||
<Heading sx={{ textAlign: "center", fontSize: "48px" }}>
|
||||
Owlbear Rodeo
|
||||
</Heading>
|
||||
<Image src={owlington} m={2} />
|
||||
<Button m={2} onClick={handleStartGame}>
|
||||
Start Game
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ function Join() {
|
|||
}}
|
||||
>
|
||||
<Box as="form" onSubmit={handleSubmit}>
|
||||
<Label htmlFor="id">Shove an ID in me</Label>
|
||||
<Label htmlFor="id">Let me see your identification</Label>
|
||||
<Input
|
||||
my={4}
|
||||
id="id"
|
||||
|
|
@ -34,7 +34,7 @@ function Join() {
|
|||
value={gameId || ""}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<Button>Go ʕ•ᴥ•ʔ</Button>
|
||||
<Button>Join › (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧</Button>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Container>
|
||||
|
|
|
|||
64
src/theme.js
64
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user