Refactor starting to update theme.js

client/src/theme.js

@@ -1,5 +1,16 @@
 import {defineSlotRecipe, createSystem, defaultConfig, defineConfig, defineRecipe} from "@chakra-ui/react";
 
+
+// REUSABLE GLASS SURFACE
+const glassSurface = {
+  bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
+  backdropFilter: "blur(12px)",
+  WebkitBackdropFilter: "blur(12px)",
+  border: "1px solid",
+  borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
+  boxShadow: "sm",
+};
+
 // CONSOLIDATED ✔
 const headerRecipe = defineSlotRecipe({
   slots: ["root", "search_bar", "user_info"],
@@ -314,51 +325,6 @@ const widgetSettingsRecipe = defineSlotRecipe({
     }
   }
 })
-// const canvasRecipe = defineRecipe({
-//   base: {
-//     bg: "{transparent}",
-//     zIndex: "-1",
-//     color: "{text}"
-//   }
-// });
-
-// const widgetRecipe = defineSlotRecipe({
-//   slots: ["root", "header", "canvas"],
-//   base: {
-//     root: {
-//       flexDirection: "column",
-//       gap: "1",
-//       position: "relative",
-//       bg: "base100",
-//       borderRadius: "md",
-//       p: "1",
-//       paddingBottom: "2",
-//       border: "1px solid",
-//       borderColor: "{base300}",
-//       textAlign: "center",
-//       height: "100%",
-//       // position: "fixed"
-//     },
-//     header: {
-//       flexShrink: "0",
-//       bg: "{base300}",
-//       color: "{text}",
-//       cursor: "move",
-//       borderRadius: "sm",
-//       whiteSpace: "nowrap",
-//       textAlign: "left",
-//       pl: "2"
-//     },
-//     canvas: {
-//       flex: "1 1 auto",
-//       bg: "transparent",
-//       color: "{text}",
-//       cursor: "default",
-//       borderRadius: "md",
-//       overflow: "auto",
-//     }
-//   }
-// });
 
 // USED IN COMPONENTS:
 // * Settings Button
@@ -373,12 +339,7 @@ const glassPanelRecipe = defineSlotRecipe({
       flexDirection: "column",
       position: "relative",
       overflow: "hidden",
-      bg: {base: "rgba(255, 255, 255, 0.4)", _dark: "rgba(255, 255, 255, 0.04)"},
+
-      backdropFilter: "blur(12px)",
-      WebkitBackdropFilter: "blur(12px)",
-      border: "1px solid",
-      borderColor: {base: "gray.200", _dark: "whiteAlpha.200"},
-      boxShadow: "sm",
     }
   },