From 5c68b1c5c304d7ae0f07aab1b24a1272ffcc9ab4 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Thu, 17 Jul 2025 10:32:35 -0700
Subject: [PATCH 1/3] Refactor sidebar to transition smoothly by changing open
 sidebar width from 100% to 210px

---
 client/src/components/Sidebar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Sidebar.jsx b/client/src/components/Sidebar.jsx
index 83f935a..c505707 100644
--- a/client/src/components/Sidebar.jsx
+++ b/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

From 7da843b5736a6ee0e7a8b4b99ec289bf7d34deb2 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Thu, 17 Jul 2025 11:03:55 -0700
Subject: [PATCH 2/3] Refactor Header.jsx to place users name, email, and
 avatar in a group on the right side of the header

---
 client/src/components/Header.jsx | 51 +++++++++++++++++---------------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx
index 7e9261e..53af68f 100644
--- a/client/src/components/Header.jsx
+++ b/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>
   );
 }

From 02b4b8ee45c37c29e8cde9523c5509e54f14c023 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Thu, 17 Jul 2025 11:33:16 -0700
Subject: [PATCH 3/3] Refactor color theme temporarily, style the search bar to
 have a more rounded shape

---
 client/src/components/SearchBar.jsx | 10 ++++++++--
 client/src/theme.js                 |  6 ++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/components/SearchBar.jsx b/client/src/components/SearchBar.jsx
index 93bd743..3a37fe5 100644
--- a/client/src/components/SearchBar.jsx
+++ b/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>
     );
 }
\ No newline at end of file
diff --git a/client/src/theme.js b/client/src/theme.js
index a2a4ad2..3268701 100644
--- a/client/src/theme.js
+++ b/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"}},