mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-03-18 11:23:08 +00:00
feat(ui): comprehensive design system improvements
This PR addresses 53 design issues identified in the UI codebase, implementing a more consistent and polished neobrutalism design system. Typography: - Improved font stacks with proper fallbacks - Added font smoothing for crisp text rendering Color/Theme: - Added neutral scale (50-900) for consistent grays - Added semantic log level colors with dark mode variants - Added category colors for feature cards - Added GLM badge color variable - Full dark mode support for all new variables Design Tokens: - Spacing scale (xs to 2xl) - Z-index scale (dropdown to toast) - Border radius tokens - Inset shadow variants Animations: - New transition timing variables - New easing curves (bounce, smooth, out-back) - Slide-in animations (top/bottom/left) - Bounce, shake, scale-pop animations - Stagger delay utilities - Enhanced YOLO fire effect with parallax layers Components: - Button size variants (sm/lg/icon) and loading state - Input variants (error/disabled/textarea) - Badge color and size variants - Card elevation variants (elevated/flat/sunken) - Progress bar shimmer animation - Stronger modal backdrop with blur - Neobrutalist tooltips - Enhanced empty state with striped pattern Component Fixes: - Replaced hardcoded colors with CSS variables - Fixed ProgressDashboard percentage alignment - Improved ChatMessage role-specific styling - Consistent category badge colors in FeatureModal - Improved step input styling in forms Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -92,7 +92,7 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
|
||||
className="neo-btn text-sm py-2 px-3"
|
||||
style={isCrashed ? {
|
||||
backgroundColor: 'var(--color-neo-danger)',
|
||||
color: '#ffffff',
|
||||
color: 'var(--color-neo-text-on-bright)',
|
||||
} : undefined}
|
||||
title={isCrashed ? "Dev Server Crashed - Click to Restart" : "Start Dev Server"}
|
||||
aria-label={isCrashed ? "Restart Dev Server (crashed)" : "Start Dev Server"}
|
||||
@@ -112,7 +112,7 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
|
||||
className="neo-btn text-sm py-2 px-3"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-neo-progress)',
|
||||
color: '#ffffff',
|
||||
color: 'var(--color-neo-text-on-bright)',
|
||||
}}
|
||||
title="Stop Dev Server"
|
||||
aria-label="Stop Dev Server"
|
||||
@@ -134,7 +134,7 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
|
||||
className="neo-btn text-sm py-2 px-3 gap-1"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-neo-progress)',
|
||||
color: '#ffffff',
|
||||
color: 'var(--color-neo-text-on-bright)',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
title={`Open ${url} in new tab`}
|
||||
|
||||
Reference in New Issue
Block a user