Modernize dashboard: glassmorphism, gradient stat cards, refined palette
Visual upgrade — keeps same data flow + layout structure, just elevates the look:
Header:
- Glassmorphism: sticky + bg-background/70 + backdrop-blur-xl
- Brand mark: zap icon in accent-tinted gradient box with glow
- Title: 'Command Center' (was 'n8n Workflow Monitor')
- Animated live dot with glow-success on the indicator
Stat cards:
- Gradient: from-card to-transparent
- Icon chip in top-right (per-stat: Power, Activity, CheckCircle, AlertCircle, Gauge)
- Bigger numbers (3xl), tracking-tight
- Color glow classes (glow-success, glow-error, glow-warning) when relevant
- Sub-text under the number for context
- Border-strong on hover
Anomalies:
- Severity-tinted icon chips (error/pending/warning soft backgrounds)
- New 'All clear' state with success glow when zero anomalies
- Each row has hover bg-muted/40
- n8n link in a pill button (border + bg-muted/50)
Workflows + Activity:
- Reusable Panel wrapper with icon + title + meta badge
- Empty states with icon + message + hint
- Status pills: rings + uppercase tracking-wider (looks more 'operator console')
- Scrollable lists (max-h-96) with thin custom scrollbar
- Error rows: subtle red hover bg (error-soft/40)
Palette refinements:
- Background: deeper (#08080a)
- Border: rgba white 8% (more subtle)
- Status: success/emerald, error/rose, warning/amber, pending/yellow
- 'Soft' color tokens for translucent backgrounds
CSS:
- Subtle radial gradient bg (accent top-left, error bottom-right)
- Fixed background-attachment for nice scroll feel
- Custom thin scrollbar
- glow-* utility classes
- fadeIn keyframe
Bundle: 223 KB JS / 69 KB gzipped, 16 KB CSS
David
bac00f617d