Refactor recipe adjustment

client/src/components/dashboard/SettingsButton.jsx

@@ -10,7 +10,8 @@ import {
   Badge,
   Menu,
   HStack,
-  useRecipe, useSlotRecipe
+  useRecipe,
+  useSlotRecipe
 } from "@chakra-ui/react";
 import {Settings, Plus, LayoutGrid, Move, Save, X} from 'lucide-react';
 import {useDashboardStore} from "../../store/useDashboardStore.jsx";
@@ -29,7 +30,7 @@ export function SettingsButton() {
 
   // Pull the glass container styles for the dropdown
   const panelRecipe = useSlotRecipe({key: "glassPanel"});
-  const panelStyles = panelRecipe({ layout: "dropdown" });
+  const panelStyles = panelRecipe({layout: "dropdown"});
 
   const [isLibraryOpen, setIsLibraryOpen] = useState(false);
 
@@ -81,23 +82,23 @@ export function SettingsButton() {
           <Menu.Content css={panelStyles.root} zIndex="dropdown" minW="200px">
             {isEditing ? (
               <>
-                <Menu.Item onClick={saveEdit} color="green.600" cursor="pointer" _hover={{fontWeight: "semibold"}}>
+                <Menu.Item onClick={saveEdit} color="green.600" cursor="pointer" _hover={{WebkitTextStroke: "0.5px currentColor"}}>
                   <Save size={16} style={{marginRight: '8px'}}/> Save Layout
                 </Menu.Item>
 
-                <Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{fontWeight: "semibold"}}>
+                <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={{fontWeight: "semibold"}}>
+              <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.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{fontWeight: "semibold"}}>
+            <Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{WebkitTextStroke: "0.5px currentColor"}}>
               <LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
             </Menu.Item>
           </Menu.Content>
@@ -105,7 +106,14 @@ export function SettingsButton() {
       </Menu.Root>
 
       {/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
-      <Dialog.Root open={isLibraryOpen} onOpenChange={(e) => setIsLibraryOpen(e.open)} size="xl" placement="center">
+      <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">