chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
vkuchenik
2026-07-22 09:40:41 -07:00
parent 764bf07ac8
commit 35eea905a3
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.jsx
+3 -3
View File
@@ -48,8 +48,8 @@ function AppFoundation() {
} }
const Placeholder = ({ name }) => ( const Placeholder = ({ name }) => (
<Flex width="100%" height="100%" align="center" justify="center" bg="gray.50" _dark={{ bg: "gray.900" }}> <Flex width="100%" height="100%" align="center" justify="center">
<Heading color="gray.400" _dark={{ bg: "gray.600" }} size="md">{name} Dashboard - Coming Soon</Heading> <Heading color="gray.500" _dark={{ color: "gray.200" }} size="lg">{name} Dashboard - Coming Soon</Heading>
</Flex> </Flex>
); );
@@ -75,7 +75,7 @@ function App() {
<Route path="/home" element={<Home />}> <Route path="/home" element={<Home />}>
<Route index element={<MyDashboard />} /> <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="seismic" element={<Placeholder name="Seismic" />} />
<Route path="remote" element={<Placeholder name="Remote Sensing" />} /> <Route path="remote" element={<Placeholder name="Remote Sensing" />} />
<Route path="daily" element={<Placeholder name="Daily Activity" />} /> <Route path="daily" element={<Placeholder name="Daily Activity" />} />
client/src/pages/home/Home.jsx
+12 -12
View File
@@ -10,17 +10,17 @@ export default function Home() {
// 1. CSS making this look like how we want it, TODO turn to theme? // 1. CSS making this look like how we want it, TODO turn to theme?
const tabStyles = { const tabStyles = {
fontSize: "lg", fontSize: "lg",
fontWeight: "normal", fontWeight: "bold",
color: "fg.muted", color: "fg.muted",
px: 4, // Horizontal padding px: 2, // Horizontal padding
py: 2, // Vertical padding // py: 2, // Vertical padding
borderBottom: "2px solid transparent", borderBottom: "1px solid transparent",
mb: "-2px", // 🔥 The trick: Pulls the active border down to overlap the container's line
transition: "all 0.2s", transition: "all 0.2s",
_hover: { color: "fg" }, _hover: { color: "fg" },
_activeLink: {
color: "color", // Or whatever your primary text color is "&.active": { // Target the active class applied by React Router NavLink
borderColor: "currentColor", // The active underline 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%"> <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 */} {/* 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" 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/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> </Flex>
{/* EDIT MODE BUTTONS & CONTROLS */} {/* EDIT MODE BUTTONS & CONTROLS */}