From 9b1ddf6dcce00eeb164dd1b7a08a19809f5f0836 Mon Sep 17 00:00:00 2001
From: Christopher Hight <chight@usgs.gov>
Date: Thu, 20 Aug 2026 12:51:58 -0700
Subject: [PATCH] Refactor widget library UI code

---
 .../components/dashboard/SettingsButton.jsx   | 167 ++++++++++--------
 client/src/theme.js                           |   4 +-
 2 files changed, 94 insertions(+), 77 deletions(-)

diff --git a/client/src/components/dashboard/SettingsButton.jsx b/client/src/components/dashboard/SettingsButton.jsx
index c14ab21..6139ca0 100644
--- a/client/src/components/dashboard/SettingsButton.jsx
+++ b/client/src/components/dashboard/SettingsButton.jsx
@@ -28,9 +28,10 @@ export function SettingsButton() {
   const recipe = useRecipe({key: "glassTab"});
   const tabStyles = recipe();
 
-  // Pull the glass container styles for the dropdown
+  // Pull the glass container styles for the dropdown and modal
   const panelRecipe = useSlotRecipe({key: "glassPanel"});
   const panelStyles = panelRecipe({layout: "dropdown"});
+  const modalStyles = panelRecipe({layout: "popover"});
 
   const [isLibraryOpen, setIsLibraryOpen] = useState(false);
 
@@ -123,88 +124,104 @@ export function SettingsButton() {
                 <Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
               </Menu.Item>
 
-              <Menu.Separator my={1} borderColor="glassSeperator" />
+                    <Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
 
-              <Menu.Item
-                onClick={() => setIsLibraryOpen(true)}
-                cursor="pointer"
-                _hover={{ WebkitTextStroke: "0.5px currentColor" }}
+                    <Menu.Item
+                      onClick={() => setIsLibraryOpen(true)}
+                      cursor="pointer"
+                      _hover={{
+                        bg: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.1)"},
+                        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
+                open={isLibraryOpen}
+                onOpenChange={(e) => setIsLibraryOpen(e.open)}
+                size="xl"
+                placement="center"
+                closeOnInteractOutside={true}
+                closeOnEscapeKeyDown={true}
               >
-                <LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
-              </Menu.Item>
-            </Menu.Content>
-          </Menu.Positioner>
-        </Menu.Root>
-      )}
+                {/* Soft blur can be added to the background behind the modal */}
+                {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
+                <Dialog.Positioner>
 
-      {/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
-      <Dialog.Root
-        open={isLibraryOpen}
-        onOpenChange={(e) => setIsLibraryOpen(e.open)}
-        size="xl"
-        placement="center"
-        closeOnInteractOutside={true}
-        closeOnEscapeKeyDown={true}
-      >
-        <Dialog.Backdrop bg="blackAlpha.600"/>
-        <Dialog.Positioner>
-          <Dialog.Content bg="gray.50" borderRadius="xl" overflow="hidden" boxShadow="xl" maxW="800px">
-            <Dialog.Header bg="gray.800" color="white" py={4}>
-              <Dialog.Title fontSize="xl" fontWeight="bold">Add Dashboard Widgets</Dialog.Title>
-            </Dialog.Header>
+                  <Dialog.Content css={modalStyles.root} overflow="hidden" maxW="800px" minH="800px" p={0}>
 
-            <Dialog.Body p={0}>
-              <Tabs.Root defaultValue={categories[0]} variant="enclosed" colorScheme="blue">
-                <Tabs.List bg="white" px={4} pt={4} borderBottom="1px solid" borderColor="gray.200">
-                  {categories.map(cat => (
-                    <Tabs.Trigger key={cat} value={cat} pb={2}>{cat}</Tabs.Trigger>
-                  ))}
-                </Tabs.List>
+                    <Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
+                                    borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
+                      <Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
+                    </Dialog.Header>
 
-                {categories.map(cat => (
-                  <Tabs.Content key={cat} value={cat} p={6}>
-                    <Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
-                      {categorizedWidgets[cat].map(widget => (
-                        <Flex key={widget.id} direction="column" bg="white" p={4} borderRadius="md" border="1px solid"
-                              borderColor="gray.200" boxShadow="sm">
-                          <Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
-                          <Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
+                    <Dialog.Body p={0}>
+                      <Tabs.Root defaultValue={categories[0]} variant="enclosed" colorScheme="blue">
+                        <Tabs.List bg="transparent" px={4} pt={4}
+                                   borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
+                          {categories.map(cat => (
+                            <Tabs.Trigger key={cat} value={cat} pb={2}
+                                          _selected={{color: "blue.500", borderColor: "blue.500"}}>{cat}</Tabs.Trigger>
+                          ))}
+                        </Tabs.List>
 
-                          <Box borderTop="1px solid" borderColor="gray.100" pt={3}>
-                            <Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase" mb={2}>Add
-                              to Grid:</Text>
-                            <HStack gap={2} flexWrap="wrap">
-                              {Object.keys(widget.allowedSizes).map(sizeKey => (
-                                <Badge
-                                  key={sizeKey}
-                                  as="button"
-                                  onClick={() => handleAddWidget(widget.id, sizeKey)}
-                                  colorScheme="gray"
-                                  variant="subtle"
-                                  px={3}
-                                  py={1}
-                                  borderRadius="full"
-                                  cursor="pointer"
-                                  _hover={{bg: "blue.50", color: "blue.600", transform: "scale(1.05)"}}
-                                  transition="all 0.2s"
+                        {categories.map(cat => (
+                          <Tabs.Content key={cat} value={cat} p={6}>
+                            <Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
+                              {categorizedWidgets[cat].map(widget => (
+                                <Flex
+                                  key={widget.id}
+                                  direction="column"
+                                  bg={{base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.2)"}}
+                                  p={4}
+                                  borderRadius="xl"
+                                  border="1px solid"
+                                  borderColor={{base: "rgba(255, 255, 255, 0.9)", _dark: "whiteAlpha.200"}}
+                                  boxShadow="sm"
                                 >
-                                  <Plus size={12} style={{display: 'inline', marginRight: '4px'}}/>
-                                  {sizeKey.charAt(0).toUpperCase() + sizeKey.slice(1)}
-                                </Badge>
+                                  <Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
+                                  <Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
+
+                                  <Box borderTop="1px solid" borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}
+                                       pt={3}>
+                                    <Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase"
+                                          mb={2}>
+                                      Add to Grid:
+                                    </Text>
+                                    <HStack gap={2} flexWrap="wrap">
+                                      {Object.keys(widget.allowedSizes).map(sizeKey => (
+                                        <Box
+                                          key={sizeKey}
+                                          as="button"
+                                          css={tabStyles}
+                                          onClick={() => handleAddWidget(widget.id, sizeKey)}
+                                          color={{base: "blue.600", _dark: "blue.300"}}
+                                        >
+                                          <Plus size={16} style={{flexShrink: 0}}/>
+                                          <Box as="span">{sizeKey.charAt(0).toUpperCase() + sizeKey.slice(1)}</Box>
+                                        </Box>
+                                      ))}
+                                    </HStack>
+                                  </Box>
+                                </Flex>
                               ))}
-                            </HStack>
-                          </Box>
-                        </Flex>
-                      ))}
-                    </Grid>
-                  </Tabs.Content>
-                ))}
-              </Tabs.Root>
-            </Dialog.Body>
-            <Dialog.CloseTrigger position="absolute" top={3} right={3} color="white"/>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Dialog.Root>
+                            </Grid>
+                          </Tabs.Content>
+                        ))}
+                      </Tabs.Root>
+                    </Dialog.Body>
+                    <Dialog.CloseTrigger position="absolute" top={3} right={3}
+                                         color={{base: "gray.500", _dark: "whiteAlpha.800"}}
+                                         _hover={{color: "red.400"}}/>
+                  </Dialog.Content>
+                </Dialog.Positioner>
+              </Dialog.Root>
     </>
   );
 }
\ No newline at end of file
diff --git a/client/src/theme.js b/client/src/theme.js
index 4001470..d59c24f 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -220,8 +220,8 @@ const glassPanelRecipe = defineSlotRecipe({
           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)",
+          backdropFilter: "blur(15px)",
+          WebkitBackdropFilter: "blur(15px)",
         }
       }
     }