fix(ui): fix TabNav appearance in light theme#42
Conversation
TabNav was using bg-white/5 (transparent white) which renders as a dark semi-transparent overlay in light mode, making tabs hard to see. Replaced with theme-aware CSS classes: - Dark mode: keeps the original subtle dark background - Light mode: uses a visible slate background with readable text colors Closes #41
There was a problem hiding this comment.
Pull request overview
Fixes TabNav styling so the dashboard tabs render appropriately in light theme by moving the container/inactive styling to theme-aware CSS overrides driven by the existing .light-mode root class.
Changes:
- Add global CSS rules for
.tabnav-containerand.tabnav-inactivewith light-mode overrides. - Update
TabNavto use the new CSS hook classes instead ofbg-white/5and the previous hover background utility.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/src/index.css | Adds theme-aware TabNav container + inactive hover/text styles, including .light-mode overrides. |
| frontend/src/components/TabNav.tsx | Switches TabNav markup to use .tabnav-container / .tabnav-inactive classes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .tabnav-inactive:hover { | ||
| background: rgba(51, 65, 85, 0.5); | ||
| } |
There was a problem hiding this comment.
PR description says dark mode keeps the original TabNav styling, but the inactive hover background has changed from hover:bg-slate-800/50 (≈ rgba(30,41,59,0.5)) to rgba(51,65,85,0.5) (slate-700). If the goal is to preserve the prior dark-mode appearance, align this value with the previous slate-800/50 (or keep the Tailwind class for dark mode and only override in .light-mode).
| active === tab.key | ||
| ? 'bg-blue-500/20 text-blue-400 shadow-sm' | ||
| : 'text-gray-400 hover:text-gray-200 hover:bg-slate-800/50' | ||
| : 'tabnav-inactive text-gray-400 hover:text-gray-200' |
There was a problem hiding this comment.
tabnav-inactive is intended to be theme-aware, but the button still hard-codes dark-mode Tailwind colors (text-gray-400 hover:text-gray-200) in the JSX while light-mode colors live in global CSS. This splits a single concern across two places and makes future styling changes error-prone. Consider moving the default (dark) text/hover colors into the .tabnav-inactive CSS alongside the light-mode overrides, and keep the JSX to structural/spacing classes plus tabnav-inactive.
| : 'tabnav-inactive text-gray-400 hover:text-gray-200' | |
| : 'tabnav-inactive' |
Merge pull request #42 from BenediktSchackenberg/fix/ui-theme-bugs-40-41
Problem
Dashboard tabs appeared dark even when the light theme was selected (#41).
The TabNav component used
bg-white/5(5% white opacity) which renders as a dark semi-transparent overlay in light mode.Fix
Replaced with theme-aware CSS classes via
.tabnav-container:Closes #41