David
bac00f617d
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
67 lines
1.8 KiB
JavaScript
67 lines
1.8 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
darkMode: 'class',
|
|
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Surfaces — refined for a premium dark look
|
|
border: 'rgba(255, 255, 255, 0.08)',
|
|
'border-strong': 'rgba(255, 255, 255, 0.14)',
|
|
background: '#08080a',
|
|
foreground: '#fafafa',
|
|
muted: {
|
|
DEFAULT: 'rgba(255, 255, 255, 0.04)',
|
|
foreground: '#a1a1aa',
|
|
},
|
|
card: {
|
|
DEFAULT: 'rgba(255, 255, 255, 0.025)',
|
|
foreground: '#fafafa',
|
|
},
|
|
// Status — slightly desaturated for refinement
|
|
success: '#22c55e',
|
|
'success-soft': 'rgba(34, 197, 94, 0.12)',
|
|
error: '#f43f5e',
|
|
'error-soft': 'rgba(244, 63, 94, 0.12)',
|
|
warning: '#f59e0b',
|
|
'warning-soft': 'rgba(245, 158, 11, 0.12)',
|
|
pending: '#eab308',
|
|
'pending-soft': 'rgba(234, 179, 8, 0.12)',
|
|
info: '#60a5fa',
|
|
accent: '#60a5fa',
|
|
},
|
|
borderRadius: {
|
|
xl: '0.75rem',
|
|
'2xl': '1rem',
|
|
},
|
|
fontFamily: {
|
|
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
|
|
sans: [
|
|
'ui-sans-serif',
|
|
'system-ui',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'sans-serif',
|
|
],
|
|
},
|
|
backdropBlur: {
|
|
xs: '2px',
|
|
},
|
|
animation: {
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
'fade-in': 'fadeIn 0.3s ease-out',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0', transform: 'translateY(4px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|