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

Update chevrons are updated for better UI

Browse Source
This commit is contained in:
chight
2026-08-21 13:30:02 -07:00
parent 9abcb78327
commit 8ddf9ff393
1 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/dashboard/SettingsButton.jsx
+32 -26
View File
@@ -183,7 +183,7 @@ export function SettingsButton() {
{/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/} {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
<Dialog.Positioner> <Dialog.Positioner>
<Dialog.Content css={modalStyles.root} overflow="hidden" maxW="800px" minH="800px" p={0}> <Dialog.Content css={modalStyles.root} overflow="hidden" maxW="40%" minH="80%" p={0}>
<Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4} <Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}> borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
@@ -192,32 +192,36 @@ export function SettingsButton() {
<Dialog.Body p={0}> <Dialog.Body p={0}>
<Tabs.Root defaultValue={categories[0]} variant="unstyled"> <Tabs.Root defaultValue={categories[0]} variant="unstyled">
<Box position="relative" display="flex" mx="auto" maxWidth="100%" mt={4} mb={6}> <Box position="relative" display="flex" mx="auto" maxWidth="100%" mx={5} mt={4} mb={6}>
{/* LEFT GLASS CRESCENT */} {/* LEFT GLASS CRESCENT */}
{canScrollLeft && ( {canScrollLeft && (
<Flex <Flex
position="absolute" position="absolute"
left="0" top="0" bottom="0" left="0" top="0" bottom="0"
w="40px" w="50px"
align="center" justify="center" align="center" justify="center"
zIndex={2} zIndex={2}
cursor="pointer" cursor="pointer"
onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})} onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}
// The Glass Look hugging the left pill edge
bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}} bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
backdropFilter="blur(8px)" backdropFilter="blur(1px)"
borderTopLeftRadius="full" borderTopLeftRadius="full"
borderBottomLeftRadius="full" borderBottomLeftRadius="full"
// Fades the inner edge so it blends into the track
boxShadow={{ // THE MAGIC: Bites a transparent circle out of the flat right side!
base: "10px 0 15px -5px rgba(255,255,255,0.8)", WebkitMaskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 19px)"
_dark: "10px 0 15px -5px rgba(30,30,30,0.9)" maskImage="radial-gradient(circle at 100% 50%, transparent 30px, black 35px)"
}}
color={{base: "gray.600", _dark: "gray.300"}} color={{base: "gray.600", _dark: "gray.300"}}
_hover={{color: {base: "blue.500", _dark: "blue.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)"}
}}
> >
<ChevronLeft size={18}/> {/* Shifted slightly left to optically center it in the crescent mass */}
<ChevronLeft size={18} style={{ marginLeft: "-30px" }}/>
</Flex> </Flex>
)} )}
<Tabs.List <Tabs.List
@@ -225,9 +229,6 @@ export function SettingsButton() {
onScroll={checkScroll} onScroll={checkScroll}
bg={{base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"}} bg={{base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"}}
p={1} p={1}
mx={3}
mt={4}
mb={6}
borderRadius="full" borderRadius="full"
display="flex" display="flex"
flexWrap="nowrap" flexWrap="nowrap"
@@ -276,24 +277,29 @@ export function SettingsButton() {
<Flex <Flex
position="absolute" position="absolute"
right="0" top="0" bottom="0" right="0" top="0" bottom="0"
w="40px" w="50px"
align="center" justify="center" align="center" justify="center"
zIndex={2} zIndex={2}
cursor="pointer" cursor="pointer"
onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})} onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}
// The Glass Look hugging the right pill edge
bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}} bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
backdropFilter="blur(8px)" backdropFilter="blur(1px)"
borderTopRightRadius="full" borderTopRightRadius="full"
borderBottomRightRadius="full" borderBottomRightRadius="full"
boxShadow={{
base: "-10px 0 15px -5px rgba(255,255,255,0.8)", // THE MAGIC: Bites a transparent circle out of the flat left side!
_dark: "-10px 0 15px -5px rgba(30,30,30,0.9)" 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"}} color={{base: "gray.600", _dark: "gray.300"}}
_hover={{color: {base: "blue.500", _dark: "blue.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)"}
}}
> >
<ChevronRight size={18}/> {/* Shifted slightly right to optically center it in the crescent mass */}
<ChevronRight size={18} style={{ marginRight: "-30px" }}/>
</Flex> </Flex>
)} )}
@@ -330,7 +336,7 @@ export function SettingsButton() {
onClick={() => handleAddWidget(widget.id, sizeKey)} onClick={() => handleAddWidget(widget.id, sizeKey)}
color={{base: "blue.600", _dark: "blue.300"}} color={{base: "blue.600", _dark: "blue.300"}}
> >
{/* 🚨 THE ABBREVIATION ICON: Always visible */} {/* THE ABBREVIATION ICON: Always visible */}
<Flex <Flex
align="center" align="center"
justify="center" justify="center"
@@ -346,7 +352,7 @@ export function SettingsButton() {
{getSizeAbbreviation(sizeKey)} {getSizeAbbreviation(sizeKey)}
</Flex> </Flex>
{/* 🚨 THE EXPANDED TEXT: Only visible on hover */} {/* THE EXPANDED TEXT: Only visible on hover */}
<Box as="span">Add Widget</Box> <Box as="span">Add Widget</Box>
</Box> </Box>
))} ))}