Refactor continued of UI. changes to theme to make baselines

client/src/theme.js

@@ -179,43 +179,6 @@ const widgetRecipe = defineSlotRecipe({
   }
 });
 
-// const glassPanelRecipe = defineSlotRecipe({
-//   slots: ["root", "header", "body"],
-//   base: {
-//     root: {
-//       // Structure
-//       display: "flex",
-//       flexDirection: "column",
-//       width: "100%",
-//       height: "100%",
-//       position: "relative",
-//       overflow: "hidden",
-//       borderRadius: "3xl",
-//
-//       // Glass Aesthetics (Syncs nicely with your sidebar/tabs)
-//       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",
-//     },
-//     header: {
-//       display: "flex",
-//       justifyContent: "space-between",
-//       alignItems: "center",
-//       px: 3,
-//       py: 2,
-//     },
-//     body: {
-//       flex: "1",
-//       overflow: "hidden",
-//       position: "relative",
-//       p: 1,
-//     }
-//   }
-// });
-
 const glassPanelRecipe = defineSlotRecipe({
   slots: ["root", "header", "body"],
 
@@ -246,6 +209,20 @@ const glassPanelRecipe = defineSlotRecipe({
       dropdown: {
         root: {borderRadius: "xl", p: 1}
         // (Header and body slots are ignored here because dropdowns don't use them)
+      },
+      popover: {
+        root: {
+          borderRadius: "2xl",
+          p: 4,
+          boxShadow: "xl",
+          minW: "240px",
+          // OVERRIDES: Make the background 85-90% opaque instead of 40%
+          bg: { base: "rgba(255, 255, 255, 0.75)", _dark: "rgba(20, 22, 25, 0.8)" },
+
+          // OVERRIDES: Increase the blur just to smooth out any stubborn gridlines
+          backdropFilter: "blur(20px)",
+          WebkitBackdropFilter: "blur(20px)",
+        }
       }
     }
   },