reformatting slot recipes for better orginization

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>*/}
+        <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>
     </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/pages/home/tabs/MyDashboard.jsx

@@ -141,6 +141,16 @@ export default function MyDashboard() {
             {/* THE DELETE BUTTON */}
             {isEditing && (
               <IconButton
+                position="absolute"
+                top={2}
+                right={2}
+                bg="white"
+                color="black"
+                border="1px solid"
+                borderRadius="xl"
+                borderColor="gray.200"
+                _hover={{bg: "red.50", color: "red.500", borderColor: "red.200"}}
+                zIndex={2}
                 aria-label="Remove widget"
                 size="xs"
                 onClick={() => removeWidget(widget.id)}

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",
+    }
   },
 })
 
@@ -396,24 +380,6 @@ const glassPanelRecipe = defineSlotRecipe({
           width: "100%",
           height: "100%",
           borderRadius: "3xl",
-
-          "& > button": {
-            position: "absolute",
-            top: 2,
-            right: 2,
-            // size="xs",
-            bg: "white",
-            color: "black",
-            border: "1px solid",
-            borderRadius: "xl",
-            borderColor: "gray.200",
-            _hover: {
-              bg: "red.50",
-              color: "red.500",
-              borderColor: "red.200"
-            },
-            zIndex: 2,
-          }
         },
         header: {
           display: "flex",
@@ -479,6 +445,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 +470,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 +500,6 @@ const glassPanelRecipe = defineSlotRecipe({
               scrollbarWidth: "none",
               "&::-webkit-scrollbar": {display: "none"},
 
-
               // the pill shaped menu options
               "& button.chakra-tabs__trigger": {
                 px: 5,