updated themes file to further reduce styling in sidebar component page

client/src/theme.js

@@ -136,9 +136,8 @@ const sidebarRecipe = defineSlotRecipe({
       justifyContent: "flex-start",
       ml: 2,
       textStyle: "4xl",
-      overflow: "hidden",
       fontWeight: "bold",
-      fontSize: "2rem",
+      overflow: "hidden",
       px: 0,
     },
     logo_text: {
@@ -167,6 +166,11 @@ const sidebarRecipe = defineSlotRecipe({
       align: "center",
       justifyContent: "right",
       mr: 6,
+      "& .chakra-button": { // targets the chakra button class in ColorModeButton component to set bg transparency
+        "&:hover": {
+          bg: "transparent",
+        }
+      },
       "& button": {
         alignSelf: "center",
         transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
@@ -174,6 +178,11 @@ const sidebarRecipe = defineSlotRecipe({
     },
     closed_theme_button: {
       ml: 0.9,
+      "& .chakra-button": { // targets the chakra button class to set bg transparency
+        "&:hover": {
+          bg: "transparent",
+        }
+      },
       "& button": {
         transition: "opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease",
       }