From 501719f77ae656d5b3a0e5de049828568fa0a86c Mon Sep 17 00:00:00 2001 From: M Zubair Date: Wed, 14 Jan 2026 22:14:29 +0100 Subject: [PATCH] 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 --- ui/index.html | 2 +- ui/src/App.tsx | 46 +- ui/src/components/AddFeatureForm.tsx | 11 +- ui/src/components/AssistantChat.tsx | 2 +- ui/src/components/AssistantFAB.tsx | 3 +- ui/src/components/AssistantPanel.tsx | 21 +- ui/src/components/ChatMessage.tsx | 33 +- ui/src/components/ConfirmDialog.tsx | 8 +- ui/src/components/DebugLogViewer.tsx | 72 +-- ui/src/components/DevServerControl.tsx | 6 +- ui/src/components/EditFeatureForm.tsx | 11 +- ui/src/components/ExpandProjectChat.tsx | 37 +- ui/src/components/FeatureCard.tsx | 37 +- ui/src/components/FeatureModal.tsx | 29 +- ui/src/components/FolderBrowser.tsx | 22 +- ui/src/components/KanbanColumn.tsx | 6 +- ui/src/components/NewProjectModal.tsx | 57 +- ui/src/components/ProgressDashboard.tsx | 12 +- ui/src/components/ProjectSelector.tsx | 4 +- ui/src/components/QuestionOptions.tsx | 42 +- ui/src/components/SettingsModal.tsx | 12 +- ui/src/components/SetupWizard.tsx | 2 +- ui/src/components/SpecCreationChat.tsx | 31 +- ui/src/components/TerminalTabs.tsx | 10 +- ui/src/styles/globals.css | 694 ++++++++++++++++++++---- ui/tsconfig.tsbuildinfo | 2 +- 26 files changed, 911 insertions(+), 301 deletions(-) diff --git a/ui/index.html b/ui/index.html index e566b9a..afbdba2 100644 --- a/ui/index.html +++ b/ui/index.html @@ -7,7 +7,7 @@ AutoCoder - +
diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 50b0297..0ddcbbe 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -6,6 +6,7 @@ import { useFeatureSound } from './hooks/useFeatureSound' import { useCelebration } from './hooks/useCelebration' const STORAGE_KEY = 'autocoder-selected-project' +const DARK_MODE_KEY = 'autocoder-dark-mode' import { ProjectSelector } from './components/ProjectSelector' import { KanbanBoard } from './components/KanbanBoard' import { AgentControl } from './components/AgentControl' @@ -20,7 +21,7 @@ import { AssistantPanel } from './components/AssistantPanel' import { ExpandProjectModal } from './components/ExpandProjectModal' import { SettingsModal } from './components/SettingsModal' import { DevServerControl } from './components/DevServerControl' -import { Loader2, Settings } from 'lucide-react' +import { Loader2, Settings, Moon, Sun } from 'lucide-react' import type { Feature } from './lib/types' function App() { @@ -42,6 +43,13 @@ function App() { const [assistantOpen, setAssistantOpen] = useState(false) const [showSettings, setShowSettings] = useState(false) const [isSpecCreating, setIsSpecCreating] = useState(false) + const [darkMode, setDarkMode] = useState(() => { + try { + return localStorage.getItem(DARK_MODE_KEY) === 'true' + } catch { + return false + } + }) const queryClient = useQueryClient() const { data: projects, isLoading: projectsLoading } = useProjects() @@ -50,6 +58,20 @@ function App() { useAgentStatus(selectedProject) // Keep polling for status updates const wsState = useProjectWebSocket(selectedProject) + // Apply dark mode class to document + useEffect(() => { + if (darkMode) { + document.documentElement.classList.add('dark') + } else { + document.documentElement.classList.remove('dark') + } + try { + localStorage.setItem(DARK_MODE_KEY, String(darkMode)) + } catch { + // localStorage not available + } + }, [darkMode]) + // Play sounds when features move between columns useFeatureSound(features) @@ -170,9 +192,9 @@ function App() { } return ( -
+
{/* Header */} -
+
{/* Logo and Title */} @@ -215,7 +237,7 @@ function App() { {/* GLM Mode Badge */} {settings?.glm_mode && ( GLM @@ -223,6 +245,16 @@ function App() { )} )} + + {/* Dark mode toggle - always visible */} +
@@ -238,7 +270,7 @@ function App() {

Welcome to AutoCoder

-

+

Select a project from the dropdown above or create a new one to get started.

@@ -265,11 +297,11 @@ function App() { features.done.length === 0 && wsState.agentStatus === 'running' && (
- +

Initializing Features...

-

+

The agent is reading your spec and creating features. This may take a moment.

diff --git a/ui/src/components/AddFeatureForm.tsx b/ui/src/components/AddFeatureForm.tsx index 16e7b7e..834022c 100644 --- a/ui/src/components/AddFeatureForm.tsx +++ b/ui/src/components/AddFeatureForm.tsx @@ -87,13 +87,13 @@ export function AddFeatureForm({ projectName, onClose }: AddFeatureFormProps) {
{/* Error Message */} {error && ( -
+
{error} @@ -166,8 +166,11 @@ export function AddFeatureForm({ projectName, onClose }: AddFeatureFormProps) {
{steps.map((step, index) => ( -
- +
+ {index + 1} +