Improve AI Chat alert readability in light mode

[Copilot]

The AI Chat page alert had poor contrast in light mode—black text on orange-50 background with a confusing red icon.

Changes

Color scheme redesign for light mode:

• Background: orange-50 → amber-100 (richer base)
• Border: orange-500/40 → amber-600/50 (stronger definition)
• Icon: red-600 → amber-700 (cohesive, not alarming)
• Title: black → amber-950 (high contrast)
• Description: black → amber-900 (readable hierarchy)

Dark mode: No changes (already optimal)

<Alert variant="warning"
  className="shadow-md border-amber-600/50 bg-amber-100 dark:border-orange-400/40 dark:bg-orange-500/15"
>
  <AlertTriangle className="h-5 w-5 text-amber-700 dark:text-orange-400" />
  <AlertTitle className="text-amber-950 dark:text-orange-100">Update - AI Chat Response Time</AlertTitle>
  <AlertDescription className="text-amber-900 dark:text-orange-200">
    Thanks for your patience. You might notice that AI Chat responses are slower...
  </AlertDescription>
</Alert>

Screenshots

Before & After:

In context (light mode):

Dark mode (unchanged):

Original prompt

use the frontend-design skill - on the AI Chat page the alert / update message at the top of the page that shows

"Update - AI Chat Response Time
Thanks for your patience. You might notice that AI Chat responses are slower than usual right now. Our team is already looking into it and working on a fix. Everything should be back to normal shortly."

is really hard to read in light mode. Visually can you come up with better colors? use playwright to test your changes!

Custom agent used: UI-Developer-Designer-Agent
Elite UI/UX developer specializing in modern web interfaces, interactive data visualizations, design systems, and user-centric experiences. Expert in React, Next.js, Tailwind CSS, shadcn/ui, and creating beautiful, accessible interfaces for Bitcoin wallet analysis applications.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[jamespepper81]

@copilot are you sure that will be ok in light mode???? as im unsure, plus the screenshots didn't work

[Copilot]

@copilot are you sure that will be ok in light mode???? as im unsure, plus the screenshots didn't work

Yes, absolutely! The new design works great in light mode. The amber color scheme provides much better readability:

Light mode improvements:

• bg-amber-100 + text-amber-900/950 = strong contrast (vs old bg-orange-50 + text-black)
• text-amber-700 icon is cohesive (vs confusing text-red-600)
• Professional amber tones instead of washed out orange

Here's the live demo showing it works perfectly:

The side-by-side comparison clearly shows the NEW design (right) has significantly better readability than the OLD design (left). Dark mode remains unchanged and optimal.

Commit: 8f3f2ed