hammam/Ehsan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve spacing and color of donation progress indicator

Browse Source 
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
This commit is contained in:
Replit Agent
2026-06-06 08:23:29 +00:00
parent a56b72a63e
commit 7bab71ce04
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/ehsan-poc/src/pages/donate.tsx
+6 -6
View File
@@ -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>