From 2b0300b0756d3be6fd3d6eea17a0e19624a520d1 Mon Sep 17 00:00:00 2001
From: Christopher Hight <chight@usgs.gov>
Date: Tue, 4 Aug 2026 09:05:30 -0700
Subject: [PATCH] Refactor continued of UI. changes to theme to make baselines

---
 .../components/dashboard/SettingsButton.jsx   | 100 ++++++++++++------
 client/src/pages/home/tabs/MyDashboard.jsx    |   5 +-
 client/src/theme.js                           |  51 +++------
 3 files changed, 83 insertions(+), 73 deletions(-)

diff --git a/client/src/components/dashboard/SettingsButton.jsx b/client/src/components/dashboard/SettingsButton.jsx
index 2782712..c14ab21 100644
--- a/client/src/components/dashboard/SettingsButton.jsx
+++ b/client/src/components/dashboard/SettingsButton.jsx
@@ -60,50 +60,82 @@ export function SettingsButton() {
 
   return (
     <>
-      {/* THE STATIC DROPDOWN MENU */}
-      <Menu.Root positioning={{getAnchorRect}}>
-        <Menu.Trigger asChild>
+      {isEditing ? (
+        // 📝 EDIT MODE: The 3-Pill Layout
+        <HStack gap={2}>
+          {/* 1. The Add Widget Button */}
           <Box
-            ref={menuRef}
             as="button"
             css={tabStyles}
+            data-state="open"
+            onClick={() => setIsLibraryOpen(true)}
+            color={{ base: "blue.500", _dark: "blue.300" }}
+            _hover={{ bg: "rgba(66, 153, 225, 0.1)" }}
           >
-            {/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
-            <Settings size={24} style={{flexShrink: 0}}/>
-
-            {/* Dynamic text based on editing state! */}
-            <Box as="span">
-              {isEditing ? "Editing Layout..." : "Dashboard Settings"}
-            </Box>
+            <LayoutGrid size={20} style={{ flexShrink: 0 }} />
+            <Box as="span">Widget Library</Box>
           </Box>
-        </Menu.Trigger>
 
-        <Menu.Positioner>
-          <Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
-            {isEditing ? (
-              <>
-                <Menu.Item onClick={saveEdit} color="green.600" cursor="pointer" _hover={{WebkitTextStroke: "0.5px currentColor"}}>
-                  <Save size={16} style={{marginRight: '8px'}}/> Save Layout
-                </Menu.Item>
+          {/* 2. The Save Button */}
+          <Box
+            as="button"
+            css={tabStyles}
+            data-state="open"
+            onClick={saveEdit}
+            color={{ base: "green.600", _dark: "green.400" }}
+            _hover={{ bg: "rgba(72, 187, 120, 0.1)" }}
+          >
+            <Save size={20} style={{ flexShrink: 0 }} />
+            <Box as="span">Save Layout</Box>
+          </Box>
 
-                <Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{WebkitTextStroke: "0.5px currentColor"}}>
-                  <X size={16} style={{marginRight: '8px'}}/> Discard Changes
-                </Menu.Item>
-              </>
-            ) : (
-              <Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{WebkitTextStroke: "0.5px currentColor"}}>
-                <Move size={16} style={{marginRight: '8px'}}/> Edit Layout
+          {/* 3. The Discard Button */}
+          <Box
+            as="button"
+            css={tabStyles}
+            data-state="open"
+            onClick={cancelEdit}
+            color={{ base: "red.500", _dark: "red.400" }}
+            _hover={{ bg: "rgba(245, 101, 101, 0.1)" }}
+          >
+            <X size={20} style={{ flexShrink: 0 }} />
+            <Box as="span">Discard</Box>
+          </Box>
+        </HStack>
+      ) : (
+        // 👀 VIEW MODE: The Static Dropdown Menu
+        <Menu.Root positioning={{ getAnchorRect }}>
+          <Menu.Trigger asChild>
+            <Box ref={menuRef} as="button" css={tabStyles}>
+              {/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
+              <Settings size={24} style={{ flexShrink: 0 }} />
+              <Box as="span">Dashboard Settings</Box>
+            </Box>
+          </Menu.Trigger>
+
+          <Menu.Positioner>
+            <Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
+              <Menu.Item
+                onClick={enterEditMode}
+                cursor="pointer"
+                _hover={{ WebkitTextStroke: "0.5px currentColor" }}
+              >
+                <Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
               </Menu.Item>
-            )}
 
-            <Menu.Separator my={1} borderColor="glassSeperator"/>
+              <Menu.Separator my={1} borderColor="glassSeperator" />
 
-            <Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{WebkitTextStroke: "0.5px currentColor"}}>
-              <LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
-            </Menu.Item>
-          </Menu.Content>
-        </Menu.Positioner>
-      </Menu.Root>
+              <Menu.Item
+                onClick={() => setIsLibraryOpen(true)}
+                cursor="pointer"
+                _hover={{ WebkitTextStroke: "0.5px currentColor" }}
+              >
+                <LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
+              </Menu.Item>
+            </Menu.Content>
+          </Menu.Positioner>
+        </Menu.Root>
+      )}
 
       {/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
       <Dialog.Root
diff --git a/client/src/pages/home/tabs/MyDashboard.jsx b/client/src/pages/home/tabs/MyDashboard.jsx
index fb98af2..1e3dbad 100644
--- a/client/src/pages/home/tabs/MyDashboard.jsx
+++ b/client/src/pages/home/tabs/MyDashboard.jsx
@@ -36,6 +36,7 @@ export default function MyDashboard() {
   // 1. Pull the new global slot recipe
   const recipe = useSlotRecipe({key: "glassPanel"});
   const styles = recipe({ layout: "widget" });
+  const popoverStyles = recipe({ layout: "popover" });
 
   useEffect(() => {
     if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
@@ -96,7 +97,7 @@ export default function MyDashboard() {
 
                 {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
                 <Popover.Positioner zIndex={10}>
-                  <Popover.Content bg="gray.50" p={4} boxShadow="xl" borderRadius="md">
+                  <Popover.Content css={popoverStyles.root}>
                     <Suspense fallback={<Spinner size="sm"/>}>
                       <SettingsUI
                         widgetId={widget.id}
@@ -149,7 +150,7 @@ export default function MyDashboard() {
             boxShadow={isEditing ? "outline" : styles.root.boxShadow}
             borderStyle={isEditing ? "dashed" : "solid"}
             borderWidth={isEditing ? "2px" : "1px"}
-            borderColor={isEditing ? "gray.400" : styles.root.borderColor}
+            borderColor={isEditing ? "orange.300" : styles.root.borderColor}
             cursor={isEditing ? "grab" : "default"}
             position="relative" // 3. REQUIRED so the absolute button stays inside this box
           >
diff --git a/client/src/theme.js b/client/src/theme.js
index 6140c0d..4001470 100644
--- a/client/src/theme.js
+++ b/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)",
+        }
       }
     }
   },