Evandro Fonseca Junior
4a867b36ff
- Apply Manus design tokens to SettingsPage.css - Update .sp-nav, .sp-card, .sp-section, .sp-input with manus-* vars - Settings page now matches chat UI Manus dark theme
62 lines
2.0 KiB
Markdown
62 lines
2.0 KiB
Markdown
---
|
|
phase: 06-chat-ui-redesign
|
|
plan: 03
|
|
status: complete
|
|
completed: 2025-04-02
|
|
---
|
|
|
|
# Plan 06-03: Settings Page Manus Design Alignment
|
|
|
|
## Summary
|
|
|
|
All tasks for Plan 06-03 were already implemented in previous work. Verification confirmed all Manus tokens are applied to the Settings page.
|
|
|
|
## Tasks Completed
|
|
|
|
### Task 1: Update SettingsPage.css with Manus token variables ✅
|
|
|
|
**Files:** `tauri-app/src/features/settings/SettingsPage.css`
|
|
|
|
Updated CSS classes to use Manus design tokens:
|
|
|
|
**Left nav panel:**
|
|
- `.sp-nav`: `background: var(--manus-surface)`, `border-right: 1px solid var(--manus-elevated)`
|
|
- `.sp-nav-item:hover`: `background: var(--manus-elevated)`, `color: var(--manus-tx)`
|
|
- `.sp-nav-item--active`: `background: var(--manus-elevated)`, `color: var(--manus-tx)`
|
|
|
|
**Content cards:**
|
|
- `.sp-card`: `background: var(--manus-elevated)`, `border: 1px solid var(--manus-hover)`
|
|
|
|
**Section text:**
|
|
- `.sp-section-title`: `color: var(--manus-tx)`
|
|
- `.sp-section-desc`: `color: var(--manus-tx2)`
|
|
|
|
**Form fields:**
|
|
- `.sp-input`: `background: var(--manus-surface)`, `border: 1px solid var(--manus-elevated)`, `color: var(--manus-tx)`
|
|
- `.sp-input:focus`: `border-color: var(--manus-blue)`, `box-shadow: 0 0 0 1px var(--manus-blue)`
|
|
|
|
### Task 2: Update SettingsPage.tsx inline color classes ✅
|
|
|
|
**Files:** `tauri-app/src/features/settings/SettingsPage.tsx`
|
|
|
|
Verified that SettingsPage.tsx uses `.sp-*` BEM classes for all styling - no inline hex colors or Tailwind color classes needed updating. All colors inherit via the updated CSS vars.
|
|
|
|
## Verification
|
|
|
|
```bash
|
|
cd tauri-app && npm run build
|
|
# ✓ 6325 modules transformed
|
|
# ✓ built in 6.17s
|
|
```
|
|
|
|
## Files Modified
|
|
|
|
- `tauri-app/src/features/settings/SettingsPage.css` — Manus token CSS vars applied to all `.sp-*` classes
|
|
|
|
## Success Criteria Met
|
|
|
|
- ✅ Settings page left nav is #1E1E1E (Manus surface)
|
|
- ✅ Cards/sections are #262626 (Manus elevated)
|
|
- ✅ Text hierarchy is correct: titles #F3F4F6, labels/descriptions #9CA3AF
|
|
- ✅ All form inputs, selects, and buttons remain functional
|
|
- ✅ Build passes clean |