Add holiday decorations

eltoder · Dec 6, 2024 · 1a36f65 · 1a36f65
1 parent b6540f0
commit 1a36f65
Show file tree

Hide file tree

Showing 6 changed files with 1,612 additions and 1,569 deletions.
diff --git a/src/assets/hat.png b/src/assets/hat.png
diff --git a/src/assets/snow-dark.jpg b/src/assets/snow-dark.jpg
diff --git a/src/assets/snow.jpg b/src/assets/snow.jpg
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -25,6 +25,7 @@ import UserColorDialog from "./UserColorDialog";
 import ColorChoiceDialog from "./ColorChoiceDialog";
 import KeyboardLayoutDialog from "./KeyboardLayoutDialog";
 import AccountOptionsDialog from "./AccountOptionsDialog";
+import hatImage from "../assets/hat.png";
 
 function Navbar({
   themeType,
@@ -73,9 +74,29 @@ function Navbar({
     <AppBar position="relative" color="transparent" elevation={0}>
       <Toolbar variant="dense">
         <Typography variant="h6" style={{ flexGrow: 1, whiteSpace: "nowrap" }}>
+          <img
+            style={{
+              height: "0.5em",
+              verticalAlign: "text-top",
+              marginRight: "-0.5em",
+              position: "relative",
+              zIndex: 1,
+            }}
+            alt="Santa Hat"
+            src={hatImage}
+          />
           <InternalLink underline="none" color="inherit" to="/">
             Set with Friends
           </InternalLink>
+          <span
+            style={{
+              verticalAlign: "text-bottom",
+              fontSize: "smaller",
+              marginLeft: "-0.2em",
+            }}
+          >
+            🎄
+          </span>
         </Typography>
         <Typography
           variant="subtitle1"

diff --git a/src/themes.js b/src/themes.js
@@ -1,5 +1,7 @@
 import { createTheme } from "@material-ui/core/styles";
 import { red } from "@material-ui/core/colors";
+import snowLightImage from "./assets/snow.jpg";
+import snowDarkImage from "./assets/snow-dark.jpg";
 
 export const darkTheme = createTheme({
   palette: {
@@ -51,6 +53,16 @@ export const darkTheme = createTheme({
     row: "#282828",
   },
   setFoundEntry: "rgba(130, 170, 100, 0.15)",
+  overrides: {
+    MuiCssBaseline: {
+      "@global": {
+        body: {
+          backgroundImage: `url("${snowDarkImage}")`,
+          backgroundSize: "25%",
+        },
+      },
+    },
+  },
 });
 
 export const lightTheme = createTheme({
@@ -90,4 +102,14 @@ export const lightTheme = createTheme({
     row: "#fff",
   },
   setFoundEntry: "rgba(130, 170, 100, 0.15)",
+  overrides: {
+    MuiCssBaseline: {
+      "@global": {
+        body: {
+          backgroundImage: `url("${snowLightImage}")`,
+          backgroundSize: "25%",
+        },
+      },
+    },
+  },
 });