diff --git a/src/assets/snow-dark.jpg b/src/assets/snow-dark.jpg index d2b3657..88a232e 100755 Binary files a/src/assets/snow-dark.jpg and b/src/assets/snow-dark.jpg differ diff --git a/src/assets/snow.jpg b/src/assets/snow.jpg index b84df69..dc53d2c 100755 Binary files a/src/assets/snow.jpg and b/src/assets/snow.jpg differ diff --git a/src/components/GameSidebar.js b/src/components/GameSidebar.js index 08173b8..b1e7fa7 100644 --- a/src/components/GameSidebar.js +++ b/src/components/GameSidebar.js @@ -15,7 +15,7 @@ import { useLocation, Link as RouterLink } from "react-router-dom"; import User from "./User"; import Subheading from "./Subheading"; import useMoment from "../hooks/useMoment"; -import { formatTime } from "../util"; +import { formatTime, modes, capitalizeFirst } from "../util"; const useStyles = makeStyles((theme) => ({ sidebar: { @@ -50,6 +50,11 @@ function GameSidebar({ game, scores, leaderboard, endedAt }) { return ( + + {modes[game.mode].name}{" "} + [{capitalizeFirst(game.access)}] + + {/* Timer */}
diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 0802328..f9db417 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -14,6 +14,7 @@ import Brightness4Icon from "@material-ui/icons/Brightness4"; import Brightness7Icon from "@material-ui/icons/Brightness7"; import VolumeOffIcon from "@material-ui/icons/VolumeOff"; import VolumeUpIcon from "@material-ui/icons/VolumeUp"; +import { makeStyles } from "@material-ui/core/styles"; import firebase from "../firebase"; import { UserContext, SettingsContext } from "../context"; @@ -27,6 +28,16 @@ import KeyboardLayoutDialog from "./KeyboardLayoutDialog"; import AccountOptionsDialog from "./AccountOptionsDialog"; import hatImage from "../assets/hat.png"; +const useStyles = makeStyles((theme) => ({ + treeIcon: { + verticalAlign: "top", + fontSize: "0.9em", + [theme.breakpoints.up("md")]: { + marginLeft: "-0.2em", + }, + }, +})); + function Navbar({ themeType, handleChangeTheme, @@ -35,6 +46,7 @@ function Navbar({ }) { const user = useContext(UserContext); const settings = useContext(SettingsContext); + const classes = useStyles(); const [anchorEl, setAnchorEl] = useState(null); const [changeName, setChangeName] = useState(false); const [changeUserColor, setChangeUserColor] = useState(false); @@ -88,15 +100,7 @@ function Navbar({ Set with Friends - - 🎄 - + 🎄 ({ subpanel: { @@ -44,11 +45,6 @@ const useStyles = makeStyles((theme) => ({ height: 400, padding: 8, }, - modeSelection: { - display: "flex", - flexDirection: "row", - justifyContent: "space-around", - }, })); function RoomPage({ match, location }) { @@ -151,7 +147,7 @@ function RoomPage({ match, location }) { } > - [{game.access === "public" ? "Public" : "Private"}] + [{capitalizeFirst(game.access)}] diff --git a/src/themes.js b/src/themes.js index e21d65c..773d8df 100644 --- a/src/themes.js +++ b/src/themes.js @@ -58,7 +58,6 @@ export const darkTheme = createTheme({ "@global": { body: { backgroundImage: `url("${snowDarkImage}")`, - backgroundSize: "25%", }, }, }, @@ -107,7 +106,6 @@ export const lightTheme = createTheme({ "@global": { body: { backgroundImage: `url("${snowLightImage}")`, - backgroundSize: "25%", }, }, }, diff --git a/src/util.js b/src/util.js index 0b82bad..7473ba6 100644 --- a/src/util.js +++ b/src/util.js @@ -370,3 +370,7 @@ export function hasHint(game) { export function censorText(text) { return censor.applyTo(text, badWords.getAllMatches(text)); } + +export function capitalizeFirst(text) { + return text.charAt(0).toUpperCase() + text.slice(1); +}