Improve donation page design by removing title and fixing step indicator
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:
@@ -150,9 +150,9 @@ export default function Donate() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const StepIndicator = () => (
|
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 */}
|
{/* 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 ${
|
<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-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
|
||||||
}`}>
|
}`}>
|
||||||
@@ -162,9 +162,10 @@ export default function Donate() {
|
|||||||
{t.donate.stepDetails}
|
{t.donate.stepDetails}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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 */}
|
{/* 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 ${
|
<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-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border"
|
||||||
}`}>
|
}`}>
|
||||||
@@ -219,7 +220,6 @@ export default function Donate() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-12 max-w-5xl">
|
<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 />
|
<StepIndicator />
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
|
||||||
|
|||||||
Reference in New Issue
Block a user