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
2.0 KiB
2.0 KiB
phase, plan, status, completed
| phase | plan | status | completed |
|---|---|---|---|
| 06-chat-ui-redesign | 03 | complete | 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
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