feat(ui): complete Plan 06-02 - Manus color tokens, thinking indicator, send button
- Apply Manus design tokens to index.css and tailwind.config.js - Replace three-dot thinking indicator with pulsing blue dot + 'Thinking' text - Change send button icon from ArrowUp to PaperPlaneRight - Align message and input widths to 800px max
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
cb722e79a6
commit
2d893daf07
4 files changed
+127
-34
No files matched your search
@@ -0,0 +1,65 @@
|
||||
---
|
||||
phase: 06-chat-ui-redesign
|
||||
plan: 02
|
||||
status: complete
|
||||
completed_at: "2026-04-02T12:15:00Z"
|
||||
---
|
||||
|
||||
# Plan 06-02 Summary: Chat Screen Redesign
|
||||
|
||||
## Completed Tasks
|
||||
|
||||
### Task 1: Apply Manus color tokens to index.css and tailwind.config.js ✅
|
||||
|
||||
**index.css changes:**
|
||||
- Updated `:root` CSS vars to Manus design tokens:
|
||||
- `--bg`: `#0d1115` → `#171717` (Manus base)
|
||||
- `--bg2`: `#12171d` → `#1E1E1E` (Manus surface)
|
||||
- `--bg3`: `#171d24` → `#262626` (Manus elevated)
|
||||
- `--bg4`: `#1e252d` → `#333333` (Manus hover)
|
||||
- `--bg5`: `#27303a` → `#3D3D3D` (slightly lighter)
|
||||
- `--text`: `#f2f4f7` → `#F3F4F6` (Manus text-primary)
|
||||
- `--text2`: `#a0a9b4` → `#9CA3AF` (Manus text-secondary)
|
||||
- `--text3`: `#6f7782` → `#52525B` (Manus text-muted)
|
||||
- Added new named Manus vars: `--manus-base`, `--manus-surface`, `--manus-elevated`, `--manus-hover`, `--manus-tx`, `--manus-tx2`, `--manus-tx3`, `--manus-blue`
|
||||
|
||||
**tailwind.config.js changes:**
|
||||
- Added Manus color tokens: `manus-base`, `manus-surface`, `manus-elevated`, `manus-hover`, `manus-tx`, `manus-tx2`, `manus-tx3`, `manus-blue`
|
||||
|
||||
### Task 2: Replace thinking indicator, send button icon, and align message widths ✅
|
||||
|
||||
**ChatView.tsx changes:**
|
||||
1. Added `PaperPlaneRight` to phosphor import
|
||||
2. Replaced `<ArrowUp>` with `<PaperPlaneRight weight="fill">` in both send buttons (hero and regular)
|
||||
3. Removed "Send" text label from regular send button (icon-only now)
|
||||
4. Replaced three-dot `.thinking` with Manus-style `.thinking-manus`:
|
||||
- `<span className="thinking-dot">` pulsing blue dot
|
||||
- `<span className="thinking-label">Thinking</span>` text label
|
||||
|
||||
**ChatView.css changes:**
|
||||
1. Replaced `.thinking` bounce animation with `.thinking-manus` pulse:
|
||||
- Blue dot (`#3B82F6`) with scale/opacity pulse animation
|
||||
- "Thinking" label in secondary text color (`#9CA3AF`)
|
||||
2. Updated `.msg-wrapper.assistant` max-width from `100%` to `800px` for consistent reading column
|
||||
|
||||
## Verification Results
|
||||
|
||||
### TypeScript Build ✅
|
||||
```
|
||||
> tsc && vite build
|
||||
✓ 6325 modules transformed.
|
||||
✓ built in 5.83s
|
||||
```
|
||||
|
||||
## Files Modified
|
||||
- `tauri-app/src/index.css` — Manus color tokens
|
||||
- `tauri-app/tailwind.config.js` — Manus Tailwind tokens
|
||||
- `tauri-app/src/components/ChatView.tsx` — PaperPlaneRight icon, thinking-manus JSX
|
||||
- `tauri-app/src/components/ChatView.css` — thinking-manus styles, message width
|
||||
|
||||
## Success Criteria Met
|
||||
- [x] App background is neutral dark (#171717), not navy-black
|
||||
- [x] Thinking state shows "● Thinking" (pulsing blue dot + text), not three bouncing dots
|
||||
- [x] Send button is a paper plane icon, no text label
|
||||
- [x] User and assistant messages share same max reading width (800px)
|
||||
- [x] Build passes clean
|
||||
@@ -661,7 +661,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
.msg-wrapper.user { align-self: flex-end; align-items: flex-end; }
|
||||
.msg-wrapper.assistant { align-self: flex-start; align-items: flex-start; width: 100%; max-width: 100%; }
|
||||
.msg-wrapper.assistant { align-self: flex-start; align-items: flex-start; max-width: 800px; }
|
||||
|
||||
/* ── Bubbles ── */
|
||||
.msg-bubble {
|
||||
@@ -766,31 +766,34 @@
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* ── Thinking bubble (loading dots) ── */
|
||||
.thinking {
|
||||
/* ── Thinking bubble (Manus-style pulsing blue dot) ── */
|
||||
.thinking-manus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 13px 18px;
|
||||
width: fit-content;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.thinking span {
|
||||
.thinking-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #9fd0ff;
|
||||
background: #3B82F6;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
animation: thinking-bounce 1.4s ease-in-out infinite;
|
||||
flex-shrink: 0;
|
||||
animation: thinking-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
.thinking span:nth-child(2) { animation-delay: 0.16s; }
|
||||
.thinking span:nth-child(3) { animation-delay: 0.32s; }
|
||||
@keyframes thinking-bounce {
|
||||
0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
|
||||
40% { transform: translateY(-6px); opacity: 1; }
|
||||
.thinking-label {
|
||||
font-size: 0.875rem;
|
||||
color: #9CA3AF;
|
||||
font-weight: 400;
|
||||
}
|
||||
@keyframes thinking-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.35; transform: scale(0.7); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.thinking span,
|
||||
.thinking-manus,
|
||||
.thinking-dot,
|
||||
.msg-bubble,
|
||||
.queue-clear-btn,
|
||||
.notice-action-btn,
|
||||
|
||||
+34
-18
@@ -2,41 +2,57 @@
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0a1016;
|
||||
--bg2: #0f1721;
|
||||
--bg3: #14202d;
|
||||
--bg4: #182636;
|
||||
--bg5: #203246;
|
||||
--border: #243241;
|
||||
--border2: #344759;
|
||||
--text: #edf5ff;
|
||||
--text2: #93a8bc;
|
||||
--text3: #5d7288;
|
||||
--accent: #48a6ff;
|
||||
--accent2: #2f8ae3;
|
||||
--accent-glow: rgba(72,166,255,0.16);
|
||||
--user-bg: #10263f;
|
||||
--user-border: #214468;
|
||||
--asst-bg: #101924;
|
||||
--asst-border: #243241;
|
||||
/* Updated to Manus design tokens */
|
||||
--bg: #171717; /* Manus bg-base */
|
||||
--bg2: #1E1E1E; /* Manus bg-surface */
|
||||
--bg3: #262626; /* Manus bg-elevated */
|
||||
--bg4: #333333; /* Manus bg-hover */
|
||||
--bg5: #3D3D3D; /* slightly lighter */
|
||||
--border: #232a33;
|
||||
--border2: #313944;
|
||||
--text: #F3F4F6; /* Manus text-primary */
|
||||
--text2: #9CA3AF; /* Manus text-secondary */
|
||||
--text3: #52525B; /* Manus text-muted */
|
||||
--accent: #4b86ff;
|
||||
--accent2: #3674ef;
|
||||
--accent-glow: rgba(75,134,255,0.14);
|
||||
--user-bg: #101c2d;
|
||||
--user-border: #203451;
|
||||
--asst-bg: #10161d;
|
||||
--asst-border: #26303b;
|
||||
--danger: #f04040;
|
||||
--success: #30d158;
|
||||
--warning: #ffd60a;
|
||||
--code-bg: #0d0d10;
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius: 10px;
|
||||
--radius-lg: 14px;
|
||||
--font-sans: "Inter", "Segoe UI Variable", "SF Pro Display", system-ui, sans-serif;
|
||||
--font-serif: "Merriweather", Georgia, serif;
|
||||
--shadow: 0 2px 12px rgba(0,0,0,0.4);
|
||||
--shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* Manus design tokens as named vars (for new components) */
|
||||
:root {
|
||||
--manus-base: #171717;
|
||||
--manus-surface: #1E1E1E;
|
||||
--manus-elevated: #262626;
|
||||
--manus-hover: #333333;
|
||||
--manus-tx: #F3F4F6;
|
||||
--manus-tx2: #9CA3AF;
|
||||
--manus-tx3: #52525B;
|
||||
--manus-blue: #3B82F6;
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: "Segoe UI Variable", "SF Pro Display", "IBM Plex Sans", "Inter", system-ui, sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
|
||||
@@ -20,6 +20,15 @@ export default {
|
||||
"c-danger": "var(--danger)",
|
||||
"c-success": "var(--success)",
|
||||
"c-warn": "var(--warning)",
|
||||
// Manus design tokens
|
||||
"manus-base": "var(--manus-base)",
|
||||
"manus-surface": "var(--manus-surface)",
|
||||
"manus-elevated": "var(--manus-elevated)",
|
||||
"manus-hover": "var(--manus-hover)",
|
||||
"manus-tx": "var(--manus-tx)",
|
||||
"manus-tx2": "var(--manus-tx2)",
|
||||
"manus-tx3": "var(--manus-tx3)",
|
||||
"manus-blue": "var(--manus-blue)",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in new issue
Block a user