refactoring theme.js by breaking up the root slot into further header, body slots to better compartmentalize css in components

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,