feat(dashboard): Hyperswitch-style UI refresh#249
Conversation
Align dashboard visual design with Hyperswitch design system: Inter font, blue brand color (#006df9), clean sidebar/topbar, card/button border-radius, and fix error state bleeding across Decision Explorer tabs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Move Hyperswitch theme/CSS changes (tailwind, index.css, Card, Button, Sidebar, AppShell) to feat/dashboard-ui-refresh (PR #249), keeping this branch focused on auth changes only. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Updates the dashboard UI styling to better match a Hyperswitch-like design system (brand blue, Inter font, tighter borders/radii), refreshes sidebar branding, and fixes Decision Explorer tab error state leaking across tabs.
Changes:
- Updated Tailwind
brandpalette and switched default sans font to Inter. - Refreshed core UI components/layout (Sidebar, AppShell, Card, Button) to new spacing, borders, and rounded styles.
- Added a tab switch helper in Decision Explorer to clear shared error state when changing tabs.
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| website/tailwind.config.ts | Updates brand colors and default font family to Inter. |
| website/src/index.css | Reworks global base styles (background, form controls) and introduces .hs-card utility; removes prior dark-mode text inversion rules. |
| website/src/components/ui/Card.tsx | Updates card styling (borders/radius/padding) to the new visual system. |
| website/src/components/ui/Button.tsx | Updates button variants/sizes and changes default radius and focus ring styling. |
| website/src/components/pages/DecisionExplorerPage.tsx | Clears error on tab change via switchTab. |
| website/src/components/layout/Sidebar.tsx | Replaces logo with Hyperswitch icon and refreshes nav item styling. |
| website/src/components/layout/AppShell.tsx | Updates app background/spacing and removes the aurora top effect. |
| website/public/hyperswitch-icon.png | Adds Hyperswitch icon asset for the sidebar. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="h-16 px-5 flex items-center gap-3 border-b border-[#e6e6ee] dark:border-[#1a1a24]"> | ||
| <img src="/dashboard/hyperswitch-icon.png" alt="Hyperswitch" className="w-8 h-8 rounded-lg" /> | ||
| <div> |
There was a problem hiding this comment.
src="/dashboard/hyperswitch-icon.png" hardcodes the deployment base path. Since the app base is configured in Vite/React Router, this will break if the base path ever changes (or if someone runs the UI under a different prefix). Prefer constructing the URL from import.meta.env.BASE_URL (or using a relative URL that respects the configured base).
| @font-face { | ||
| font-family: 'InterDisplay'; | ||
| src: local('Inter'); | ||
| font-optical-sizing: auto; | ||
| } |
There was a problem hiding this comment.
The @font-face block defines InterDisplay but it isn’t referenced anywhere (the app sets font-family: 'Inter'), and font-optical-sizing is not a valid @font-face descriptor so it will be ignored by browsers. Consider removing this block, or (if you want optical sizing) set font-optical-sizing: auto; on html/body instead and keep a standard @font-face with proper descriptors only when you’re actually serving a custom font file.
| @apply bg-[#222226] !important; | ||
| @apply bg-[#f7f8fa] text-slate-800 dark:bg-[#0d0d14] dark:text-[#f4f4f5] transition-colors duration-300; | ||
| } | ||
|
|
There was a problem hiding this comment.
The PR removes the global dark-mode text color overrides (e.g. .dark .text-slate-900 { color: ... !important; }). There are still many elements using text-slate-900/text-slate-800 without dark: variants (e.g. headings in DecisionExplorerPage/OverviewPage), so in dark mode those will render near-black on a dark background and become unreadable. Either restore the global dark-mode overrides for these common Tailwind text classes, or update the affected components to use explicit dark:text-* classes.
| .dark .text-slate-900 { | |
| color: #f4f4f5 !important; | |
| } | |
| .dark .text-slate-800 { | |
| color: #e4e4e7 !important; | |
| } |
Summary
#006df9brand color, clean borders)Test plan
rounded-lg(notrounded-full)#f7f8fa(no purple-grey tint)🤖 Generated with Claude Code