UI refinement#44
Merged
Merged
Conversation
Restructure CSS custom properties into a comprehensive token system (spacing, typography, radius, z-index, transitions, surfaces, text, accent, status, shadows) with full light/dark theme coverage. Add Inter font from Google Fonts. Create shared.module.css with composable utility classes. Add global interactive element defaults and prefers-reduced-motion support. Legacy variable aliases preserve backward compatibility with existing components.
…s, pill theme toggle - Extract Header and Footer into standalone components from Layout.tsx - Footer: minimal 28px bar showing version injected via Vite define - Header: 48px slim bar with design token styling, user info pill badge - Theme toggle: pill-shaped sun/moon toggle using Lucide React icons - Add lucide-react dependency, declare __APP_VERSION__ global type - Update Layout.module.css to use design token transition durations - Update tests for new component structure
…cons, size variants Restyle Modal with frosted backdrop blur, open animation, Lucide X close button, and standardized size variants (sm/md/lg). Update ConfirmDialog CSS to use design tokens. Migrate all Modal consumers to new size prop values.
… tokens, skeleton loading - Stable CSS Grid with named areas prevents layout shift when sections appear/disappear - Polling issues section always renders with empty state instead of conditionally removed - Summary cards use border-left status color accent with design tokens - Unstable deps bars colored by health status (not meaningless yellow) - Background refreshes use opacity fade instead of replacing content - Initial load shows skeleton placeholders matching grid layout - Health overview always renders, shows empty state when no services - Recent activity uses minimal dot timeline instead of large icon circles - All spacing, typography, colors use design system tokens - Updated tests for new loading skeleton and always-rendered sections
Split TeamDetail into 5 tabs: Overview, Members, Manifests, Services, and Alerts Config. Uses reusable Tabs component with URL-persisted state and localStorage fallback. Replaced inline SVGs with Lucide icons, applied design tokens throughout. Updated tests to handle tabbed navigation.
Split ServiceDetail into four tabs (Overview, Dependencies, Dependent Reports, Poll Issues) using the reusable Tabs component. Replace inline SVGs with Lucide icons. Add empty state for external/inactive services on Poll Issues tab. Update tests to navigate tabs before asserting tab-specific content.
Clicking a dependency name now opens a focused detail modal showing health status, metadata, latency chart, and contact information. Lead/admin users get an Edit Overrides button that transitions to the existing edit modal.
Replace inline SVGs with Lucide React icons throughout the graph page. Apply design system tokens (spacing, typography, colors, transitions) to toolbar, settings dropdown, NodeDetailsPanel, and EdgeDetailsPanel. Add slide-in animation and slim scrollbar to side panels. Add grouped section headers to settings dropdown.
Replace hardcoded CSS values with design system tokens across Wallboard, DependencyDetailPanel, and ServiceDetailPanel. Replace inline SVGs with Lucide React icons (Settings, Loader2, X, ChevronRight, AlertCircle). Add consistent dot+label status badges, slim scrollbars, and proper transition tokens throughout.
…kens and Lucide icons
… and dark theme overrides with design tokens
…, Tabs component, and tabbed views
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Comprehensive UI refinement pass across the entire client application. Establishes a design token system, modernizes all pages with consistent styling, introduces reusable components (Tabs, Modal sizes, theme toggle), and adds a team overview stats dashboard. This branch touches 108 files with ~6,700 additions and ~4,800 deletions, replacing ad-hoc styles with a cohesive design system.
Changes
Design System Foundation
index.cssstyles/shared.module.cssSummaryCards.module.cssfor stat cards and health bars used by Dashboard and Team OverviewReusable Components
Tabscomponent with URL-persisted state (useParams+localStoragefallback)ModalandConfirmDialogpolish — design tokens, Lucide icons, size variants (sm/md/lg)HeaderandFooterextracted into standalone components with pill-style theme toggleSearchableSelectandStatusBadgepolished with design tokens and Lucide iconsPage Refactors
TeamDetail— refactored into tabbed layout (Overview, Members, Manifests, Services, Alerts Config)ServiceDetail— refactored into tabbed layout with dependency detail modal (latency chart + contact info)Dashboard— stable CSS Grid layout, named grid areas, skeleton loading statesTeam Overview Stats (new)
TeamOverviewStatscomponent with 4 summary cards: Members (role breakdown), Services (active/inactive/manifest-managed), Service Health (healthy/warning/critical), Dependencies (total count)useTeamServiceHealthhook fetchingGET /api/services?team_id={id}for health + dependency dataTabPanel— only fetches when overview tab is activeDocumentation
10-client-architecture.md) with design tokens, Tabs component, and tabbed viewsREADME.mdwith current functionalityTesting
npm test)npm run lint)New tests:
useTeamServiceHealthhook — stats computation, dependency counting, loading/error states, reload behavior (6 tests)TeamOverviewStatscomponent — member/service/health/dependency card rendering, health bar, error states (7 tests)Results: 2987 server tests passed, 1493 client tests passed
Checklist