Fixed the tabs in the canvas not transitioning colors to black when active and Updated canvas coloring in 'coming soon' pages

client/src/App.jsx

@@ -48,8 +48,8 @@ function AppFoundation() {
 }
 
 const Placeholder = ({ name }) => (
-    <Flex width="100%" height="100%" align="center" justify="center" bg="gray.50" _dark={{ bg: "gray.900" }}>
-        <Heading color="gray.400" _dark={{ bg: "gray.600" }} size="md">{name} Dashboard - Coming Soon</Heading>
+    <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>
 );
 
@@ -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" />} />

client/src/pages/home/Home.jsx

@@ -10,17 +10,17 @@ export default function Home() {
   // 1. CSS making this look like how we want it, TODO turn to theme?
   const tabStyles = {
     fontSize: "lg",
-    fontWeight: "normal",
+    fontWeight: "bold",
     color: "fg.muted",
-    px: 4,                   // Horizontal padding
-    py: 2,                   // Vertical padding
-    borderBottom: "2px solid transparent",
-    mb: "-2px",              // 🔥 The trick: Pulls the active border down to overlap the container's line
+    px: 2,                   // Horizontal padding
+    // py: 2,                   // Vertical padding
+    borderBottom: "1px solid transparent",
     transition: "all 0.2s",
     _hover: { color: "fg" },
-    _activeLink: {
-      color: "color",        // Or whatever your primary text color is
-      borderColor: "currentColor", // The active underline
+
+    "&.active": {         // Target the active class applied by React Router NavLink
+      color: "fg",
+      borderColor: "fg",
     }
   };
 
@@ -31,12 +31,12 @@ export default function Home() {
         <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
 
           {/* TABS CONTAINER - Replicates the Tabs.List line container */}
-          <Flex borderBottom="2px solid" borderColor="border.muted" gap={2}>
+          <Flex borderBottom="1px solid" borderColor="fg.muted" gap={2}>
             <Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
-            <Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
-            <Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
-            <Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
             <Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</Box>
+            <Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
+            <Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
+            <Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
           </Flex>
 
           {/* EDIT MODE BUTTONS & CONTROLS */}