Skip to content

style: unified frosted glass aesthetic for AskBarView and ConversationView#67

Merged
quiet-node merged 1 commit intomainfrom
worktree-typed-hugging-clarke
Apr 8, 2026
Merged

style: unified frosted glass aesthetic for AskBarView and ConversationView#67
quiet-node merged 1 commit intomainfrom
worktree-typed-hugging-clarke

Conversation

@quiet-node
Copy link
Copy Markdown
Owner

Summary

  • Applies the warm ambient aesthetic from the approved onboarding screens to the main chat UI
  • All changes are CSS-only in App.css — no layout, animation, or component logic touched
  • Brings visual consistency between the onboarding flow and the core AskBarView + ConversationView

Changes

  • Warm surface tokens: base surface shifted from neutral rgba(26,26,28) to warm dark rgba(22,18,15,0.98), matching onboarding panel warmth
  • Radial gradient glow: top of morphing container now has the signature warm orange radial gradient (ellipse 70% 40% at 50% 0%) present in both approved onboarding screens
  • Top border accent: border-top-color: rgba(255,141,92,0.2) + ::before glowing line pseudo-element at the top edge
  • AI chat bubble: warmed from neutral gray rgba(50,50,56) to rgba(36,30,26) with a subtle top border accent
  • Shadow fix: removed wide-spread glow layers (60-80px) that were being clipped by the native window transparent padding

Test Plan

  • 472 frontend tests pass (bun run test)
  • Full validate-build passes with zero warnings/errors
  • Visual: compact ask-bar mode shows warm surface + glow at top
  • Visual: expanded chat mode maintains same treatment, smooth morph
  • Visual: no shadow clipping at window edges

🤖 Generated with Claude Code

…sationView

Brings the main chat UI in line with the approved onboarding screens:

- Warm dark surface base (rgba(22,18,15,0.98)) replacing the neutral gray
- Warm elevated surface (rgba(38,30,24,0.6)) for consistency
- Radial gradient glow at top of morphing container (signature warm ambient touch)
- Top border accent (rgba(255,141,92,0.2)) matching onboarding panel treatment
- Glowing line pseudo-element at top edge via ::before
- AI chat bubble warmed to rgba(36,30,26,0.95) with top border accent
- Shadow tokens tightened: removed wide-spread glow that caused native window clipping

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>
@quiet-node
Copy link
Copy Markdown
Owner Author

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

🤖 Generated with Claude Code

If this code review was useful, please react with 👍. Otherwise, react with 👎.

@quiet-node quiet-node merged commit 6d44097 into main Apr 8, 2026
5 of 6 checks passed
@quiet-node quiet-node deleted the worktree-typed-hugging-clarke branch April 8, 2026 04:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant