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:
12
FEEDBACK.md
12
FEEDBACK.md
@@ -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)
|
||||
|
||||
@@ -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) */}
|
||||
|
||||
Reference in New Issue
Block a user