updated header so all styling is now in the designated themes file

client/src/App.jsx

@@ -1,7 +1,7 @@
 import 'leaflet/dist/leaflet.css';
-import { useEffect } from 'react';
-import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
-import { useRecipe, Grid, GridItem, useDialog, Flex, Heading } from "@chakra-ui/react";
+import {useEffect} from 'react';
+import {Routes, Route, Navigate, Outlet} from 'react-router-dom';
+import {useRecipe, Grid, GridItem, useDialog, Flex, Heading} from "@chakra-ui/react";
 
 // --- NEW AUTH IMPORTS ---
 import useAuthStore from './store/authStore';
@@ -19,80 +19,75 @@ import GlobalMap from "./pages/maps/GlobalMap.jsx";
 import Admin from "./pages/admin/Admin.jsx";
 import MyDashboard from "./pages/home/tabs/MyDashboard.jsx";
 
+export default function App() {
+  // 1. Pull the initialization function from Zustand
+  const checkAuth = useAuthStore((state) => state.checkAuth);
+
+  // 2. Ping Django to verify the HttpOnly cookie the moment the app boots
+  useEffect(() => {
+    checkAuth();
+  }, [checkAuth]);
+
+  return (
+    <Routes>
+      {/* --- Public Routes --- */}
+      <Route path="/login" element={<Login/>}/>
+
+      {/* --- Secure Routes --- */}
+      <Route element={<ProtectedRoute/>}>
+
+        {/* --- Non-Public Routes (Now completely locked down) --- */}
+        <Route element={<AppFoundation/>}>
+
+          <Route path="/home" element={<Home/>}>
+            <Route index 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"/>}/>
+          </Route>
+
+          <Route path="/global-map" element={<GlobalMap/>}/>
+          <Route path="/regional-map" element={<RegionalMap/>}/>
+          <Route path="/volcano" element={<Volcano/>}/>
+          <Route path="/admin" element={<Admin/>}/>
+        </Route>
+
+      </Route>
+
+      {/* --- Redirect Routes --- */}
+      <Route path="/" element={<Navigate to="/home" replace/>}/>
+    </Routes>
+  );
+}
+
+// The fundamental layout of the webpage
 function AppFoundation() {
-  const recipe = useRecipe({ key: "dashboard" });
+  const recipe = useRecipe({key: "dashboard"});
   const styles = recipe();
   const dialog = useDialog();
 
   return (
     <>
-      <DialogPopup dialog={dialog} />
-      <Grid css={styles}
-        templateRows="1fr 11fr"
-        templateColumns="auto 1fr"
-        height="100vh"
-        width="100vw"
-      >
+      <DialogPopup dialog={dialog}/>
+      <Grid css={styles} templateRows="1fr 11fr" templateColumns="auto 1fr">
         <GridItem rowSpan={2} colSpan={1}>
-          <Sidebar />
+          <Sidebar/>
         </GridItem>
         <GridItem rowSpan={1} colSpan={1}>
-          <Header />
+          <Header/>
         </GridItem>
-        <GridItem colSpan={1} width="100%" overflow="auto">
-          <Outlet />
+        <GridItem colSpan={1}>
+          <Outlet/>
         </GridItem>
       </Grid>
     </>
   )
 }
 
-const Placeholder = ({ name }) => (
-    <Flex width="100%" height="100%" align="center" justify="center">
-        <Heading color="gray.500" _dark={{ color: "gray.200" }} size="lg">{name} Dashboard - Coming Soon</Heading>
-    </Flex>
-);
-
-function App() {
-    // 1. Pull the initialization function from Zustand
-    const checkAuth = useAuthStore((state) => state.checkAuth);
-
-    // 2. Ping Django to verify the HttpOnly cookie the moment the app boots
-    useEffect(() => {
-        checkAuth();
-    }, [checkAuth]);
-
-    return (
-        <Routes>
-            {/* --- Public Routes --- */}
-            <Route path="/login" element={<Login />} />
-
-            {/* --- SECURE ROUTES --- */}
-            <Route element={<ProtectedRoute />}>
-
-                {/* --- Non-Public Routes (Now completely locked down) --- */}
-                <Route element={<AppFoundation />}>
-
-                    <Route path="/home" element={<Home />}>
-                        <Route index 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" />} />
-                    </Route>
-
-                    <Route path="/global-map" element={<GlobalMap />} />
-                    <Route path="/regional-map" element={<RegionalMap />} />
-                    <Route path="/volcano" element={<Volcano />} />
-                    <Route path="/admin" element={<Admin />} />
-                </Route>
-
-            </Route>
-
-            {/* --- Redirect Routes --- */}
-            <Route path="/" element={<Navigate to="/home" replace />} />
-        </Routes>
-    );
-}
-
-export default App;
+// A dummy page that acts as a placeholder for pages that aren't developed yet but are navigatable to
+const Placeholder = ({name}) => (
+  <Flex width="100%" height="100%" align="center" justify="center">
+    <Heading color="gray.500" _dark={{color: "gray.200"}} size="lg">{name} Dashboard - Coming Soon</Heading>
+  </Flex>
+);