From 022d4169b5043620d0e885b704d927bf01341e2d Mon Sep 17 00:00:00 2001
From: Christopher Hight <chight@usgs.gov>
Date: Wed, 22 Jul 2026 10:37:01 -0700
Subject: [PATCH] Reformat starting changes on layout for better UI visuals

---
 client/src/App.jsx                         | 10 +++---
 client/src/components/layout/Header.jsx    |  8 ++---
 client/src/components/layout/Sidebar.jsx   | 39 ++++++++++++++++++++--
 client/src/pages/home/tabs/MyDashboard.jsx |  2 +-
 4 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 9ab481b..287e35d 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -33,12 +33,12 @@ function AppFoundation() {
         height="100vh"
         width="100vw"
       >
-        <GridItem rowSpan={1} colSpan={2}>
-          <Header />
-        </GridItem>
-        <GridItem colSpan={1}>
+        <GridItem rowSpan={2} colSpan={1}>
           <Sidebar />
         </GridItem>
+        <GridItem rowSpan={1} colSpan={1}>
+          <Header />
+        </GridItem>
         <GridItem colSpan={1} width="100%" overflow="auto">
           <Outlet />
         </GridItem>
@@ -75,7 +75,7 @@ function App() {
 
                     <Route path="/home" element={<Home />}>
                         <Route index element={<MyDashboard />} />
-                        <Route path="gas" element={<MyDashboard />} />
+                        <Route path="gas" element={<Placeholder name="Gas" />} />
                         <Route path="seismic" element={<Placeholder name="Seismic" />} />
                         <Route path="remote" element={<Placeholder name="Remote Sensing" />} />
                         <Route path="daily" element={<Placeholder name="Daily Activity" />} />
diff --git a/client/src/components/layout/Header.jsx b/client/src/components/layout/Header.jsx
index 47adb32..42077af 100644
--- a/client/src/components/layout/Header.jsx
+++ b/client/src/components/layout/Header.jsx
@@ -19,10 +19,10 @@ export default function Header() {
 
     return (
         <Flex css={styles} justify="space-between" align="center" width="100%">
-            {/* Home Link Logo */}
-            <Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">
-                VDAP
-            </Button>
+            {/*/!* Home Link Logo *!/*/}
+            {/*<Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">*/}
+            {/*    VDAP*/}
+            {/*</Button>*/}
 
             {/* User Profile Section */}
             <Flex align="center" gap={3} pr={6}>
diff --git a/client/src/components/layout/Sidebar.jsx b/client/src/components/layout/Sidebar.jsx
index 1ca6b77..b1f1c8c 100644
--- a/client/src/components/layout/Sidebar.jsx
+++ b/client/src/components/layout/Sidebar.jsx
@@ -24,10 +24,42 @@ export default function Sidebar() {
   const toggleSidebar = () => setIsOpen((prev) => !prev);
 
   return (
-      <Box css={styles.root} width={isOpen ? "210px" : "71px"} transition="width 0.4s ease" position="relative" display="flex" flexDirection="column" gap={2}
+      <Box
+          css={styles.root}
+          width={isOpen ? "210px" : "71px"}
+          transition="width 0.4s ease"
+          position="relative"
+          display="flex"
+          flexDirection="column"
+          gap={4} // Increased gap slightly to help with the squashed look
+          pt={4} // Added top padding to give the logo room to breathe
       >
+        {/* Home Link Logo */}
+        <Button
+            as={NavLink}
+            to="/home"
+            color="color"
+            variant="plain"
+            textStyle={isOpen ? "5xl" : "4xl"} // Scale down slightly when closed
+            fontWeight="bold"
+            height="auto" // Prevents the large text from squashing vertically
+            overflow="hidden"
+            px={0}
+            justifyContent={isOpen ? "flex-start" : "center"} // Center the 'V' when collapsed
+            ml={isOpen ? 3 : 0} // Align with other buttons when open
+        >
+          {isOpen ? "VDAP" : "V"}
+        </Button>
+
         {/* Menu Trigger */}
-        <IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px" alignSelf="flex-start"
+        <IconButton
+            aria-label="Toggle Sidebar"
+            variant="plain"
+            size="md"
+            onClick={toggleSidebar}
+            width="54px"
+            alignSelf={isOpen ? "flex-start" : "center"} // Center the icon when collapsed
+            ml={isOpen ? 3 : 0} // Align with other buttons when open
         >
           <Menu />
         </IconButton>
@@ -67,7 +99,8 @@ export default function Sidebar() {
         <ColorModeButton
             position="absolute"
             bottom="4"
-            left="4"
+            left={isOpen ? "4" : "50%"} // Center the toggle when collapsed
+            transform={isOpen ? "none" : "translateX(-50%)"} // Exact centering logic
         />
       </Box>
   );
diff --git a/client/src/pages/home/tabs/MyDashboard.jsx b/client/src/pages/home/tabs/MyDashboard.jsx
index 05f2c24..e56f765 100644
--- a/client/src/pages/home/tabs/MyDashboard.jsx
+++ b/client/src/pages/home/tabs/MyDashboard.jsx
@@ -15,7 +15,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
 
 export default function MyDashboard() {
     // 🌗 Let's adjust for our light and dark mode
-    const frameBg = useColorModeValue("gray.100", "gray.800");
+    const frameBg = useColorModeValue("gray.100", "#1E1E2B");
     const titleColor = useColorModeValue("gray.800", "gray.100");
     const iconColor = useColorModeValue("gray.600", "gray.400");
     const iconHoverBg = useColorModeValue("gray.100", "gray.700");