style changes

some small style changes like cursor types on hover and some color changes.

client/src/components/layout/Sidebar/Sidebar.jsx

@@ -1,4 +1,4 @@
-import { chakra, useRecipe, useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react";
+import { useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react";
 import { ColorModeButton } from "@/components/ui/color-mode";
 import { FaVolcano } from "react-icons/fa6";
 import { RxHamburgerMenu } from "react-icons/rx";
@@ -59,7 +59,6 @@ export const Users = createIcon({
 
 export default function Sidebar() {
   const [isOpen, setIsOpen] = useState(true);
-  const [hasFinishedTransitions, setFinishedTransitions] = useState(false);
 
   const buttons = [
     {icon: PushPin, name: "Dashboard"},
@@ -74,10 +73,8 @@ export default function Sidebar() {
   const styles = recipe();
 
   const toggleSidebar = () => {
-    setFinishedTransitions(false);
     if (isOpen) setIsOpen(false);
     else setIsOpen(true);
-    setTimeout(() => setFinishedTransitions(true), 400); // Match sidebar transition duration
   };
 
   return (
@@ -88,9 +85,10 @@ export default function Sidebar() {
     >
       <IconButton
         aria-label="Toggle Sidebar"
-        variant="ghost"
+        variant="plain"
         size="md"
         onClick={toggleSidebar}
+        width="54px"
       >
         <RxHamburgerMenu />
       </IconButton>
@@ -98,7 +96,12 @@ export default function Sidebar() {
       {buttons.map((button, idx) => {
         const Icon = button.icon;
         return (
-          <Button key={idx} css={styles.buttons} onClick={() => setActiveButton(idx)} bg={activeButton === idx ? "primary":undefined} justifyContent="flex-start">           
+          <Button key={idx} 
+                  css={styles.buttons} 
+                  onClick={() => setActiveButton(idx)} 
+                  bg={activeButton === idx ? "primary":undefined} 
+                  justifyContent="flex-start"
+          >           
             <Icon fill="base200" />
               <span style={{
                 opacity: isOpen ? 1 : 0,