feat(ui): complete Plan 06-03 - Settings page Manus design alignment

- 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
This commit is contained in:
Evandro Fonseca Junior committed 2026-04-02 09:11:21 -03:00
1 parent 2d893daf07
commit 4a867b36ff
3 files changed
+86 -21

No files matched your search

@@ -14,8 +14,8 @@
.sp-nav {
width: 220px;
min-width: 220px;
background: var(--bg2);
border-right: 1px solid var(--border);
background: var(--manus-surface);
border-right: 1px solid var(--manus-elevated);
display: flex;
flex-direction: column;
height: 100vh;
@@ -66,13 +66,13 @@
}
.sp-nav-item:hover {
background: var(--bg3);
color: var(--text);
background: var(--manus-elevated);
color: var(--manus-tx);
}
.sp-nav-item--active {
background: var(--bg4);
color: var(--text);
background: var(--manus-elevated);
color: var(--manus-tx);
font-weight: 500;
}
@@ -182,14 +182,14 @@
.sp-section-title {
font-size: 24px;
font-weight: 600;
color: var(--text);
color: var(--manus-tx);
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.sp-section-desc {
font-size: 14px;
color: var(--text3);
color: var(--manus-tx2);
line-height: 1.5;
}
@@ -230,8 +230,8 @@
/* ── Card (continuous, macOS/Linear style) ── */
.sp-card {
background: var(--bg2);
border: 1px solid var(--border);
background: var(--manus-elevated);
border: 1px solid var(--manus-hover);
border-radius: 12px;
overflow: hidden;
}
@@ -622,10 +622,10 @@
/* ── Inputs ── */
.sp-input {
background: var(--bg3);
border: 1px solid transparent;
background: var(--manus-surface);
border: 1px solid var(--manus-elevated);
border-radius: 8px;
color: var(--text);
color: var(--manus-tx);
font-size: 13px;
padding: 8px 12px;
outline: none;
@@ -634,13 +634,13 @@
}
.sp-input:hover {
border-color: var(--border);
border-color: var(--manus-hover);
}
.sp-input:focus {
border-color: var(--accent);
background: var(--bg4);
box-shadow: 0 0 0 1px var(--accent);
border-color: var(--manus-blue);
background: var(--manus-elevated);
box-shadow: 0 0 0 1px var(--manus-blue);
}
.sp-input:disabled {