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)
|
- It should only appear when the content exceeds the max height (overflow)
|
||||||
- Use overflow-y: auto instead of overflow-y: scroll on the textarea
|
- 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
|
- 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 */}
|
{/* 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">
|
<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
|
{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" />
|
: <Bot className="h-4 w-4 text-cyan-200" />
|
||||||
}
|
}
|
||||||
</div>
|
</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={`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 ${
|
<div className={`group relative inline-block text-left rounded-3xl px-4 py-3 text-sm leading-relaxed max-w-full overflow-hidden ${
|
||||||
isUser
|
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)]'
|
: '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) */}
|
{/* Copy button (assistant messages only) */}
|
||||||
|
|||||||
Reference in New Issue
Block a user