Refactor still working on UI changes

client/src/theme.js

@@ -3,12 +3,10 @@ import { defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineReci
 // RECIPES
 const headerRecipe = defineRecipe({
   base: {
-    bg: "{base200}",
+    bg: "{transparent}",
     color: "text",
     width: "100%",
     height: "100%",
-    borderBottom: "1px solid",
-    borderBottomColor:"{border}",
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
@@ -18,13 +16,13 @@ const headerRecipe = defineRecipe({
 
 const dashboardRecipe = defineRecipe({
   base: {
-    bg: "{base200}"
+    bg: "{testBackground}"
   }
 });
 
 const canvasRecipe = defineRecipe({
   base: {
-    bg: "{base200}",
+    bg: "{transparent}",
     zIndex: "-1",
     color: "{text}"
   }
@@ -34,22 +32,35 @@ const sidebarRecipe = defineSlotRecipe({
   slots: ["root", "close_button", "buttons", "dark_mode_button"],
   base: {
     root: {
-      bg: "{base200}",
-      borderRight: "1px solid",
-      borderColor: "{border}", 
+      // 1. Semi-transparent backgrounds
+      bg: { base: "linear-gradient(to bottom right, #BBBBBB4C, #FFFFFF4C)", _dark: "rgba(20, 20, 20, 0.4)" },
+
+      // 2. The glass blur effect
+      backdropFilter: "blur(12px)",
+      WebkitBackdropFilter: "blur(12px)", // For Safari compatibility
+
+      // 3. Subtle semi-transparent borders to catch the light
+      border: "1px solid",
+      borderColor: { base: "rgba(255, 255, 255, 0.3)", _dark: "rgba(255, 255, 255, 0.1)" },
+
+      // Your existing layout properties
+      borderRadius: "2xl",
+      boxShadow: "0 4px 30px rgba(0, 0, 0, 0.1)", // A softer shadow helps the glass pop
       width: "100%",
-      height: "100%",
+      height: "calc(100% - 16px)",
+      margin: "8px",
       display: "flex",
       flexDirection: "column",
-      justifyContent: "start", 
+      justifyContent: "start",
       alignItems: "start",
       gap: 2,
       p: 2,
+      zIndex: 10,
     },
     buttons: {
       bg: "transparent",
-      _hover: {bg: "{primaryLt}", color: "{textInverted}"},
-      "&.active": {bg: "{primary}", color: "{textInverted}"},
+      _hover: {bg: "{testButton}", color: "{textInverted}"},
+      "&.active": {bg: "{testButton}", color: "{textInverted}"},
       fontSize: "xl",
       color: {base: "{text}"},
       variant: "ghost",
@@ -179,8 +190,12 @@ const config = defineConfig({
         secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
         border: {value: {base: "#000000", _dark: "#cbcbcb84"}},
         text: {value: {base: "#000000", _dark: "lightgrey"}},
-        textInverted: {value: "white"},
+        textInverted: {value: "#000000"},
         icon: {value: {base: "#000000", _dark: "lightgrey"}},
+        testBackground: { value: {base: "linear-gradient(to bottom right, #BBBBBB, #FFFFFF)", _dark: "#191613"} },
+        testSidebar: { value: {base: "#FBFBFB", _dark: "#272421"} },
+        testButton: { value: {base: "#FFFFFF", _dark: "#C09754"} },
+
       },
     },
     tokens: {