libredb / libredb/libredb-studio

Admin health gauges use a hardcoded white track that vanishes in the light theme

Open Beginner friendly
#856 1 comment 0 reactions 0 assignees View on GitHub
bug good first issue
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.