From b9dfec8d283b44df5d1a2785b78b8c2f32ce8123 Mon Sep 17 00:00:00 2001
From: SJCoetz <s.coetzee6@my.milpark.ac.za>
Date: Thu, 30 Jul 2026 14:14:45 +0200
Subject: [PATCH] style(modal): re-tint AI Insights section from info (blue) to
 warn (yellow)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/components/order-sprint-process-modal.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/order-sprint-process-modal.tsx b/src/components/order-sprint-process-modal.tsx
index 92d7b32..73810e3 100644
--- a/src/components/order-sprint-process-modal.tsx
+++ b/src/components/order-sprint-process-modal.tsx
@@ -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" />