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,10 +7,12 @@ export default function Header() {
   return (
     <chakra.div css={styles}>
       <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
-      <Stack gap="0">
+      <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">
@@ -30,6 +32,7 @@ export default function Header() {
           </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"}},