Evandro Fonseca Junior
2d893daf07
- 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
65 lines
2.6 KiB
Markdown
65 lines
2.6 KiB
Markdown
---
|
|
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 |