UI tweaks

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 (
     <Paper className={classes.sidebar}>
+      <Subheading>
+        {modes[game.mode].name}{" "}
+        <span style={{ opacity: 0.4 }}>[{capitalizeFirst(game.access)}]</span>
+      </Subheading>
+      <Divider style={{ margin: "4px 0" }} />
       {/* Timer */}
       <div className={classes.timer} style={{ marginTop: 6 }}>
         <AlarmIcon className={classes.alarm} fontSize="large" />

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({
           <InternalLink underline="none" color="inherit" to="/">
             Set with Friends
           </InternalLink>
-          <span
-            style={{
-              verticalAlign: "text-bottom",
-              fontSize: "smaller",
-              marginLeft: "-0.2em",
-            }}
-          >
-            🎄
-          </span>
+          <span className={classes.treeIcon}>🎄</span>
         </Typography>
         <Typography
           variant="subtitle1"

src/pages/RoomPage.js

@@ -23,6 +23,7 @@ import Chat from "../components/Chat";
 import firebase from "../firebase";
 import { UserContext } from "../context";
 import GameSettings from "../components/GameSettings";
+import { capitalizeFirst } from "../util";
 
 const useStyles = makeStyles((theme) => ({
   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 }) {
                   }
                 >
                   <span style={{ opacity: 0.4 }}>
-                    [{game.access === "public" ? "Public" : "Private"}]
+                    [{capitalizeFirst(game.access)}]
                   </span>
                 </Tooltip>
               </Typography>

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

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