Merge remote-tracking branch 'origin/20260721_0845_Venessa_addingWidgets' into 20260715_UI_update

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 */}