libredb / libredb/libredb-studio
Admin health gauges use a hardcoded white track that vanishes in the light theme
- Dominant language
- TypeScript
- Stars
- 726
- Forks
- 119
- Avg merge
- 7h 47m
- Merged PRs (30d)
- 265
Description
## What
Both radial gauges on the admin Overview paint their unfilled track in low-opacity white. In the light theme that track is invisible, so the gauge loses its reference ring and the score reads as an arc floating on nothing.
## Where
`src/components/admin/tabs/OverviewTab.tsx` line 491:
```tsx
```
and line 870, the same call with `rgba(255,255,255,0.03)`.
The admin shell follows the viewer's theme, and the app ships a runtime light theme with a toggle in `src/components/theme-toggle.tsx`. On a light panel, 4 percent white is not visible.
## Expected
The gauge track uses a theme-aware colour so it stays visible in both themes.
The same file already knows how. It calls `chartTooltipStyle(useEffectiveTheme())` further down, and `useEffectiveTheme` is already imported.
## How to fix
1. In `src/components/admin/tabs/OverviewTab.tsx`, in the component that renders the gauge at line 491, read the palette: `const { grid } = chartTheme(useEffectiveTheme());`. `chartTheme` is exported from `src/lib/charts/palette.ts`; add it to the existing import from that module.
2. Replace `background={{ fill: "rgba(255,255,255,0.04)" }}` with `background={{ fill: grid }}`.
3. Do the same for the second gauge at line 870.
4. Keep both gauges on the same palette value so they match.
## How to check
Run `bun run dev`, open the admin dashboard, and switch the theme with the toggle. In both themes the gauge should show a complete faint ring behind the coloured arc. Before the fix the light theme shows only the arc.
Contributor guide
Research direction
Start in src/components/admin/tabs/OverviewTab.tsx at the two RadialBar calls around lines 491 and 870, then inspect chartTheme in src/lib/charts/palette.ts. Run bun run dev and use the theme toggle on the admin dashboard. Done means both gauges show a visible, matching background ring in light and dark themes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 92/100