Skip to content

feat(dashboard): dark theme redesign + accounts table optimization#29

Open
garywhat wants to merge 1 commit into
vibe-coding-labs:mainfrom
garywhat:feat/dashboard-dark-theme
Open

feat(dashboard): dark theme redesign + accounts table optimization#29
garywhat wants to merge 1 commit into
vibe-coding-labs:mainfrom
garywhat:feat/dashboard-dark-theme

Conversation

@garywhat

Copy link
Copy Markdown

Summary

Apply a data-dense dark theme to the entire dashboard UI and streamline the accounts list page to fix column overflow/misalignment.

Theme (all pages)

  • New CSS variable system: bg #020617, card #0E1223, accent #22C55E
  • Fira Sans (UI) + Fira Code (data/API keys/code blocks) typography
  • ConfigProvider tokens + per-component dark overrides for Card, Table, Menu, Input, Select, Button, Tag, Modal, Tooltip, Segmented, etc.
  • Auth pages (Login/Setup/ForgotPassword/OAuthError): dark radial gradient backdrop + logo card replacing the old green gradient
  • Skeleton loading states for Dashboard, Settings, AccountDetail
  • Semantic chart palette with gradient fills + dark tooltip styling

Dashboard

  • Replace green gradient banner with dark accent header + KPI grid
  • Charts use semantic colors (primary green, danger red, info blue)

Accounts list optimization

Users reported action buttons misaligning due to too many columns. After comparing with the account detail page, the following changes were made:

  • Remove redundant "用户 ID" column (available in detail page; masked version adds little value in list)
  • Remove "状态" column (merged into account name as a green star icon for default accounts)
  • Action buttons: text labels → icon-only with tooltips (column width 280px → 168px)
  • Add scroll={{x:1080}} + size="small" to prevent column compression on narrow screens
  • Tighten column widths (drag 40→36, token 180→160, etc.)

README

Comprehensive rewrite with quick start, config, deployment, API reference, FAQ, and contribution sections.

Test plan

  • npm run build passes (TypeScript + Vite)
  • Go build passes (static assets embedded)
  • Verified all pages render correctly via browser automation:
    • Dashboard: KPI grid, charts, banner
    • Accounts: table with icon-only action buttons, no overflow
    • Settings: form fields, password change
    • Login/Setup/ForgotPassword/OAuthError: dark auth pages
  • Verified header alignment (status tags left, GitHub/logout right)
  • Verified accounts action column with test account (4 icon buttons render correctly)

Generated with Devin

Apply a data-dense dark theme to the entire dashboard UI and streamline
the accounts list page to fix column overflow/misalignment.

Theme (all pages):
- New CSS variable system: bg #020617, card #0E1223, accent #22C55E
- Fira Sans (UI) + Fira Code (data/API keys/code blocks) typography
- ConfigProvider tokens + per-component dark overrides for Card, Table,
  Menu, Input, Select, Button, Tag, Modal, Tooltip, Segmented, etc.
- Auth pages (Login/Setup/ForgotPassword/OAuthError): dark radial
  gradient backdrop + logo card replacing green gradient
- Skeleton loading states for Dashboard, Settings, AccountDetail
- Semantic chart palette with gradient fills + dark tooltip styling

Dashboard:
- Replace green gradient banner with dark accent header + KPI grid
- Charts use semantic colors (primary green, danger red, info blue)

Accounts list optimization:
- Remove redundant "用户 ID" and "状态" columns (available in detail page
  and merged into account name as a star icon respectively)
- Action buttons: text labels -> icon-only with tooltips (280px -> 168px)
- Add scroll={{x:1080}} + size="small" to prevent column compression
- Tighten column widths (drag 40->36, token 180->160, etc.)

README: comprehensive rewrite with quick start, config, deployment,
API reference, FAQ, and contribution sections.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
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