Merge branch 'refactor/sidebar-transition2' into 'main'

Refactor Header.jsx to place users name, email, and avatar in a group to the right side of the header

See merge request vkuchenik/website-framework!14

client/src/components/Header.jsx

@@ -1,4 +1,4 @@
-import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal } from "@chakra-ui/react"
+import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal, Flex } from "@chakra-ui/react"
 
 export default function Header() {
   const recipe = useRecipe({ key: "header" });
@@ -7,29 +7,32 @@ export default function Header() {
   return (
     <chakra.div css={styles}>
       <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
-      <Stack gap="0">
-        <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
-        <Text color="fg.muted" textStyle="sm">{user.email}</Text>
-      </Stack>
-      {/* Add a drop down menu to the avatar */}
-      <Menu.Root>
-        <Menu.Trigger rounded="full" focusRing="outside">
-        <Avatar.Root>
-          <Avatar.Fallback name={user.name} />
-          <Avatar.Image src={user.avatar} />
-        </Avatar.Root>
-        </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>
-      {/* End drop down menu */}
+      <Flex align="center" gap={3} pr={6}>
+        <Stack gap="0" textAlign="right">
+          <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
+          <Text color="fg.muted" textStyle="sm">{user.email}</Text>
+        </Stack>
+        
+        {/* Add a drop down menu to the avatar */}
+        <Menu.Root>
+          <Menu.Trigger rounded="full" focusRing="outside">
+          <Avatar.Root>
+            <Avatar.Fallback name={user.name} />
+            <Avatar.Image src={user.avatar} />
+          </Avatar.Root>
+          </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>
+        {/* End drop down menu */}
+      </Flex>
     </chakra.div>
   );
 }

client/src/components/SearchBar.jsx

@@ -1,10 +1,16 @@
 import { Input, InputGroup } from "@chakra-ui/react";
 import { FiSearch } from "react-icons/fi"
 
-export function SearchBar({ placeholder="Search...", size="sm", width="200px"}) {
+export function SearchBar({ placeholder="Enter a volcano to search", size="sm", width="210px" }) {
     return (
         <InputGroup startElement={<FiSearch />}>
-            <Input placeholder="Enter volcano to search" />
+            <Input 
+                placeholder={placeholder} 
+                size={size}
+                width={width}
+                borderRadius="full" 
+
+            />
         </InputGroup>
     );
 }

client/src/components/Sidebar.jsx

@@ -83,7 +83,7 @@ export default function Sidebar() {
   return (
     <Box
       css={styles.root}
-      width={isOpen ? "100%" : "86px"}
+      width={isOpen ? "210px" : "71px"}
       transition="width 0.4s ease"
     >
       <IconButton

client/src/theme.js

@@ -56,8 +56,10 @@ const config = defineConfig({
         base100: { value: {base: "#f7f9fa", _dark: "#787b73"}},
         base200: { value: {base: "#eef2f6", _dark: "#242424"}},
         base300: { value: {base: "#dfe5ed", _dark: "#60645a"}},
-        primary: { value: {base: "#9cd855", _dark: "#629631"}},
-        primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
+        // primary: { value: {base: "#9cd855", _dark: "#629631"}},
+        primary: { value: {base: "#2B98F8", _dark: "#629631"}},
+        // primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},
+        primaryLt: { value: {base: "#2BCFF8", _dark: "#92948e"}},
         secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}},
         border: {value: {base: "#000000", _dark: "#CBCBCB"}},
         text: {value: {base: "#19332D", _dark: "#CBCBCB"}},