Updated color more button by consolidating into one button, it now uses css positioning w respect to state rather then visibility

client/src/components/layout/Sidebar.jsx

@@ -45,17 +45,17 @@ export default function Sidebar() {
 
       {/* Collapse Sidebar and Theme Footer Buttons */}
       <Flex css={styles.footer}>
-        <Flex css={styles.closed_theme_button}>
-          <ColorModeButton />
-        </Flex>
-        <Flex>
+        {/*<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>*/}
       </Flex>
     </Box>
   );

client/src/theme.js

@@ -40,7 +40,7 @@ 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
@@ -160,7 +160,6 @@ const sidebarRecipe = defineSlotRecipe({
     },
     logo: {
       width: "100%",
-      height: "2.5rem",
       justifyContent: "flex-start",
       ml: 2,
       textStyle: "4xl",
@@ -175,10 +174,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 +191,28 @@ const sidebarRecipe = defineSlotRecipe({
     collapse_button: {
       "& svg": {flexShrink: "0"},
     },
-    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",
-        }
-      }
-    },
+    // 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 +220,36 @@ 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"}},
-        closed_theme_button: {"& button": {opacity: 0, visibility: "hidden"}},
+        color_mode_button: {
+          // 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
+          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"},
-        opened_theme_button: {"& button": {opacity: 0, visibility: "hidden"}},
-        closed_theme_button: {"& button": {opacity: 1, visibility: "visible"}},
+        color_mode_button: {
+          "& button": {
+            position: "relative",
+            bottom: "50px",
+            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",
+        //   }
+        // },
       }
     }
   }