From 7ac197ba97310c28e14b1855ecd3c54dec1a443c Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 02:13:23 +0000
Subject: [PATCH] Change budget bar color

Change the color of the budget progress bar to yellow when the budget exceeds 90%.
---
 src/components/BudgetCard.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/BudgetCard.tsx b/src/components/BudgetCard.tsx
index 263c123..747c9f3 100644
--- a/src/components/BudgetCard.tsx
+++ b/src/components/BudgetCard.tsx
@@ -29,6 +29,9 @@ const BudgetCard: React.FC<BudgetCardProps> = ({
     maximumFractionDigits: 0
   }).format(total);
   
+  // Determine progress bar color based on percentage
+  const progressBarColor = percentage >= 90 ? 'bg-yellow-400' : `bg-${color}`;
+  
   return (
     <div className="neuro-card">
       <h3 className="text-sm font-medium text-gray-600 mb-1">{title}</h3>
@@ -40,7 +43,7 @@ const BudgetCard: React.FC<BudgetCardProps> = ({
       
       <div className="relative h-3 neuro-pressed overflow-hidden">
         <div 
-          className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-${color}`}
+          className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${progressBarColor}`}
           style={{ width: `${percentage}%` }}
         />
       </div>