From 4523f8035f5c868bb9c1652ed9bbb4f8f0fda094 Mon Sep 17 00:00:00 2001 From: vkuchenik Date: Tue, 15 Sep 2026 10:59:20 -0700 Subject: [PATCH] refactoring theme.js by breaking up the root slot into further header, body slots to better compartmentalize css in components --- client/src/components/layout/Sidebar.jsx | 17 ++--- client/src/pages/home/Home.jsx | 4 +- client/src/theme.js | 80 +++++++++--------------- 3 files changed, 39 insertions(+), 62 deletions(-) diff --git a/client/src/components/layout/Sidebar.jsx b/client/src/components/layout/Sidebar.jsx index 936da42..9b3c49e 100644 --- a/client/src/components/layout/Sidebar.jsx +++ b/client/src/components/layout/Sidebar.jsx @@ -45,17 +45,12 @@ export default function Sidebar() { {/* Collapse Sidebar and Theme Footer Buttons */} - {/**/} - {/* */} - {/**/} - {/**/} - - {isOpen ? : } - - - - - {/**/} + + {isOpen ? : } + + + + ); diff --git a/client/src/pages/home/Home.jsx b/client/src/pages/home/Home.jsx index 61f15df..16c8b40 100644 --- a/client/src/pages/home/Home.jsx +++ b/client/src/pages/home/Home.jsx @@ -26,7 +26,7 @@ export default function Home() { return ( - + {/* TABS CONTAINER */} {HOME_TABS.map((tab) => { @@ -52,7 +52,7 @@ export default function Home() { {/* TABS CONTENT */} - + diff --git a/client/src/theme.js b/client/src/theme.js index fc18790..69a6c3a 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -32,7 +32,7 @@ const headerRecipe = defineSlotRecipe({ // The Text component "& p": { fontWeight: "600", - fontSize: "16px" // equivalent to chakra 'md' + fontSize: "md" // equivalent to 16px } } }, @@ -45,7 +45,8 @@ const sidebarRecipe = defineSlotRecipe({ root: { // 1. Semi-transparent backgrounds bg: { - base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", + // base: "linear-gradient(to bottom right, #99000040 20%, #FF660040 60%, #EEEE0040 100%)", // this is too pale for light mode imo + base: "linear-gradient(to bottom right, #97282880 20%, #EB7F3160 60%, #FCAD3840 100%)", // colors from: https://colorhunt.co/palette/972828e45742eb7f31fcad38 _dark: "linear-gradient(to bottom right, #9900003C 20%, #FF66003C 60%, #FFC0003C 100%)" }, @@ -231,35 +232,19 @@ const sidebarRecipe = defineSlotRecipe({ "& button": { position: "static", }, - // the css below makes sure the icon doesn't jump out of the bounds of the sidebar while it's transitioning from closed to open + // the css below is equivalent to chakra's 'truncate' prop + // it makes sure the icon doesn't jump out of the bounds of the sidebar while it's transitioning from closed to open whiteSpace: "nowrap", overflow: "hidden", textOverflow: "clip", }, - // closed_theme_button: {"& button": {opacity: 0, visibility: "hidden"}}, }, closed: { root: {width: "71px"}, button_text: {opacity: 0, visibility: "hidden"}, logo_text: {opacity: 0, visibility: "hidden", transition: "opacity 0.2s ease, visibility 0.2s ease, margin 0.2s ease"}, - color_mode_button: { - "& button": { - position: "relative", - bottom: "50px", - right: "37px", - } + color_mode_button: {"& button": {position: "relative", bottom: "35px", right: "37px",} }, - // closed_theme_button: { - // ml: 0.9, - // "& button": { - // transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease", - // _hover: { - // bg: "transparent", - // }, - // opacity: 1, - // visibility: "visible", - // } - // }, } } } @@ -282,41 +267,40 @@ const dashboardRecipe = defineRecipe({ // CONSOLIDATED ✔ const homeRecipe = defineSlotRecipe({ - slots: ["root"], + slots: ["root", "header", "body"], base: { root: { flexDirection: "column", height: "100%", width: "100%", - + }, + header: { // Flex contianer as a header that contains all the tabs - "& header": { - width: "100%", - align: "center", - justify: "space-between", - top: "0", - p: 5, - position: "sticky", - zIndex: "dropdown", - bg: "transparent", - - // Flex container renders as div for all the buttons within the header - "& > div": { - alignItems: "center", - gap: 2, - - // icon in each tab button - "& svg": { - // TODO: bring over svg styling - } - } - }, + width: "100%", + align: "center", + justify: "space-between", + top: "0", + p: 5, + position: "sticky", + zIndex: "dropdown", + bg: "transparent", + // THE TABS + // Flex container renders as div for all the buttons within the header "& > div": { - flex: 1, - overflow: "auto", + alignItems: "center", + gap: 2, + + // icon in each tab button + "& svg": { + // TODO: bring over svg styling + } } }, + body: { + flex: 1, + overflow: "auto", + } }, }) @@ -479,6 +463,7 @@ const glassPanelRecipe = defineSlotRecipe({ WebkitBackdropFilter: "blur(15px)", + // IMPORTANT: everything below is specific to the widget menu found in the settingsButton component // dialog header "& > div.chakra-dialog__header": { bg: "transparent", @@ -503,8 +488,6 @@ const glassPanelRecipe = defineSlotRecipe({ "& > div.chakra-dialog__body": { p: 0, - - // 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", @@ -535,7 +518,6 @@ const glassPanelRecipe = defineSlotRecipe({ scrollbarWidth: "none", "&::-webkit-scrollbar": {display: "none"}, - // the pill shaped menu options "& button.chakra-tabs__trigger": { px: 5,