diff --git a/client/src/components/dashboard/SettingsButton.jsx b/client/src/components/dashboard/SettingsButton.jsx index e530565..5d2ba4c 100644 --- a/client/src/components/dashboard/SettingsButton.jsx +++ b/client/src/components/dashboard/SettingsButton.jsx @@ -97,25 +97,15 @@ export function SettingsButton() { // 📝 EDIT MODE: The 3-Pill Layout {/* 1. The Add Widget Button */} - setIsLibraryOpen(true)} - color={{base: "blue.500", _dark: "blue.300"}} - _hover={{bg: "rgba(66, 153, 225, 0.1)"}} + setIsLibraryOpen(true)} + color={{base: "blue.500", _dark: "blue.300"}} _hover={{bg: "rgba(66, 153, 225, 0.1)"}} > Widget Library {/* 2. The Save Button */} - @@ -123,12 +113,7 @@ export function SettingsButton() { {/* 3. The Discard Button */} - @@ -193,35 +178,11 @@ export function SettingsButton() { {/* HORIZONTAL SCROLLABLE MENU OF WIDGET CATEGORIES */} - + {/* left glass crescent */} {canScrollLeft && ( - 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 */} - + tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}> + {/* Shifted slightly left to optically center it in the crescent mass */} )} @@ -239,30 +200,7 @@ export function SettingsButton() { {/* right glass crescent */} {canScrollRight && ( - 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)"} - }} - > + tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}> {/* Shifted slightly right to optically center it in the crescent mass */} @@ -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' diff --git a/client/src/theme.js b/client/src/theme.js index 9d5ed29..75443b6 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -288,22 +288,6 @@ const homeRecipe = defineSlotRecipe({ }, }) -const settingsButtonRecipe = defineSlotRecipe({ - slots: ["root", "dialog"], - base: { - root: { - gap: 2, - - "& > button": { - - } - }, - dialog: { - - } - } -}) - // const canvasRecipe = defineRecipe({ // base: { // bg: "{transparent}", @@ -486,7 +470,18 @@ const glassPanelRecipe = defineSlotRecipe({ "& > div.chakra-dialog__body": { p: 0, - // everything below is specific to the widget menu found in the settings button component + + // IMPORTANT: everything below is specific to the widget menu found in the settingsButton component + // box container of the widget category menu + "& div.chakra-tabs__root > div:first-child": { + position: "relative", + display: "flex", + maxW: "100%", + mx: 5, + mt: 4, + mb: 6 + }, + // the horizontal widget categories menu "& div.chakra-tabs__list": { bg: { @@ -507,6 +502,8 @@ const glassPanelRecipe = defineSlotRecipe({ scrollbarWidth: "none", "&::-webkit-scrollbar": {display: "none"}, + + // the pill shaped menu options "& button.chakra-tabs__trigger": { px: 5, py: 2, @@ -540,37 +537,57 @@ const glassPanelRecipe = defineSlotRecipe({ } }, - // "& div.chakra-tabs__root > div:first-child div > svg": { - // position: "absolute", - // top: "0", - // bottom: "0", - // w: "50px", - // align: "center", - // justify: "center", - // zIndex: 2, - // cursor: "pointer", - // bg: { - // base: "rgba(255, 255, 255, 0.7)", - // _dark: "rgba(30, 30, 30, 0.8)" - // }, - // backdropFilter: "blur(1px)", - // - // 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)" - // }, - // } - // } + // base styling applied to both chevron navigators + "& div.chakra-tabs__root > div:first-child div:has(svg)": { + position: "absolute", + top: "0", + bottom: "0", + w: "50px", + alignItems: "center", + justifyContent: "center", + zIndex: 2, + cursor: "pointer", + bg: { + base: "rgba(255, 255, 255, 0.7)", + _dark: "rgba(30, 30, 30, 0.8)" + }, + color: { + base: "gray.600", + _dark: "gray.300" + }, + backdropFilter: "blur(1px)", + 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)" + }, + }, + + "&:has(.lucide-chevron-left)": { + left: 0, + borderTopLeftRadius: "full", + borderBottomLeftRadius: "full", + // 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)", + }, + + "&:has(.lucide-chevron-right)": { + right: 0, + 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)", + } + } + } } } @@ -763,7 +780,6 @@ const config = defineConfig({ // widget: widgetRecipe, glassPanel: glassPanelRecipe, home: homeRecipe, - settingsButton: settingsButtonRecipe, }, }, });