evandro/ForgeLM
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8afd2cbfed2bf667b9472a859fb98ec7d064d5df
ForgeLM/.planning/phases/06-chat-ui-redesign/06-02-SUMMARY.md
T
Evandro Fonseca Junior 2d893daf07 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
2026-04-02 09:10:02 -03:00

2.6 KiB
Raw Blame History

phase, plan, status, completed_at
phase plan status completed_at
06-chat-ui-redesign 02 complete 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

  • App background is neutral dark (#171717), not navy-black
  • Thinking state shows "● Thinking" (pulsing blue dot + text), not three bouncing dots
  • Send button is a paper plane icon, no text label
  • User and assistant messages share same max reading width (800px)
  • Build passes clean
Reference in new issue View Git Blame Copy Permalink