reformatting slot recipes for better orginization

client/src/components/layout/Sidebar.jsx

@@ -45,18 +45,13 @@ 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.opened_theme_button}>
+        <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/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
       }
     }
   },
@@ -40,12 +40,13 @@ const headerRecipe = defineSlotRecipe({
 
 // CONSOLIDATED ✔
 const sidebarRecipe = defineSlotRecipe({
-  slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "opened_theme_button", "closed_theme_button"],
+  slots: ["root", "logo", "logo_text", "footer", "button_text", "buttons", "collapse_button", "color_mode_button"],
   base: {
     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%)"
       },
 
@@ -160,7 +161,6 @@ const sidebarRecipe = defineSlotRecipe({
     },
     logo: {
       width: "100%",
-      height: "2.5rem",
       justifyContent: "flex-start",
       ml: 2,
       textStyle: "4xl",
@@ -175,10 +175,12 @@ const sidebarRecipe = defineSlotRecipe({
       textOverflow: "clip",
     },
     footer: {
-      flexDirection: "column",
+      flexDirection: "row",
+      justifyContent: "space-between",
       width: "100%",
       mt: "auto",
-      ml: 2,
+      pl: 2,
+      pr: 2,
     },
     button_text: {
       transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
@@ -190,28 +192,35 @@ const sidebarRecipe = defineSlotRecipe({
     collapse_button: {
       "& svg": {flexShrink: "0"},
     },
-    opened_theme_button: {
+    color_mode_button: {
-      width: "100%",
-      align: "center",
-      justifyContent: "right",
-      mr: 6,
       "& button": {
-        alignSelf: "center",
-        transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
         _hover: {
           bg: "transparent",
-        }
-      }
         },
-    closed_theme_button: {
-      ml: 0.9,
-      "& button": {
-        transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
-        _hover: {
-          bg: "transparent",
       }
     }
-    },
+    // opened_theme_button: {
+    //   width: "100%",
+    //   align: "center",
+    //   justifyContent: "right",
+    //   mr: 6,
+    //   // "& button": {
+    //   //   alignSelf: "center",
+    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+    //   //   _hover: {
+    //   //     bg: "transparent",
+    //   //   }
+    //   // }
+    // },
+    // closed_theme_button: {
+    //   // ml: 0.9,
+    //   // "& button": {
+    //   //   transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
+    //   //   _hover: {
+    //   //     bg: "transparent",
+    //   //   }
+    //   // }
+    // },
   },
   variants: {
     state: {
@@ -219,15 +228,23 @@ const sidebarRecipe = defineSlotRecipe({
         root: {width: "190px"},
         button_text: {ml: 3, opacity: 1, visibility: "visible"},
         logo_text: {ml: 3, opacity: 1, visibility: "visible", transition: "opacity 0.5s ease, visibility 0.5s ease, margin 0.5s ease"},
-        opened_theme_button: {"& button": {opacity: 1, visibility: "visible"}},
+        color_mode_button: {
-        closed_theme_button: {"& button": {opacity: 0, visibility: "hidden"}},
+          "& button": {
+            position: "static",
+          },
+          // 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: {
         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"},
-        opened_theme_button: {"& button": {opacity: 0, visibility: "hidden"}},
+        color_mode_button: {"& button": {position: "relative", bottom: "35px", right: "37px",}
-        closed_theme_button: {"& button": {opacity: 1, visibility: "visible"}},
+        },
       }
     }
   }
@@ -250,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",
@@ -268,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",
@@ -279,13 +297,11 @@ const homeRecipe = defineSlotRecipe({
         }
       }
     },
-
+    body: {
-      "& > div": {
       flex: 1,
       overflow: "auto",
     }
   },
-  },
 })
 
 // const canvasRecipe = defineRecipe({
@@ -364,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",
@@ -447,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",
@@ -471,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",
@@ -503,7 +500,6 @@ const glassPanelRecipe = defineSlotRecipe({
               scrollbarWidth: "none",
               "&::-webkit-scrollbar": {display: "none"},
 
-
               // the pill shaped menu options
               "& button.chakra-tabs__trigger": {
                 px: 5,