Skip to content

fix: dashboard light theme, error states, and barrel exports#45

Merged
pratyush618 merged 4 commits intomasterfrom
fix/dashboard-light-theme-errors
Mar 22, 2026
Merged

fix: dashboard light theme, error states, and barrel exports#45
pratyush618 merged 4 commits intomasterfrom
fix/dashboard-light-theme-errors

Conversation

@pratyush618
Copy link
Copy Markdown
Collaborator

Summary

  • Fix light theme for canvas charts — grid lines, axis labels, and gradients now adapt to dark/light mode
  • Fix shimmer skeleton animation in light mode (was using dark-only CSS variables)
  • Add error state UI for all 11 pages — shows WifiOff icon, error message, and Retry button when backend is unreachable
  • Add barrel export index files for all 6 source directories and consolidate imports

Changes

Light theme fixes

  • throughput-chart.tsx and timeseries-chart.tsx read theme signal to select canvas colors
  • index.css adds light-mode shimmer gradient override

Error states

  • New ErrorState component (components/ui/error-state.tsx)
  • All 11 pages destructure error and refetch from useApi and show ErrorState before Loading

Barrel exports

  • New index.ts in api/, hooks/, components/ui/, components/layout/, charts/, lib/
  • All imports consolidated: e.g., 6 separate ../components/ui/* imports become 1 line from ../components/ui

Test plan

  • npm run ci passes (biome + tsc + build)
  • Light mode: charts show visible grid lines and text on white background
  • Light mode: skeleton shimmer shows light gray gradient, not dark bars
  • Backend down: all pages show "Unable to load data" with Retry button
  • Retry button refetches and loads data when backend comes back
  • uv run python -m pytest tests/python/test_dashboard.py -q passes

Canvas charts now read the theme signal and use appropriate colors
for grid lines, axis labels, and gradients in both dark and light
mode. Shimmer skeleton animation has separate light-mode gradient
using slate colors instead of dark surface variables.
New ErrorState component with WifiOff icon, error message, and
Retry button. All 11 page components now check the error return
from useApi and show ErrorState when the backend is unreachable.
Previously, failed API calls resulted in blank pages with no
feedback.
Add index.ts barrel files for api/, hooks/, components/ui/,
components/layout/, charts/, and lib/ directories. Update all
imports across pages, charts, and components to use barrel
exports instead of direct file paths. Reduces import clutter
from 6-10 lines to 3-4 per file.
Replace semi-transparent bg-slate-50/50 with solid bg-white so
the sidebar is readable in light mode. Dark mode uses solid
bg-surface-2 instead of 50% opacity.
@pratyush618 pratyush618 merged commit 6a66eb0 into master Mar 22, 2026
11 checks passed
@pratyush618 pratyush618 deleted the fix/dashboard-light-theme-errors branch March 31, 2026 17:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant