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

wip moved the category-menu css in the widget library to the themes file

Browse Source
This commit is contained in:
vkuchenik
2026-09-14 08:58:09 -07:00
parent 0c8820d109
commit 10cbedb6ef
2 changed files with 74 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/dashboard/SettingsButton.jsx
+9 -71
View File
@@ -97,25 +97,15 @@ export function SettingsButton() {
// 📝 EDIT MODE: The 3-Pill Layout
<HStack css={settingsButtonStyles.root}>
{/* 1. The Add Widget Button */}
<Box
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)"}}
<Box 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)"}}
>
<LayoutGrid size={20} style={{flexShrink: 0}}/>
<Box as="span">Widget Library</Box>
</Box>
{/* 2. The Save Button */}
<Box
as="button"
css={tabStyles}
data-state="open"
onClick={saveEdit}
color={{base: "green.600", _dark: "green.400"}}
<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}}/>
@@ -123,12 +113,7 @@ export function SettingsButton() {
</Box>
{/* 3. The Discard Button */}
<Box
as="button"
css={tabStyles}
data-state="open"
onClick={cancelEdit}
color={{base: "red.500", _dark: "red.400"}}
<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}}/>
@@ -193,35 +178,11 @@ export function SettingsButton() {
<Dialog.Body>
<Tabs.Root defaultValue={categories[0]} variant="unstyled">
{/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */}
<Box position="relative" display="flex" maxWidth="100%" mx={5} mt={4} mb={6}>
<Box>
{/* left glass crescent */}
{canScrollLeft && (
<Flex
position="absolute"
left="0" top="0" bottom="0"
w="50px"
align="center" justify="center"
zIndex={2}
cursor="pointer"
onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}
bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
backdropFilter="blur(1px)"
borderTopLeftRadius="full"
borderBottomLeftRadius="full"
// THE MAGIC: Bites a transparent circle out of the flat right side!
WebkitMaskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 19px)"
maskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 35px)"
color={{base: "gray.600", _dark: "gray.300"}}
transition="background-color 0.2s"
_hover={{
color: {base: "blue.500", _dark: "blue.300"},
bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
}}
>
{/* Shifted slightly left to optically center it in the crescent mass */}
<ChevronLeft size={18} style={{ marginLeft: "-30px" }}/>
<Flex onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}>
<ChevronLeft size={18} style={{ marginLeft: "-30px" }}/> {/* Shifted slightly left to optically center it in the crescent mass */}
</Flex>
)}
@@ -239,30 +200,7 @@ export function SettingsButton() {
{/* right glass crescent */}
{canScrollRight && (
<Flex
position="absolute"
right="0" top="0" bottom="0"
w="50px"
align="center" justify="center"
zIndex={2}
cursor="pointer"
onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}
bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
backdropFilter="blur(1px)"
borderTopRightRadius="full"
borderBottomRightRadius="full"
// THE MAGIC: Bites a transparent circle out of the flat left side!
WebkitMaskImage="radial-gradient(circle at 0% 50%, transparent 30px, black 19px)"
maskImage="radial-gradient(circle at 0% 50%, transparent 30px, black 35px)"
color={{base: "gray.600", _dark: "gray.300"}}
transition="background-color 0.2s"
_hover={{
color: {base: "blue.500", _dark: "blue.300"},
bg: {base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(40, 40, 40, 0.95)"}
}}
>
<Flex onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}>
{/* Shifted slightly right to optically center it in the crescent mass */}
<ChevronRight size={18} style={{ marginRight: "-30px" }}/>
</Flex>
@@ -310,7 +248,7 @@ export function SettingsButton() {
h="24px"
flexShrink={0}
borderRadius="full"
bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
// bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
fontWeight="black"
fontSize="xs"
bg='transparent'