diff --git a/COMPONENT_IMPLEMENTATION_CHECKLIST.md b/COMPONENT_IMPLEMENTATION_CHECKLIST.md new file mode 100644 index 0000000..74c067f --- /dev/null +++ b/COMPONENT_IMPLEMENTATION_CHECKLIST.md @@ -0,0 +1,856 @@ +# Component Implementation Checklist + +Step-by-step guide to implementing UI improvements in each component. + +--- + +## Setup (Do First) + +### 1. Create Design Tokens + +**File: `C:\Users\micro\Documents\dev\respira-web\src\styles\design-tokens.css`** + +```css +@theme { + /* Primary - Blue */ + --color-primary: #2563eb; + --color-primary-light: #3b82f6; + --color-primary-dark: #1d4ed8; + + /* Secondary - Slate */ + --color-secondary: #64748b; + --color-secondary-light: #94a3b8; + + /* Success - Green */ + --color-success: #16a34a; + --color-success-bg: #dcfce7; + + /* Warning - Amber */ + --color-warning: #d97706; + --color-warning-bg: #fef3c7; + + /* Danger - Red */ + --color-danger: #dc2626; + --color-danger-bg: #fee2e2; + + /* Info - Cyan */ + --color-info: #0891b2; + --color-info-bg: #cffafe; + + /* Neutral */ + --color-neutral-50: #f9fafb; + --color-neutral-100: #f3f4f6; + --color-neutral-200: #e5e7eb; + --color-neutral-300: #d1d5db; + --color-neutral-600: #4b5563; + --color-neutral-900: #111827; +} +``` + +- [ ] Create file +- [ ] Add all color tokens + +### 2. Update App.css + +**File: `C:\Users\micro\Documents\dev\respira-web\src\App.css`** + +```css +@import "tailwindcss"; +@import "./styles/design-tokens.css"; + +/* Custom animations for shimmer effect */ +@keyframes shimmer { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} +``` + +- [ ] Import design tokens +- [ ] Verify shimmer animation exists + +--- + +## Component Updates + +### App.tsx + +**File: `C:\Users\micro\Documents\dev\respira-web\src\App.tsx`** + +#### Changes: +1. Header background gradient +2. Grid gap spacing +3. Error message styling + +**Line 90 - Header gradient:** +```tsx +// BEFORE +
+ +// AFTER +
+``` + +**Line 111-118 - Error messages:** +```tsx +// BEFORE +
+ +// AFTER +
+ Error: {machine.error} +
+``` + +**Line 120-123 - Info message:** +```tsx +// BEFORE +
+ +// AFTER +
+ Initializing Python environment... +
+``` + +**Line 126 - Grid gap:** +```tsx +// BEFORE +
+ +// AFTER +
+``` + +- [ ] Update header background +- [ ] Update error styling +- [ ] Update info message styling +- [ ] Increase grid gap +- [ ] Test responsive layout + +--- + +### WorkflowStepper.tsx + +**File: `C:\Users\micro\Documents\dev\respira-web\src\components\WorkflowStepper.tsx`** + +#### Changes: +1. Progress line thickness +2. Step circle size +3. Text size and contrast +4. Semantic colors + +**Line 64-73 - Progress lines:** +```tsx +// BEFORE +
+
+ +// AFTER +
+
+``` + +**Line 85-98 - Step circles:** +```tsx +// BEFORE +
+ +// AFTER +
+ {isComplete ? ( + {/* was w-5 h-5 */} + ) : ( + step.id + )} +
+``` + +**Line 101-105 - Step labels:** +```tsx +// BEFORE +
+ +// AFTER +
+ {step.label} +
+``` + +- [ ] Update progress line (h-1, top-5) +- [ ] Increase circle size (w-10 h-10) +- [ ] Use semantic colors (success, primary) +- [ ] Increase text size (text-sm) +- [ ] Improve contrast (blue-100 vs blue-300) +- [ ] Add shadow to current step +- [ ] Enlarge check icon + +--- + +### MachineConnection.tsx + +**File: `C:\Users\micro\Documents\dev\respira-web\src\components\MachineConnection.tsx`** + +#### Changes: +1. Button styling (Connect, Disconnect) +2. Status badge border +3. Auto-refresh indicator +4. Error/info boxes +5. Semantic colors + +**Line 78-81 - Connect button:** +```tsx +// BEFORE + +``` + +**Line 68-73 - Auto-refresh indicator:** +```tsx +// BEFORE + + + Auto-refreshing + + +// AFTER + + + Auto-refreshing + +``` + +**Line 116-120 - Status badge:** +```tsx +// BEFORE + + +// AFTER + + {stateVisual.icon} + {machineStatusName} + +``` + +**Line 141-144 - Disconnect button:** +```tsx +// BEFORE + +``` + +**Line 88-95 - Informational message:** +```tsx +// BEFORE +
+ +// AFTER +
+``` + +- [ ] Update Connect button (primary colors, states) +- [ ] Update Disconnect button (danger color, states) +- [ ] Add border to status badge +- [ ] Enhance auto-refresh indicator +- [ ] Use semantic colors throughout +- [ ] Add ARIA labels +- [ ] Remove grayscale filters + +--- + +### FileUpload.tsx + +**File: `C:\Users\micro\Documents\dev\respira-web\src\components\FileUpload.tsx`** + +#### Changes: +1. Choose File button styling +2. Upload button styling +3. Pattern information grid +4. Progress bar + +**Line 106-108 - Choose File label:** +```tsx +// BEFORE +