Add themed background images for Hogwarts houses

This commit introduces specific background images for Gryffindor, Slytherin, Ravenclaw, and Hufflepuff houses. Updated the theme configuration to dynamically set these images per house and adjusted the styles to utilize the new theme token for background images.

frontend/src/styles/styles.js

@@ -421,7 +421,7 @@ export const styles = {
   bgMap: {
     position: "absolute",
     inset: 0,
-    backgroundImage: 'url("/bg/marauders-map-blur.jpg")',
+    backgroundImage: stylesTokens.bgImage,
     backgroundSize: "cover",
     backgroundPosition: "center",
     backgroundRepeat: "no-repeat",

frontend/src/styles/theme.js

@@ -30,4 +30,7 @@ export const stylesTokens = {
   rowEmptyBg: "var(--hp-rowEmptyBg)",
   rowEmptyText: "var(--hp-rowEmptyText)",
   rowEmptyBorder: "var(--hp-rowEmptyBorder)",
+
+  // Background
+  bgImage: "var(--hp-bgImage)",
 };

frontend/src/styles/themes.js

@@ -34,6 +34,9 @@ export const THEMES = {
       rowEmptyBg: "rgba(255,255,255,0.06)",
       rowEmptyText: "rgba(233,216,166,0.75)",
       rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/marauders-map-blur.jpg')",
     },
   },
 
@@ -69,6 +72,9 @@ export const THEMES = {
       rowEmptyBg: "rgba(255,255,255,0.06)",
       rowEmptyText: "rgba(255,210,170,0.75)",
       rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/gryffindor.png')",
     },
   },
 
@@ -104,6 +110,9 @@ export const THEMES = {
       rowEmptyBg: "rgba(255,255,255,0.06)",
       rowEmptyText: "rgba(175,240,210,0.75)",
       rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/slytherin.png')",
     },
   },
 
@@ -139,6 +148,9 @@ export const THEMES = {
       rowEmptyBg: "rgba(255,255,255,0.06)",
       rowEmptyText: "rgba(180,205,255,0.78)",
       rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/ravenclaw.png')",
     },
   },
 
@@ -174,6 +186,9 @@ export const THEMES = {
       rowEmptyBg: "rgba(255,255,255,0.06)",
       rowEmptyText: "rgba(255,240,180,0.78)",
       rowEmptyBorder: "rgba(0,0,0,0)",
+
+      // Background
+      bgImage: "url('/bg/hufflepuff.png')",
     },
   },
 };