style changes

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

client/src/components/layout/Canvas/SearchBar.jsx

@@ -9,7 +9,7 @@ export function SearchBar({ placeholder="Enter a volcano to search", size="sm",
                 size={size}
                 width={width}
                 borderRadius="full" 
-
+                bg="base100"
             />
         </InputGroup>
     );

client/src/components/layout/Header/Header.jsx

@@ -16,7 +16,7 @@ export default function Header() {
     <chakra.div css={styles}>
       <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
       <Flex align="center" gap={3} pr={6}>
-        <Stack gap="0" textAlign="right">
+        <Stack gap="0" textAlign="right" cursor="default">
           <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
           <Text color="fg.muted" textStyle="sm">{user.email}</Text>
         </Stack>

client/src/components/layout/Header/UserAvatarMenu.jsx

@@ -2,29 +2,30 @@ import { Avatar, Menu, Portal, Box } from "@chakra-ui/react"
 
 
 export default function UserAvatarMenu({ name, avatar }) {
-    return (
-        <Menu.Root>
-            <Menu.Trigger focusRing="none">
-                <Box
-                    rounded="full" 
-                    tabIndex={0}
-                    _hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
-                >
-                    <Avatar.Root shape="full">
-                        <Avatar.Fallback name={name} />
-                        <Avatar.Image src={avatar} />
-                    </Avatar.Root>
-                </Box>
-            </Menu.Trigger>
-            <Portal>
-            <Menu.Positioner zIndex="popover">
-              <Menu.Content>
-                <Menu.Item value="account">Account</Menu.Item>
-                <Menu.Item value="settings">Settings</Menu.Item>
-                <Menu.Item value="logout">Logout</Menu.Item>
-              </Menu.Content>
-            </Menu.Positioner>
-          </Portal>
-        </Menu.Root>
-    );
+	return (
+		<Menu.Root>
+			<Menu.Trigger focusRing="none">
+				<Box
+						rounded="full" 
+						tabIndex={0}
+						_hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
+						cursor="pointer"
+				>
+					<Avatar.Root shape="full">
+						<Avatar.Fallback name={name} />
+						<Avatar.Image src={avatar} />
+					</Avatar.Root>
+				</Box>
+			</Menu.Trigger>
+			<Portal>
+				<Menu.Positioner zIndex="popover">
+					<Menu.Content>
+						<Menu.Item value="account">Account</Menu.Item>
+						<Menu.Item value="settings">Settings</Menu.Item>
+						<Menu.Item value="logout">Logout</Menu.Item>
+					</Menu.Content>
+				</Menu.Positioner>
+			</Portal>
+		</Menu.Root>
+		);
 }

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,

client/src/theme.js

@@ -59,7 +59,7 @@ const config = defineConfig({
         // primary: { value: {base: "#9cd855", _dark: "#629631"}},
         primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
         // primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
-        primaryLt: { value: {base: "#2BCFF8", _dark: "#2BCFF8"}},
+        primaryLt: { value: {base: "#98cdffff", _dark: "#98cdffff"}},
         secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
         border: {value: {base: "#000000", _dark: "#CBCBCB"}},
         text: {value: {base: "#19332D", _dark: "#CBCBCB"}},