chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor continued of UI. changes to theme to make baselines

Browse Source
This commit is contained in:
chight
2026-08-04 09:05:30 -07:00
parent a6ebe5af1e
commit 2b0300b075
3 changed files with 83 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/dashboard/SettingsButton.jsx
+66 -34
View File
@@ -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