Refactor dashboard to use new theme.js

client/src/pages/home/tabs/MyDashboard.jsx

@@ -29,13 +29,14 @@ export default function MyDashboard() {
   const hasHydrated = useRef(false);
 
   // 1. Pull the global slot recipes
-  const glassPanelRecipe = useSlotRecipe({key: "glassPanel"});
-  const glassPanelStyles = glassPanelRecipe();
-  const widgetStyles = glassPanelRecipe({ layout: "widget" });
-  const widgetSettingsRecipe = useSlotRecipe({ key: "widgetSettings" });
-  const widgetSettingsStyles = widgetSettingsRecipe();
+  const widgetRecipe = useSlotRecipe({ key: "widget" });
+  const popoverRecipe = useSlotRecipe({ key: "glassPopover" });
 
-  // 2. Populate widgets
+  // 2. Pass the editing state directly into the widget recipe!
+  const widgetStyles = widgetRecipe({ mode: isEditing ? "editing" : undefined });
+  const popoverStyles = popoverRecipe();
+
+  // 3. Populate widgets
   useEffect(() => {
     if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
       const savedLayout = user.preferences.dashboard_layout;
@@ -57,7 +58,7 @@ export default function MyDashboard() {
     isResizable: false // The magic lock! No resizing allowed globally.
   }));
 
-  // 3. The component mapper
+  // 4. The component mapper
   const renderWidget = (widget) => {
     const registryEntry = WIDGET_REGISTRY[widget.type];
 
@@ -84,8 +85,8 @@ export default function MyDashboard() {
                 </Popover.Trigger>
 
                 {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
-                <Popover.Positioner z-index="1">
-                 <Popover.Content css={[widgetSettingsStyles.root, glassPanelStyles.root]}>  {/*className={`${glassPanelStyles.root} ${widgetSettingsStyles.root}`}>*/}
+                <Popover.Positioner zIndex={1}>
+                  <Popover.Content css={popoverStyles.content}>
                     <Suspense fallback={<Spinner size="sm"/>}>
                       <SettingsUI
                         widgetId={widget.id}
@@ -132,12 +133,6 @@ export default function MyDashboard() {
           <Box
             key={widget.id}
             css={widgetStyles.root}
-            // Grid-specific state overrides remain inline
-            boxShadow={isEditing ? "outline" : widgetStyles.root.boxShadow}
-            borderStyle={isEditing ? "dashed" : "solid"}
-            borderWidth={isEditing ? "2px" : "1px"}
-            borderColor={isEditing ? "orange.300" : widgetStyles.root.borderColor}
-            cursor={isEditing ? "grab" : "default"}
             position="relative" // REQUIRED so the absolute button stays inside this box
           >
             {/* THE DELETE BUTTON */}