David/WFDASH-WEBAPP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(modal): re-tint AI Insights section from info (blue) to warn (yellow)

Browse source 
The AI Insights section was info-blue while the modal's outer border
and the popover's AI card are warn-yellow. The mixed cool/warm
palette felt disjointed. Switching the section to warm warn tones
makes the yellow border feel intentional rather than decorative.

- border-info/20 → border-warn/40 (heavier, with shadow-warn/10 so
  the section has a soft glow)
- bg-info/5 → bg-warn/5
- text-info → text-warn-foreground (Sparkles icon, "AI Insights"
  label, chevrons, suggestion-available pill, Use AI button)
- Use AI button: border-info/30 → border-warn/40, hover bg-info/10
  → hover bg-warn/10

Co-authored-by: Orca <help@stably.ai>
This commit is contained in:
SJCoetz 2026-07-30 14:14:45 +02:00
parent 0007408f14
commit b9dfec8d28
1 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/order-sprint-process-modal.tsx
View file

@ -324,8 +324,11 @@ export function OrderSprintProcessModal({ item, suppliers, open, onClose, onProc
<CardContent className="flex-1 overflow-y-auto space-y-5 p-5">
{/* AI Insights — tinted section so it reads as distinct from
the deterministic history below it. */}
<section className="rounded-lg border border-info/20 bg-info/5 p-3 space-y-2">
the deterministic history below it. Warm warn tones
(yellow/amber) match the modal's outer border and the
popover's AI card, so the warm accent reads as a
cohesive theme across the buying flow. */}
<section className="rounded-lg border border-warn/40 bg-warn/5 p-3 space-y-2 shadow-sm shadow-warn/10">
<div className="flex items-center justify-between gap-2">
<button
type="button"
@ -334,16 +337,16 @@ export function OrderSprintProcessModal({ item, suppliers, open, onClose, onProc
className="flex items-center gap-2 text-left"
>
{aiInsightsExpanded ? (
<ChevronUp className="h-4 w-4 text-info/70" />
<ChevronUp className="h-4 w-4 text-warn/70" />
) : (
<ChevronDown className="h-4 w-4 text-info/70" />
<ChevronDown className="h-4 w-4 text-warn/70" />
)}
<Sparkles className="h-4 w-4 text-info" />
<span className="text-xs font-semibold uppercase tracking-wide text-info">
<Sparkles className="h-4 w-4 text-warn-foreground" />
<span className="text-xs font-semibold uppercase tracking-wide text-warn-foreground">
AI Insights
</span>
{aiHasMatches && (
<span className="ml-1 rounded-full bg-info/15 px-1.5 py-0.5 text-[10px] font-medium text-info">
<span className="ml-1 rounded-full bg-warn/20 px-1.5 py-0.5 text-[10px] font-medium text-warn-foreground ring-1 ring-inset ring-warn/30">
suggestion available
</span>
)}
@ -353,7 +356,7 @@ export function OrderSprintProcessModal({ item, suppliers, open, onClose, onProc
variant="outline"
onClick={applyAiSuggestion}
disabled={!aiHasMatches}
className="border-info/30 text-info hover:bg-info/10 hover:text-info"
className="border-warn/40 text-warn-foreground hover:bg-warn/10 hover:text-warn-foreground"
title={aiHasMatches ? "Pull supplier + cost from AI's top match" : "No AI matches to apply"}
>
<Wand2 className="h-3 w-3 mr-1" />