New CNY decorations (#116)

eltoder · Jan 29, 2025 · 5b19ef2 · 5b19ef2
1 parent b8e56d9
commit 5b19ef2
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 7 deletions.
diff --git a/src/assets/cny_big_snake.png b/src/assets/cny_big_snake.png
diff --git a/src/assets/cny_lanterns.png b/src/assets/cny_lanterns.png
diff --git a/src/assets/cny_lion.png b/src/assets/cny_lion.png
diff --git a/src/assets/snake.png → src/assets/cny_snake.png b/src/assets/snake.png → src/assets/cny_snake.png
diff --git a/src/assets/snakes-dark.jpg b/src/assets/snakes-dark.jpg
diff --git a/src/assets/snakes-light.jpg b/src/assets/snakes-light.jpg
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -22,7 +22,7 @@ import ColorChoiceDialog from "./ColorChoiceDialog";
 import BoardLayoutDialog from "./BoardLayoutDialog";
 import KeyboardLayoutDialog from "./KeyboardLayoutDialog";
 import AccountOptionsDialog from "./AccountOptionsDialog";
-import snakeImage from "../assets/snake.png";
+import snakeImage from "../assets/cny_snake.png";
 
 function Navbar({
   themeType,

diff --git a/src/themes.js b/src/themes.js
@@ -2,8 +2,9 @@ import { createTheme } from "@material-ui/core/styles";
 import { grey } from "@material-ui/core/colors";
 import { indigo } from "@material-ui/core/colors";
 import { red } from "@material-ui/core/colors";
-import snakesLightImage from "./assets/snakes-light.jpg";
-import snakesDarkImage from "./assets/snakes-dark.jpg";
+import lanternsImage from "./assets/cny_lanterns.png";
+import lionImage from "./assets/cny_lion.png";
+import snakeImage from "./assets/cny_big_snake.png";
 
 export const darkTheme = createTheme({
   palette: {
@@ -68,9 +69,16 @@ export const darkTheme = createTheme({
     MuiCssBaseline: {
       "@global": {
         body: {
-          backgroundImage: `url("${snakesDarkImage}")`,
+          backgroundImage: `
+            url("${lanternsImage}"),
+            url("${lionImage}"),
+            url("${snakeImage}"),
+            radial-gradient(circle at top right, rgba(112,22,22,1) 0%, rgba(22,22,22,1) 80%)
+          `,
+          backgroundPosition: "top right, bottom right, bottom left, 0 0",
+          backgroundSize: "min(50%, 25em), 30%, 80%, auto",
+          backgroundRepeat: "no-repeat",
           backgroundAttachment: "fixed",
-          backgroundPosition: "130px -30px",
         },
       },
     },
@@ -127,9 +135,16 @@ export const lightTheme = createTheme({
     MuiCssBaseline: {
       "@global": {
         body: {
-          backgroundImage: `url("${snakesLightImage}")`,
+          backgroundImage: `
+            url("${lanternsImage}"),
+            url("${lionImage}"),
+            url("${snakeImage}"),
+            radial-gradient(circle at top right, rgba(250, 250, 250, 1) 0%, rgba(250, 210, 210, 1) 80%)
+          `,
+          backgroundPosition: "top right, bottom right, bottom left, 0 0",
+          backgroundSize: "min(50%, 25em), 30%, 80%, auto",
+          backgroundRepeat: "no-repeat",
           backgroundAttachment: "fixed",
-          backgroundPosition: "130px -30px",
         },
       },
     },