From 7bab71ce040634ab185d63fe25144662e50762e1 Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Sat, 6 Jun 2026 08:23:29 +0000
Subject: [PATCH] Improve spacing and color of donation progress indicator

Adjusted the stepper container width to reduce spacing between steps and updated the active step color to a darker green (#176B43) in `artifacts/ehsan-poc/src/pages/donate.tsx`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1fa9329f-0cec-4a2f-80e8-e26dbae3142e
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d1c7e1cc-09e6-46f0-98ae-caec9c38ab3b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/4d696b13-86f2-4c9d-be0d-95b293430047/1fa9329f-0cec-4a2f-80e8-e26dbae3142e/B0UcG3G
Replit-Helium-Checkpoint-Created: true
---
 artifacts/ehsan-poc/src/pages/donate.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/artifacts/ehsan-poc/src/pages/donate.tsx b/artifacts/ehsan-poc/src/pages/donate.tsx
index f63d550..b35a9fe 100644
--- a/artifacts/ehsan-poc/src/pages/donate.tsx
+++ b/artifacts/ehsan-poc/src/pages/donate.tsx
@@ -150,28 +150,28 @@ export default function Donate() {
   };
 
   const StepIndicator = () => (
-    <div className="flex items-start justify-center mb-10 w-full max-w-xs mx-auto">
+    <div className="flex items-start justify-center mb-10 w-full max-w-[12rem] mx-auto">
       {/* Step 1 - Details */}
       <div className="flex flex-col items-center gap-1.5 shrink-0">
         <div className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold border-2 ${
-          step >= 1 ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
+          step >= 1 ? "bg-[#176B43] text-white border-[#176B43]" : "bg-background text-muted-foreground border-border"
         }`}>
           {step > 1 ? <Check className="w-4 h-4" /> : "1"}
         </div>
-        <span className={`text-xs font-medium ${step >= 1 ? "text-primary" : "text-muted-foreground"}`}>
+        <span className={`text-xs font-medium ${step >= 1 ? "text-[#176B43]" : "text-muted-foreground"}`}>
           {t.donate.stepDetails}
         </span>
       </div>
       {/* Connector - continuous line aligned to circle centers */}
-      <div className={`flex-1 h-0.5 mt-[17px] ${step >= 2 ? "bg-primary" : "bg-border"}`} />
+      <div className={`flex-1 h-0.5 mt-[17px] ${step >= 2 ? "bg-[#176B43]" : "bg-border"}`} />
       {/* Step 2 - Payment */}
       <div className="flex flex-col items-center gap-1.5 shrink-0">
         <div className={`w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold border-2 ${
-          step >= 2 ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
+          step >= 2 ? "bg-[#176B43] text-white border-[#176B43]" : "bg-background text-muted-foreground border-border"
         }`}>
           2
         </div>
-        <span className={`text-xs font-medium ${step >= 2 ? "text-primary" : "text-muted-foreground"}`}>
+        <span className={`text-xs font-medium ${step >= 2 ? "text-[#176B43]" : "text-muted-foreground"}`}>
           {t.donate.stepPayment}
         </span>
       </div>