---
phase: 06-chat-ui-redesign
plan: 03
type: execute
wave: 2
depends_on: [06-01]
files_modified:
- tauri-app/src/features/settings/SettingsPage.tsx
- tauri-app/src/features/settings/SettingsPage.css
autonomous: true
requirements: [UI-03]
must_haves:
truths:
- "Settings page left nav panel uses Manus surface color (#1E1E1E) and correct border color (#262626)"
- "Settings cards/sections use Manus elevated color (#262626) background"
- "Section titles use Manus primary text (#F3F4F6), descriptions use secondary text (#9CA3AF)"
- "Two-panel layout is preserved and fully functional"
artifacts:
- path: "tauri-app/src/features/settings/SettingsPage.css"
provides: "Updated sp-nav, sp-card, sp-section CSS with Manus tokens"
contains: "var(--manus-surface)"
- path: "tauri-app/src/features/settings/SettingsPage.tsx"
provides: "SettingsPage with Manus Tailwind token classes applied"
key_links:
- from: "tauri-app/src/features/settings/SettingsPage.css"
to: "tauri-app/src/index.css"
via: "var(--manus-surface), var(--manus-elevated), var(--manus-tx), var(--manus-tx2)"
pattern: "var\\(--manus-"
---
Apply Manus design tokens to the Settings page: update the left-nav panel, card/section backgrounds, and text colors while preserving the existing two-panel layout.
Purpose: Visual consistency — Settings must match the chat UI's Manus dark theme.
Output: Updated SettingsPage.css (sp-nav, sp-card, sp-section selectors) and SettingsPage.tsx (Tailwind token classes on inline-styled elements). The --manus-* CSS vars (created in plan 06-02) are the token source.
@$HOME/.config/opencode/get-shit-done/workflows/execute-plan.md
@$HOME/.config/opencode/get-shit-done/templates/summary.md
@.planning/PROJECT.md
@.planning/phases/06-chat-ui-redesign/06-RESEARCH.md
@.planning/phases/06-chat-ui-redesign/06-01-SUMMARY.md
@tauri-app/src/features/settings/SettingsPage.tsx
@tauri-app/src/features/settings/SettingsPage.css
@tauri-app/src/index.css
SettingsPage BEM class mapping to update (from SettingsPage.css):
```
.sp-nav → left panel container → bg: var(--manus-surface) border: var(--manus-elevated)
.sp-nav-item → nav list items → text: var(--manus-tx2) hover bg: var(--manus-elevated)
.sp-nav-item.active → active nav item → text: var(--manus-tx) bg: var(--manus-elevated)
.sp-card → content cards → bg: var(--manus-elevated) border: var(--manus-hover)
.sp-section → section wrappers → no change needed (inherit)
.sp-section-title → section headings → color: var(--manus-tx)
.sp-section-desc → section descriptions → color: var(--manus-tx2)
.sp-label → field labels → color: var(--manus-tx2)
.sp-input → text inputs → bg: var(--manus-surface) border: var(--manus-elevated) color: var(--manus-tx)
.sp-select → select elements → bg: var(--manus-surface) border: var(--manus-elevated) color: var(--manus-tx)
.sp-page → full page container → bg: var(--bg) [already set via --bg]
```
Manus design tokens available after plan 06-02:
```css
var(--manus-base): #171717 /* page bg */
var(--manus-surface): #1E1E1E /* nav, inputs, cards bg */
var(--manus-elevated): #262626 /* card bg, borders */
var(--manus-hover): #333333 /* hover states, borders on cards */
var(--manus-tx): #F3F4F6 /* primary text */
var(--manus-tx2): #9CA3AF /* secondary text, labels */
var(--manus-tx3): #52525B /* muted text */
var(--manus-blue): #3B82F6 /* accent */
```
SettingsPage.tsx — inline Tailwind patterns (lines ~571-644 already use Tailwind):
- HF search area uses classes like `flex`, `gap-2`, `text-sm` — extend these with manus token classes
- Nav items in TSX that use inline styles — switch to `className` with manus token names
Task 1: Update SettingsPage.css with Manus token variables
tauri-app/src/features/settings/SettingsPage.css
Read `SettingsPage.css` fully, then replace hardcoded hex values for the key class groups with Manus CSS vars. Do NOT restructure the CSS — only update background, border, and color property values. Target classes:
**Left nav panel:**
```css
.sp-nav {
background: var(--manus-surface); /* was hardcoded bg */
border-right: 1px solid var(--manus-elevated);
}
.sp-nav-item {
color: var(--manus-tx2);
}
.sp-nav-item:hover {
background: var(--manus-elevated);
color: var(--manus-tx);
}
.sp-nav-item.active, .sp-nav-item[data-active="true"] {
background: var(--manus-elevated);
color: var(--manus-tx);
}
```
**Content cards:**
```css
.sp-card {
background: var(--manus-elevated);
border: 1px solid var(--manus-hover);
}
```
**Section text:**
```css
.sp-section-title {
color: var(--manus-tx);
}
.sp-section-desc {
color: var(--manus-tx2);
}
.sp-label {
color: var(--manus-tx2);
}
```
**Form fields:**
```css
.sp-input, .sp-select {
background: var(--manus-surface);
border-color: var(--manus-elevated);
color: var(--manus-tx);
}
.sp-input:focus, .sp-select:focus {
border-color: var(--manus-blue);
outline: none;
}
```
**Page container:**
```css
.sp-page {
background: var(--bg); /* picks up updated #171717 */
}
```
Strategy: Read each targeted selector's current rules, replace ONLY the `background`, `border`, `color` values — keep all padding, margin, flex, font-size, and other layout properties exactly as-is. If a property uses `var(--bg)` or `var(--text)` already (and those were updated in plan 06-02), it will inherit the correct Manus value automatically — no change needed for those.
cd tauri-app && npm run build 2>&1 | grep -E "error" | head -10
SettingsPage.css updated — .sp-nav uses var(--manus-surface), .sp-card uses var(--manus-elevated), text uses var(--manus-tx) / var(--manus-tx2). No layout changes.
Task 2: Update SettingsPage.tsx inline color classes to Manus tokens
tauri-app/src/features/settings/SettingsPage.tsx
Read `SettingsPage.tsx`. Find all locations where color or background classes are applied inline in JSX as Tailwind utilities or inline style attributes — these should use Manus token Tailwind classes (added in plan 06-02).
**Specific replacements:**
1. Any `bg-[#0d1115]` or `bg-[#12171d]` or `bg-[#171d24]` → replace with `bg-manus-surface` or `bg-manus-elevated` as appropriate for the element role (nav bg = surface, card bg = elevated).
2. Any `text-[#a0a9b4]` or `text-gray-400` used for labels/descriptions → `text-manus-tx2`
3. Any `text-[#f2f4f7]` or `text-white` used for primary content text → `text-manus-tx`
4. Any `border-[#1e252d]` or similar border colors → `border-manus-elevated`
5. HF search area (lines ~571-644): If using raw hex Tailwind classes, switch to manus token versions
**Do NOT change:**
- Any `className` attributes that already use the existing `c-*` Tailwind token names (they inherit via CSS vars updated in plan 06-02)
- Layout properties (flex, grid, padding, gap, margin, width, height)
- Component structure, logic, or event handlers
- The `.sp-*` BEM class names (those are handled in Task 1 via CSS)
- Any dynamic or conditional class logic — preserve as-is
If SettingsPage.tsx has very few inline hex classes (the RESEARCH notes it mostly uses `.sp-*` BEM classes), this task may be small. Confirm by reading the file — if all coloring is done via `.sp-*` CSS classes (already handled in Task 1), this task only needs to verify correctness and make no changes. Still create the SUMMARY confirming the audit.
cd tauri-app && npm run build 2>&1 | tail -10
TypeScript build passes. SettingsPage.tsx uses Manus token classes or inherits via updated CSS vars. No hardcoded hex colors for backgrounds/text remain in inline JSX.
- `npm run build` passes clean
- SettingsPage.css `.sp-nav` uses `var(--manus-surface)` for background
- SettingsPage.css `.sp-card` uses `var(--manus-elevated)` for background
- SettingsPage.css `.sp-section-title` uses `var(--manus-tx)` for color
- Two-panel layout is visually intact (no layout regressions)
- Settings page accessible and all sections navigable
- Settings page left nav is #1E1E1E (Manus surface), not navy-black
- 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