From 8ddf9ff393a729a4dde4e236a4674b955dce95fc Mon Sep 17 00:00:00 2001
From: Christopher Hight <chight@usgs.gov>
Date: Fri, 21 Aug 2026 13:30:02 -0700
Subject: [PATCH] Update chevrons are updated for better UI

---
 .../components/dashboard/SettingsButton.jsx   | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/client/src/components/dashboard/SettingsButton.jsx b/client/src/components/dashboard/SettingsButton.jsx
index 8038b94..f574901 100644
--- a/client/src/components/dashboard/SettingsButton.jsx
+++ b/client/src/components/dashboard/SettingsButton.jsx
@@ -183,7 +183,7 @@ export function SettingsButton() {
         {/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
         <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}
                            borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
@@ -192,32 +192,36 @@ export function SettingsButton() {
 
             <Dialog.Body p={0}>
               <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 */}
                   {canScrollLeft && (
                     <Flex
                       position="absolute"
                       left="0" top="0" bottom="0"
-                      w="40px"
+                      w="50px"
                       align="center" justify="center"
                       zIndex={2}
                       cursor="pointer"
                       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)"}}
-                      backdropFilter="blur(8px)"
+                      backdropFilter="blur(1px)"
                       borderTopLeftRadius="full"
                       borderBottomLeftRadius="full"
-                      // Fades the inner edge so it blends into the track
-                      boxShadow={{
-                        base: "10px 0 15px -5px rgba(255,255,255,0.8)",
-                        _dark: "10px 0 15px -5px rgba(30,30,30,0.9)"
-                      }}
+
+                      // 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"}}
-                      _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>
                   )}
                   <Tabs.List
@@ -225,9 +229,6 @@ export function SettingsButton() {
                     onScroll={checkScroll}
                     bg={{base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"}}
                     p={1}
-                    mx={3}
-                    mt={4}
-                    mb={6}
                     borderRadius="full"
                     display="flex"
                     flexWrap="nowrap"
@@ -276,24 +277,29 @@ export function SettingsButton() {
                     <Flex
                       position="absolute"
                       right="0" top="0" bottom="0"
-                      w="40px"
+                      w="50px"
                       align="center" justify="center"
                       zIndex={2}
                       cursor="pointer"
                       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)"}}
-                      backdropFilter="blur(8px)"
+                      backdropFilter="blur(1px)"
                       borderTopRightRadius="full"
                       borderBottomRightRadius="full"
-                      boxShadow={{
-                        base: "-10px 0 15px -5px rgba(255,255,255,0.8)",
-                        _dark: "-10px 0 15px -5px rgba(30,30,30,0.9)"
-                      }}
+
+                      // 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"}}
-                      _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>
                   )}
 
@@ -330,7 +336,7 @@ export function SettingsButton() {
                                   onClick={() => handleAddWidget(widget.id, sizeKey)}
                                   color={{base: "blue.600", _dark: "blue.300"}}
                                 >
-                                  {/* 🚨 THE ABBREVIATION ICON: Always visible */}
+                                  {/* THE ABBREVIATION ICON: Always visible */}
                                   <Flex
                                     align="center"
                                     justify="center"
@@ -346,7 +352,7 @@ export function SettingsButton() {
                                     {getSizeAbbreviation(sizeKey)}
                                   </Flex>
 
-                                  {/* 🚨 THE EXPANDED TEXT: Only visible on hover */}
+                                  {/* THE EXPANDED TEXT: Only visible on hover */}
                                   <Box as="span">Add Widget</Box>
                                 </Box>
                               ))}