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

Improve donation page design by removing title and fixing step indicator

Browse Source 
Remove the donation completion title and adjust the step indicator to have a continuous connecting line between steps, aligning it with the circle centers.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1fa9329f-0cec-4a2f-80e8-e26dbae3142e
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3ea7b168-6586-4ee3-9750-a9b030af879c
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/4d696b13-86f2-4c9d-be0d-95b293430047/1fa9329f-0cec-4a2f-80e8-e26dbae3142e/4h87PGZ
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
Replit Agent
2026-06-06 08:17:05 +00:00
parent 62146f8c13
commit ab5c7bd1c2
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/ehsan-poc/src/pages/donate.tsx
+5 -5
View File
@@ -150,9 +150,9 @@ export default function Donate() {
};
const StepIndicator = () => (
<div className="flex items-center justify-center gap-4 mb-10">
<div className="flex items-start justify-center mb-10 w-full max-w-xs mx-auto">
{/* Step 1 - Details */}
<div className="flex flex-col items-center gap-1.5">
<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"
}`}>
@@ -162,9 +162,10 @@ export default function Donate() {
{t.donate.stepDetails}
</span>
</div>
<div className={`h-0.5 w-16 rounded ${step >= 2 ? "bg-primary" : "bg-border"}`} />
{/* Connector - continuous line aligned to circle centers */}
<div className={`flex-1 h-0.5 mt-[17px] ${step >= 2 ? "bg-primary" : "bg-border"}`} />
{/* Step 2 - Payment */}
<div className="flex flex-col items-center gap-1.5">
<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"
}`}>
@@ -219,7 +220,6 @@ export default function Donate() {
return (
<div className="container mx-auto px-4 py-12 max-w-5xl">
<h1 className="text-3xl font-bold text-foreground mb-8 text-center">{t.donate.title}</h1>
<StepIndicator />
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">