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

@@ -45,17 +45,12 @@ export default function Sidebar() {
 
       {/* Collapse Sidebar and Theme Footer Buttons */}
       <Flex css={styles.footer}>
-        {/*<Flex css={styles.closed_theme_button}>*/}
-        {/*  <ColorModeButton />*/}
-        {/*</Flex>*/}
-        {/*<Flex>*/}
         <IconButton aria-label="Toggle Sidebar" variant="plain" onClick={toggleSidebar} css={styles.collapse_button}>
           {isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
         </IconButton>
         <Flex css={styles.color_mode_button}>
           <ColorModeButton />
         </Flex>
-        {/*</Flex>*/}
       </Flex>
     </Box>
   );

client/src/pages/home/Home.jsx

@@ -26,7 +26,7 @@ export default function Home() {
 
   return (
     <Flex css={homeStyle.root}>
-      <Flex as="header">
+      <Flex as="header" css={homeStyle.header}>
         {/* TABS CONTAINER */}
         <Flex>
           {HOME_TABS.map((tab) => {
@@ -52,7 +52,7 @@ export default function Home() {
       </Flex>
 
       {/* TABS CONTENT */}
-      <Flex>
+      <Flex css={homeStyle.body}>
         <Outlet/>
       </Flex>
 

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,15 +267,15 @@ 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",
@@ -300,6 +285,7 @@ const homeRecipe = defineSlotRecipe({
       zIndex: "dropdown",
       bg: "transparent",
 
+      // THE TABS
       // Flex container renders as div for all the buttons within the header
       "& > div": {
         alignItems: "center",
@@ -311,13 +297,11 @@ const homeRecipe = defineSlotRecipe({
         }
       }
     },
-
-      "& > div": {
+    body: {
       flex: 1,
       overflow: "auto",
     }
   },
-  },
 })
 
 // const canvasRecipe = defineRecipe({
@@ -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,