style: rework user message styling from violet to cyan theme

Replace violet tint with cyan/teal tones to match the existing cyan accent
theme. User messages now use from-cyan-900/20 background gradient and
cyan-400/15 border, with cyan-200 user icon. Subtler and more cohesive
with the dark theme while remaining clearly distinct from assistant messages.

Fixes feedback #44
This commit is contained in:
Nicolas Varrot
2026-02-12 23:10:03 +00:00
parent 9fb9f76bdb
commit 3ca76ebe26
2 changed files with 14 additions and 2 deletions

View File

@@ -465,3 +465,15 @@
- It should only appear when the content exceeds the max height (overflow)
- Use overflow-y: auto instead of overflow-y: scroll on the textarea
- The scrollbar should be hidden when the textarea hasn't reached its max size
## Item #44
- **Date:** 2026-02-12
- **Priority:** high
- **Status:** pending
- **Description:** User message styling from #42 needs rework — too dark and off-brand
- **Details:**
- The violet tint from #42 is too dark and doesn't fit the color scheme
- Use a lighter, more visible differentiation — try cyan/teal tones instead of violet (matches the existing cyan accent theme)
- Could use a lighter background (slightly brighter than assistant messages) or a colored left border
- Keep it subtle but clearly distinguishable
- Test against the zinc dark theme to make sure it's readable for keratoconus (no harsh contrast)

View File

@@ -293,7 +293,7 @@ export function ChatMessageComponent({ message, onRetry }: { message: ChatMessag
{/* Avatar */}
<div className="shrink-0 mt-1 flex h-9 w-9 items-center justify-center rounded-2xl border border-white/8 bg-zinc-800/40">
{isUser
? <User className="h-4 w-4 text-violet-200" />
? <User className="h-4 w-4 text-cyan-200" />
: <Bot className="h-4 w-4 text-cyan-200" />
}
</div>
@@ -302,7 +302,7 @@ export function ChatMessageComponent({ message, onRetry }: { message: ChatMessag
<div className={`min-w-0 max-w-[80%] ${isUser ? 'text-right' : ''}`}>
<div className={`group relative inline-block text-left rounded-3xl px-4 py-3 text-sm leading-relaxed max-w-full overflow-hidden ${
isUser
? 'bg-gradient-to-b from-violet-900/20 to-zinc-900/60 text-zinc-200 border border-violet-400/15'
? 'bg-gradient-to-b from-cyan-900/20 to-zinc-900/60 text-zinc-200 border border-cyan-400/15'
: 'bg-zinc-800/40 text-zinc-300 border border-white/8 shadow-[0_0_0_1px_rgba(255,255,255,0.03)]'
}`}>
{/* Copy button (assistant messages only) */}