quikcue/calvana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

brand identity overhaul: match BRAND-IDENTITY.md across all pages

Browse Source 
Design system changes (per brand guide):
- ZERO rounded-2xl/3xl remaining (was 131 instances)
- ZERO bg-gradient remaining (was 25) — all solid colors
- ZERO colored shadows (shadow-trust-blue, etc) — flat, no glow
- ZERO backdrop-blur/glass effects — solid backgrounds
- ZERO emoji in logo marks — square P logomark everywhere
- ZERO decorative scale animations (group-hover:scale-105, etc)

Tailwind config:
- Added brand color names: midnight, promise-blue, generosity-gold, fulfilled-green, alert-red, paper
- Kept legacy aliases (trust-blue, etc) for backwards compat
- --radius: 0.75rem → 0.5rem (tighter corners)

CSS:
- Removed glass, glass-dark, card-hover, pulse-ring, bounce-gentle, confetti-fall, scale-in animations
- Kept only purposeful animations: fadeUp, fadeIn, slideDown, shimmer, counter-roll
- --primary tuned to match Promise Blue exactly

Components:
- Button: removed all colored shadows, added 'blue' variant, removed rounded from sizes
- All UI components: rounded-xl/2xl → rounded-lg

Pages updated (41 files):
- Dashboard layout: solid header (no blur), border-l-2 active indicator, midnight logo mark
- Login/Signup: paper bg (no gradient), midnight logo mark, no emoji
- Pledge flow: solid color icons, no gradient progress bars
- All dashboard pages: flat, sharp, editorial
This commit is contained in:
Omair Saleh
2026-03-03 20:13:22 +08:00
parent f4ad6df45a
commit fc80399092
41 changed files with 282 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pledge-now-pay-later/src/app/p/[token]/loading.tsx
View File

@@ -1,8 +1,8 @@
export default function PledgeLoading() {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5">
<div className="min-h-screen flex items-center justify-center bg-paper">
<div className="text-center space-y-4">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-trust-blue/10 animate-pulse">
<div className="inline-flex items-center justify-center w-14 h-14 bg-trust-blue/10 animate-pulse">
<div className="w-8 h-8 rounded-full bg-trust-blue/30" />
</div>
<p className="text-muted-foreground animate-pulse">Loading pledge page...</p>

12
pledge-now-pay-later/src/app/p/[token]/page.tsx
View File

@@ -189,8 +189,8 @@ export default function PledgePage() {
if (loading) {
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5 gap-4">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center animate-pulse">
<div className="min-h-screen flex flex-col items-center justify-center bg-paper gap-4">
<div className="w-12 h-12 rounded-lg bg-midnight flex items-center justify-center animate-pulse">
<span className="text-white text-xl">🤲</span>
</div>
<p className="text-trust-blue font-medium animate-pulse">Loading...</p>
@@ -200,7 +200,7 @@ export default function PledgePage() {
if (error) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5 p-4">
<div className="min-h-screen flex items-center justify-center bg-paper p-4">
<div className="text-center space-y-4 animate-fade-up">
<div className="text-5xl">😔</div>
<h1 className="text-xl font-bold text-gray-900">Something went wrong</h1>
@@ -260,11 +260,11 @@ export default function PledgePage() {
const progressPercent = progressMap[step] || 10
return (
<div className="min-h-screen bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5">
<div className="min-h-screen bg-paper">
{/* Progress bar */}
<div className="fixed top-0 left-0 right-0 h-1 bg-gray-100 z-50">
<div
className="h-full bg-gradient-to-r from-trust-blue to-success-green transition-all duration-700 ease-out"
className="h-full bg-promise-blue transition-all duration-700 ease-out"
style={{ width: `${progressPercent}%` }}
/>
</div>
@@ -282,7 +282,7 @@ export default function PledgePage() {
{/* Back button */}
{backableSteps.has(step) && (
<div className="fixed bottom-0 left-0 right-0 pb-6 pt-4 px-4 bg-gradient-to-t from-white via-white/80 to-transparent">
<div className="fixed bottom-0 left-0 right-0 pb-6 pt-4 px-4 bg-white">
<button
onClick={() => setStep(getBackStep(step))}
className="text-sm text-muted-foreground hover:text-foreground transition-colors tap-target flex items-center gap-1"

14
pledge-now-pay-later/src/app/p/[token]/steps/amount-step.tsx
View File

@@ -64,7 +64,7 @@ export function AmountStep({ onSelect, eventName, eventId }: Props) {
<div className="max-w-md mx-auto pt-2 space-y-6 animate-fade-up">
{/* Hero */}
<div className="text-center space-y-3">
<div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-trust-blue to-blue-600 shadow-lg shadow-trust-blue/30">
<div className="inline-flex items-center justify-center w-14 h-14 rounded-lg bg-midnight">
<Heart className="h-7 w-7 text-white" />
</div>
<h1 className="text-3xl font-black text-gray-900 tracking-tight">
@@ -80,7 +80,7 @@ export function AmountStep({ onSelect, eventName, eventId }: Props) {
<div className="flex items-center justify-center gap-2 animate-fade-in">
<div className="flex -space-x-2">
{[...Array(3)].map((_, i) => (
<div key={i} className="w-6 h-6 rounded-full bg-gradient-to-br from-trust-blue to-blue-400 border-2 border-white flex items-center justify-center">
<div key={i} className="w-6 h-6 rounded-full bg-promise-blue border-2 border-white flex items-center justify-center">
<span className="text-[8px] text-white font-bold">{["A", "S", "M"][i]}</span>
</div>
))}
@@ -106,9 +106,9 @@ export function AmountStep({ onSelect, eventName, eventId }: Props) {
onMouseEnter={() => setHovering(amount)}
onMouseLeave={() => setHovering(null)}
className={`
relative tap-target rounded-2xl border-2 py-4 text-center font-bold transition-all duration-200
relative tap-target rounded-lg border-2 py-4 text-center font-bold transition-all duration-200
${isSelected
? "border-trust-blue bg-trust-blue text-white shadow-xl shadow-trust-blue/30 scale-[1.03]"
? "border-trust-blue bg-trust-blue text-white"
: isHovering
? "border-trust-blue/40 bg-trust-blue/5 text-gray-900"
: "border-gray-200 bg-white text-gray-900 hover:border-trust-blue/30"
@@ -118,7 +118,7 @@ export function AmountStep({ onSelect, eventName, eventId }: Props) {
<span className="text-xl">£{pounds >= 1000 ? `${pounds / 1000}k` : pounds}</span>
{/* Gift Aid indicator */}
{isSelected && (
<div className="absolute -top-2 -right-2 bg-success-green text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full animate-scale-in shadow-sm">
<div className="absolute -top-2 -right-2 bg-success-green text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full animate-fade-in shadow-sm">
+£{Math.round(amount * 0.25 / 100)}
</div>
)}
@@ -152,14 +152,14 @@ export function AmountStep({ onSelect, eventName, eventId }: Props) {
placeholder="0"
value={custom}
onChange={(e) => handleCustomChange(e.target.value)}
className="w-full pl-10 pr-4 h-16 text-2xl font-black text-center rounded-2xl border-2 border-gray-200 bg-white focus:border-trust-blue focus:ring-4 focus:ring-trust-blue/10 outline-none transition-all"
className="w-full pl-10 pr-4 h-16 text-2xl font-black text-center rounded-lg border-2 border-gray-200 bg-white focus:border-trust-blue focus:ring-4 focus:ring-trust-blue/10 outline-none transition-all"
/>
</div>
</div>
{/* Live Gift Aid preview */}
{isValid && (
<div className="rounded-2xl bg-gradient-to-r from-success-green/5 to-success-green/10 border border-success-green/20 p-4 text-center animate-scale-in">
<div className="rounded-lg bg-fulfilled-green/5 border border-success-green/20 p-4 text-center animate-fade-in">
<p className="text-sm">
<span className="font-bold text-success-green">With Gift Aid:</span>{" "}
your £{(activeAmount / 100).toFixed(0)} becomes{" "}

20
pledge-now-pay-later/src/app/p/[token]/steps/bank-instructions-step.tsx
View File

@@ -77,8 +77,8 @@ export function BankInstructionsStep({ pledge, amount, eventName, donorPhone }:
return (
<div className="max-w-md mx-auto pt-8 text-center space-y-6 animate-fade-up">
<div className="relative inline-flex items-center justify-center">
<div className="absolute w-20 h-20 rounded-full bg-success-green/20 animate-pulse-ring" />
<div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-success-green to-emerald-500 flex items-center justify-center shadow-xl shadow-success-green/30">
<div className="absolute w-16 h-16 bg-success-green/20" />
<div className="relative w-16 h-16 bg-fulfilled-green flex items-center justify-center">
<Check className="h-10 w-10 text-white" strokeWidth={3} />
</div>
</div>
@@ -88,7 +88,7 @@ export function BankInstructionsStep({ pledge, amount, eventName, donorPhone }:
</p>
{whatsappSent && (
<div className="rounded-xl bg-[#25D366]/10 border border-[#25D366]/20 p-3 text-sm text-[#25D366] font-medium flex items-center justify-center gap-2 animate-fade-in">
<div className="rounded-lg bg-[#25D366]/10 border border-[#25D366]/20 p-3 text-sm text-[#25D366] font-medium flex items-center justify-center gap-2 animate-fade-in">
<MessageCircle className="h-4 w-4" /> Details sent to your WhatsApp ✓
</div>
)}
@@ -107,7 +107,7 @@ export function BankInstructionsStep({ pledge, amount, eventName, donorPhone }:
</Card>
{/* Share */}
<div className="rounded-2xl bg-gradient-to-br from-warm-amber/5 to-orange-50 border border-warm-amber/20 p-5 space-y-3">
<div className="rounded-lg bg-generosity-gold/5 border border-warm-amber/20 p-5 space-y-3">
<div className="flex items-center justify-center gap-2">
<Sparkles className="h-4 w-4 text-warm-amber" />
<p className="text-sm font-bold text-gray-900">Know someone who&apos;d donate too?</p>
@@ -164,7 +164,7 @@ export function BankInstructionsStep({ pledge, amount, eventName, donorPhone }:
return (
<div className="max-w-md mx-auto pt-2 space-y-5 animate-fade-up">
<div className="text-center space-y-2">
<div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-trust-blue to-blue-600 shadow-lg shadow-trust-blue/30">
<div className="inline-flex items-center justify-center w-14 h-14 rounded-lg bg-midnight">
<span className="text-2xl">🏦</span>
</div>
<h1 className="text-2xl font-black text-gray-900 tracking-tight">
@@ -176,7 +176,7 @@ export function BankInstructionsStep({ pledge, amount, eventName, donorPhone }:
</div>
{whatsappSent && (
<div className="rounded-xl bg-[#25D366]/10 border border-[#25D366]/20 p-2.5 text-xs text-[#25D366] font-medium flex items-center justify-center gap-2 animate-fade-in">
<div className="rounded-lg bg-[#25D366]/10 border border-[#25D366]/20 p-2.5 text-xs text-[#25D366] font-medium flex items-center justify-center gap-2 animate-fade-in">
<MessageCircle className="h-3.5 w-3.5" /> Bank details also sent to your WhatsApp
</div>
)}
@@ -184,7 +184,7 @@ export function BankInstructionsStep({ pledge, amount, eventName, donorPhone }:
{/* Bank details — tap to copy each field */}
{bd && (
<Card className="overflow-hidden">
<div className="h-1 bg-gradient-to-r from-trust-blue to-blue-400" />
<div className="h-1 bg-promise-blue" />
<CardContent className="pt-4 divide-y">
<CopyField label="Sort Code" value={bd.sortCode} fieldKey="sortCode" mono />
<CopyField label="Account Number" value={bd.accountNo} fieldKey="accountNo" mono />
@@ -194,7 +194,7 @@ export function BankInstructionsStep({ pledge, amount, eventName, donorPhone }:
)}
{/* THE reference — the most important thing */}
<div className="rounded-2xl border-2 border-trust-blue bg-gradient-to-br from-trust-blue/5 to-blue-50 p-5 text-center space-y-3">
<div className="rounded-lg border-2 border-trust-blue bg-promise-blue/5 p-5 text-center space-y-3">
<p className="text-xs font-bold text-trust-blue uppercase tracking-widest">
Payment Reference
</p>
@@ -202,7 +202,7 @@ export function BankInstructionsStep({ pledge, amount, eventName, donorPhone }:
onClick={() => copyField(pledge.reference, "reference")}
className="group"
>
<p className="text-3xl font-mono font-black text-trust-blue tracking-wider group-hover:scale-105 transition-transform">
<p className="text-3xl font-mono font-black text-trust-blue tracking-wider transition-transform">
{pledge.reference}
</p>
</button>
@@ -223,7 +223,7 @@ export function BankInstructionsStep({ pledge, amount, eventName, donorPhone }:
</div>
{/* Open banking app hint */}
<div className="rounded-xl bg-warm-amber/5 border border-warm-amber/20 p-3 text-center">
<div className="rounded-lg bg-warm-amber/5 border border-warm-amber/20 p-3 text-center">
<p className="text-xs font-medium text-warm-amber flex items-center justify-center gap-1.5">
<ExternalLink className="h-3.5 w-3.5" />
Open your banking app → New payment → Paste the details

4
pledge-now-pay-later/src/app/p/[token]/steps/card-payment-step.tsx
View File

@@ -171,7 +171,7 @@ export function CardPaymentStep({ amount, eventName, eventId, qrSourceId, onComp
</div>
{/* Card form */}
<div className="rounded-2xl border-2 border-gray-200 bg-white p-5 space-y-4">
<div className="rounded-lg border-2 border-gray-200 bg-white p-5 space-y-4">
{/* Card number */}
<div className="space-y-2">
<Label htmlFor="card-number">Card Number</Label>
@@ -261,7 +261,7 @@ export function CardPaymentStep({ amount, eventName, eventId, qrSourceId, onComp
</div>
{/* Gift Aid */}
<label className="flex items-start gap-3 rounded-2xl border-2 border-gray-200 bg-white p-4 cursor-pointer hover:border-trust-blue/50 transition-colors">
<label className="flex items-start gap-3 rounded-lg border-2 border-gray-200 bg-white p-4 cursor-pointer hover:border-trust-blue/50 transition-colors">
<input
type="checkbox"
checked={giftAid}

12
pledge-now-pay-later/src/app/p/[token]/steps/confirmation-step.tsx
View File

@@ -130,8 +130,8 @@ export function ConfirmationStep({ pledge, amount, rail, eventName, shareUrl, do
<div className="max-w-md mx-auto pt-6 text-center space-y-6 animate-fade-up">
{/* Success icon with pulse */}
<div className="relative inline-flex items-center justify-center">
<div className="absolute w-20 h-20 rounded-full bg-success-green/20 animate-pulse-ring" />
<div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-success-green to-emerald-500 flex items-center justify-center shadow-xl shadow-success-green/30">
<div className="absolute w-16 h-16 bg-success-green/20" />
<div className="relative w-16 h-16 bg-fulfilled-green flex items-center justify-center">
<Check className="h-10 w-10 text-white" strokeWidth={3} />
</div>
</div>
@@ -150,7 +150,7 @@ export function ConfirmationStep({ pledge, amount, rail, eventName, shareUrl, do
{/* Details card */}
<Card className="text-left overflow-hidden">
<div className="h-1 bg-gradient-to-r from-trust-blue via-success-green to-warm-amber" />
<div className="h-1 bg-promise-blue" />
<CardContent className="pt-5 space-y-3 text-sm">
<div className="flex justify-between items-center">
<span className="text-muted-foreground">Amount</span>
@@ -190,19 +190,19 @@ export function ConfirmationStep({ pledge, amount, rail, eventName, shareUrl, do
</Card>
{/* What happens next */}
<div className="rounded-2xl bg-trust-blue/5 border border-trust-blue/10 p-4 text-left">
<div className="rounded-lg bg-trust-blue/5 border border-trust-blue/10 p-4 text-left">
<p className="text-sm font-semibold text-trust-blue mb-1">What happens next?</p>
<p className="text-sm text-muted-foreground">{nextStepMessages[rail] || nextStepMessages.bank}</p>
</div>
{whatsappSent && (
<div className="rounded-xl bg-[#25D366]/10 border border-[#25D366]/20 p-3 text-sm text-[#25D366] font-medium flex items-center justify-center gap-2 animate-fade-in">
<div className="rounded-lg bg-[#25D366]/10 border border-[#25D366]/20 p-3 text-sm text-[#25D366] font-medium flex items-center justify-center gap-2 animate-fade-in">
<MessageCircle className="h-4 w-4" /> Receipt sent to your WhatsApp ✓
</div>
)}
{/* Share */}
<div className="rounded-2xl bg-gradient-to-br from-warm-amber/5 to-orange-50 border border-warm-amber/20 p-5 space-y-3">
<div className="rounded-lg bg-generosity-gold/5 border border-warm-amber/20 p-5 space-y-3">
<div className="flex items-center justify-center gap-2">
<Sparkles className="h-4 w-4 text-warm-amber" />
<p className="text-sm font-bold text-gray-900">

18
pledge-now-pay-later/src/app/p/[token]/steps/direct-debit-step.tsx
View File

@@ -118,7 +118,7 @@ export function DirectDebitStep({ amount, eventName, organizationName, eventId,
if (phase === "processing") {
return (
<div className="max-w-md mx-auto pt-16 text-center space-y-6">
<div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-trust-blue/10">
<div className="inline-flex items-center justify-center w-16 h-16 bg-trust-blue/10">
<div className="h-10 w-10 border-4 border-trust-blue border-t-transparent rounded-full animate-spin" />
</div>
<div className="space-y-2">
@@ -141,7 +141,7 @@ export function DirectDebitStep({ amount, eventName, organizationName, eventId,
return (
<div className="max-w-md mx-auto pt-4 space-y-6">
<div className="text-center space-y-2">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-trust-blue/10 mb-2">
<div className="inline-flex items-center justify-center w-14 h-14 bg-trust-blue/10 mb-2">
<ShieldCheck className="h-8 w-8 text-trust-blue" />
</div>
<h1 className="text-2xl font-extrabold text-gray-900">
@@ -153,7 +153,7 @@ export function DirectDebitStep({ amount, eventName, organizationName, eventId,
</div>
{/* Summary card */}
<div className="rounded-2xl border-2 border-gray-200 bg-white p-5 space-y-4">
<div className="rounded-lg border-2 border-gray-200 bg-white p-5 space-y-4">
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<p className="text-xs text-muted-foreground uppercase tracking-wider">Account Holder</p>
@@ -189,7 +189,7 @@ export function DirectDebitStep({ amount, eventName, organizationName, eventId,
</div>
{/* Guarantee box */}
<div className="rounded-2xl bg-emerald-50 border border-emerald-200 p-4 space-y-2">
<div className="rounded-lg bg-emerald-50 border border-emerald-200 p-4 space-y-2">
<div className="flex items-center gap-2">
<ShieldCheck className="h-5 w-5 text-emerald-600" />
<p className="text-sm font-semibold text-emerald-800">Direct Debit Guarantee</p>
@@ -234,7 +234,7 @@ export function DirectDebitStep({ amount, eventName, organizationName, eventId,
</div>
{/* Info banner */}
<div className="rounded-2xl bg-trust-blue/5 border border-trust-blue/20 p-4 flex items-start gap-3">
<div className="rounded-lg bg-trust-blue/5 border border-trust-blue/20 p-4 flex items-start gap-3">
<Landmark className="h-5 w-5 text-trust-blue flex-shrink-0 mt-0.5" />
<div>
<p className="text-sm font-medium text-trust-blue">How it works</p>
@@ -245,7 +245,7 @@ export function DirectDebitStep({ amount, eventName, organizationName, eventId,
</div>
{/* Bank details form */}
<div className="rounded-2xl border-2 border-gray-200 bg-white p-5 space-y-4">
<div className="rounded-lg border-2 border-gray-200 bg-white p-5 space-y-4">
<div className="space-y-2">
<Label htmlFor="dd-name">Account Holder Name</Label>
<Input
@@ -306,7 +306,7 @@ export function DirectDebitStep({ amount, eventName, organizationName, eventId,
</div>
{/* Gift Aid */}
<label className="flex items-start gap-3 rounded-2xl border-2 border-gray-200 bg-white p-4 cursor-pointer hover:border-trust-blue/50 transition-colors">
<label className="flex items-start gap-3 rounded-lg border-2 border-gray-200 bg-white p-4 cursor-pointer hover:border-trust-blue/50 transition-colors">
<input
type="checkbox"
checked={giftAid}
@@ -322,7 +322,7 @@ export function DirectDebitStep({ amount, eventName, organizationName, eventId,
</label>
{/* Direct Debit mandate agreement */}
<label className={`flex items-start gap-3 rounded-2xl border-2 p-4 cursor-pointer transition-colors ${
<label className={`flex items-start gap-3 rounded-lg border-2 p-4 cursor-pointer transition-colors ${
errors.mandate ? "border-red-300 bg-red-50" : "border-gray-200 bg-white hover:border-trust-blue/50"
}`}>
<input
@@ -349,7 +349,7 @@ export function DirectDebitStep({ amount, eventName, organizationName, eventId,
</Button>
{/* DD Guarantee mini */}
<div className="rounded-xl bg-emerald-50 border border-emerald-200 p-3 flex items-start gap-2">
<div className="rounded-lg bg-emerald-50 border border-emerald-200 p-3 flex items-start gap-2">
<ShieldCheck className="h-4 w-4 text-emerald-600 flex-shrink-0 mt-0.5" />
<p className="text-xs text-emerald-700">
Protected by the <span className="font-semibold">Direct Debit Guarantee</span>. You can cancel anytime by contacting your bank. Full refund if any errors occur.

12
pledge-now-pay-later/src/app/p/[token]/steps/external-redirect-step.tsx
View File

@@ -60,8 +60,8 @@ export function ExternalRedirectStep({ pledge, amount, eventName, externalUrl, e
return (
<div className="max-w-md mx-auto pt-8 text-center space-y-6 animate-fade-up">
<div className="relative inline-flex items-center justify-center">
<div className="absolute w-20 h-20 rounded-full bg-success-green/20 animate-pulse-ring" />
<div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-success-green to-emerald-500 flex items-center justify-center shadow-xl shadow-success-green/30">
<div className="absolute w-16 h-16 bg-success-green/20" />
<div className="relative w-16 h-16 bg-fulfilled-green flex items-center justify-center">
<Check className="h-10 w-10 text-white" strokeWidth={3} />
</div>
</div>
@@ -72,7 +72,7 @@ export function ExternalRedirectStep({ pledge, amount, eventName, externalUrl, e
</p>
{whatsappSent && (
<div className="rounded-xl bg-[#25D366]/10 border border-[#25D366]/20 p-3 text-sm text-[#25D366] font-medium flex items-center justify-center gap-2 animate-fade-in">
<div className="rounded-lg bg-[#25D366]/10 border border-[#25D366]/20 p-3 text-sm text-[#25D366] font-medium flex items-center justify-center gap-2 animate-fade-in">
<MessageCircle className="h-4 w-4" /> Link sent to your WhatsApp ✓
</div>
)}
@@ -107,7 +107,7 @@ export function ExternalRedirectStep({ pledge, amount, eventName, externalUrl, e
</div>
{/* Share */}
<div className="rounded-2xl bg-gradient-to-br from-warm-amber/5 to-orange-50 border border-warm-amber/20 p-5 space-y-3">
<div className="rounded-lg bg-generosity-gold/5 border border-warm-amber/20 p-5 space-y-3">
<div className="flex items-center justify-center gap-2">
<Sparkles className="h-4 w-4 text-warm-amber" />
<p className="text-sm font-bold text-gray-900">Know someone who&apos;d donate too?</p>
@@ -144,7 +144,7 @@ export function ExternalRedirectStep({ pledge, amount, eventName, externalUrl, e
return (
<div className="max-w-md mx-auto pt-2 space-y-5 animate-fade-up">
<div className="text-center space-y-2">
<div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl shadow-lg" style={{ background: platform.color + "20" }}>
<div className="inline-flex items-center justify-center w-14 h-14 rounded-lg shadow-lg" style={{ background: platform.color + "20" }}>
<span className="text-2xl">{platform.icon}</span>
</div>
<h1 className="text-2xl font-black text-gray-900 tracking-tight">
@@ -156,7 +156,7 @@ export function ExternalRedirectStep({ pledge, amount, eventName, externalUrl, e
</div>
{whatsappSent && (
<div className="rounded-xl bg-[#25D366]/10 border border-[#25D366]/20 p-2.5 text-xs text-[#25D366] font-medium flex items-center justify-center gap-2 animate-fade-in">
<div className="rounded-lg bg-[#25D366]/10 border border-[#25D366]/20 p-2.5 text-xs text-[#25D366] font-medium flex items-center justify-center gap-2 animate-fade-in">
<MessageCircle className="h-3.5 w-3.5" /> Donation link also sent to your WhatsApp
</div>
)}

36
pledge-now-pay-later/src/app/p/[token]/steps/identity-step.tsx
View File

@@ -156,10 +156,10 @@ export function IdentityStep({ onSubmit, amount, zakatEligible, orgName }: Props
value={name}
onChange={(e) => setName(e.target.value)}
autoComplete="name"
className="w-full h-14 px-4 rounded-2xl border-2 border-gray-200 bg-white text-base font-medium placeholder:text-gray-300 focus:border-trust-blue focus:ring-4 focus:ring-trust-blue/10 outline-none transition-all"
className="w-full h-14 px-4 rounded-lg border-2 border-gray-200 bg-white text-base font-medium placeholder:text-gray-300 focus:border-trust-blue focus:ring-4 focus:ring-trust-blue/10 outline-none transition-all"
/>
{name && (
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-success-green animate-scale-in">✓</div>
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-success-green animate-fade-in">✓</div>
)}
</div>
@@ -173,10 +173,10 @@ export function IdentityStep({ onSubmit, amount, zakatEligible, orgName }: Props
onChange={(e) => setEmail(e.target.value)}
autoComplete="email"
inputMode="email"
className="w-full h-14 pl-12 pr-4 rounded-2xl border-2 border-gray-200 bg-white text-base font-medium placeholder:text-gray-300 focus:border-trust-blue focus:ring-4 focus:ring-trust-blue/10 outline-none transition-all"
className="w-full h-14 pl-12 pr-4 rounded-lg border-2 border-gray-200 bg-white text-base font-medium placeholder:text-gray-300 focus:border-trust-blue focus:ring-4 focus:ring-trust-blue/10 outline-none transition-all"
/>
{hasEmail && (
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-success-green animate-scale-in">✓</div>
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-success-green animate-fade-in">✓</div>
)}
</div>
@@ -191,10 +191,10 @@ export function IdentityStep({ onSubmit, amount, zakatEligible, orgName }: Props
onChange={(e) => setPhone(e.target.value)}
autoComplete="tel"
inputMode="tel"
className="w-full h-14 pl-12 pr-4 rounded-2xl border-2 border-gray-200 bg-white text-base font-medium placeholder:text-gray-300 focus:border-trust-blue focus:ring-4 focus:ring-trust-blue/10 outline-none transition-all"
className="w-full h-14 pl-12 pr-4 rounded-lg border-2 border-gray-200 bg-white text-base font-medium placeholder:text-gray-300 focus:border-trust-blue focus:ring-4 focus:ring-trust-blue/10 outline-none transition-all"
/>
{hasPhone && (
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-success-green animate-scale-in">✓</div>
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-success-green animate-fade-in">✓</div>
)}
</div>
{!hasEmail && !hasPhone && (
@@ -220,14 +220,14 @@ export function IdentityStep({ onSubmit, amount, zakatEligible, orgName }: Props
<div className="space-y-3">
<button
onClick={() => setGiftAid(!giftAid)}
className={`w-full text-left rounded-2xl border-2 p-5 transition-all duration-300 ${
className={`w-full text-left rounded-lg border-2 p-5 transition-all duration-300 ${
giftAid
? "border-success-green bg-gradient-to-br from-success-green/5 to-emerald-50 shadow-lg shadow-success-green/10"
? "border-success-green bg-fulfilled-green/5"
: "border-gray-200 bg-white hover:border-success-green/40"
}`}
>
<div className="flex items-start gap-4">
<div className={`rounded-xl p-3 transition-all ${giftAid ? "bg-success-green shadow-lg shadow-success-green/30" : "bg-gray-100"}`}>
<div className={`rounded-lg p-3 transition-all ${giftAid ? "bg-success-green" : "bg-gray-100"}`}>
<Gift className={`h-6 w-6 transition-colors ${giftAid ? "text-white" : "text-gray-400"}`} />
</div>
<div className="flex-1">
@@ -236,7 +236,7 @@ export function IdentityStep({ onSubmit, amount, zakatEligible, orgName }: Props
{giftAid ? "Gift Aid added!" : "Add Gift Aid"}
</span>
{giftAid ? (
<span className="text-xs font-bold px-2.5 py-0.5 rounded-full bg-success-green text-white animate-scale-in flex items-center gap-1">
<span className="text-xs font-bold px-2.5 py-0.5 rounded-full bg-success-green text-white animate-fade-in flex items-center gap-1">
<Sparkles className="h-3 w-3" /> +£{(giftAidBonus / 100).toFixed(0)} free
</span>
) : (
@@ -249,7 +249,7 @@ export function IdentityStep({ onSubmit, amount, zakatEligible, orgName }: Props
{giftAid ? (
<div className="mt-2 space-y-2 animate-fade-in">
{/* Live math */}
<div className="flex items-center justify-between bg-white rounded-xl p-3 border border-success-green/20">
<div className="flex items-center justify-between bg-white rounded-lg p-3 border border-success-green/20">
<div>
<p className="text-xs text-muted-foreground">Your pledge</p>
<p className="font-bold">£{(amount / 100).toFixed(0)}</p>
@@ -278,7 +278,7 @@ export function IdentityStep({ onSubmit, amount, zakatEligible, orgName }: Props
{/* Gift Aid address + declaration (shown when Gift Aid is on) */}
{giftAid && showGiftAidAddress && (
<div className="rounded-2xl border-2 border-success-green/20 bg-white p-4 space-y-3 animate-fade-in">
<div className="rounded-lg border-2 border-success-green/20 bg-white p-4 space-y-3 animate-fade-in">
{/* HMRC requires home address */}
<div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
<MapPin className="h-3.5 w-3.5" />
@@ -292,10 +292,10 @@ export function IdentityStep({ onSubmit, amount, zakatEligible, orgName }: Props
value={addressLine1}
onChange={(e) => setAddressLine1(e.target.value)}
autoComplete="address-line1"
className="w-full h-12 px-4 rounded-xl border-2 border-gray-200 bg-white text-sm font-medium placeholder:text-gray-300 focus:border-success-green focus:ring-4 focus:ring-success-green/10 outline-none transition-all"
className="w-full h-12 px-4 rounded-lg border-2 border-gray-200 bg-white text-sm font-medium placeholder:text-gray-300 focus:border-success-green focus:ring-4 focus:ring-success-green/10 outline-none transition-all"
/>
{addressLine1 && (
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-success-green text-sm animate-scale-in">✓</div>
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-success-green text-sm animate-fade-in">✓</div>
)}
</div>
@@ -306,15 +306,15 @@ export function IdentityStep({ onSubmit, amount, zakatEligible, orgName }: Props
value={postcode}
onChange={(e) => setPostcode(e.target.value.toUpperCase())}
autoComplete="postal-code"
className="w-full h-12 px-4 rounded-xl border-2 border-gray-200 bg-white text-sm font-medium placeholder:text-gray-300 focus:border-success-green focus:ring-4 focus:ring-success-green/10 outline-none transition-all uppercase"
className="w-full h-12 px-4 rounded-lg border-2 border-gray-200 bg-white text-sm font-medium placeholder:text-gray-300 focus:border-success-green focus:ring-4 focus:ring-success-green/10 outline-none transition-all uppercase"
/>
{postcode.length >= 5 && (
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-success-green text-sm animate-scale-in">✓</div>
<div className="absolute right-3 top-1/2 -translate-y-1/2 text-success-green text-sm animate-fade-in">✓</div>
)}
</div>
{/* HMRC declaration — exact model wording */}
<div className="rounded-xl bg-success-green/5 border border-success-green/10 p-3">
<div className="rounded-lg bg-success-green/5 border border-success-green/10 p-3">
<p className="text-xs font-bold text-gray-700 mb-1.5">Gift Aid Declaration</p>
<p className="text-[11px] text-muted-foreground leading-relaxed">
{GIFT_AID_DECLARATION}
@@ -406,7 +406,7 @@ function ConsentCheckbox({ checked, onChange, icon, label, description }: {
<button
type="button"
onClick={() => onChange(!checked)}
className={`w-full text-left rounded-2xl border-2 p-4 transition-all ${
className={`w-full text-left rounded-lg border-2 p-4 transition-all ${
checked
? "border-trust-blue bg-trust-blue/5 shadow-sm"
: "border-gray-200 bg-white hover:border-trust-blue/40"

14
pledge-now-pay-later/src/app/p/[token]/steps/payment-step.tsx
View File

@@ -22,7 +22,7 @@ export function PaymentStep({ onSelect, amount }: Props) {
detail: "We'll give you the bank details. Transfer in your own time.",
fee: "Free",
feeClass: "text-success-green font-bold",
iconBg: "from-emerald-500 to-green-600",
iconBg: "bg-fulfilled-green",
highlight: true,
benefits: ["Zero fees", "Most charities prefer this"],
},
@@ -36,7 +36,7 @@ export function PaymentStep({ onSelect, amount }: Props) {
detail: "GoCardless collects it for you. Protected by the DD Guarantee.",
fee: "1% + 20p",
feeClass: "text-muted-foreground",
iconBg: "from-trust-blue to-blue-600",
iconBg: "bg-promise-blue",
highlight: false,
benefits: ["No action needed", "DD Guarantee"],
},
@@ -50,7 +50,7 @@ export function PaymentStep({ onSelect, amount }: Props) {
detail: "Powered by Stripe. Receipt emailed instantly.",
fee: "1.4% + 20p",
feeClass: "text-muted-foreground",
iconBg: "from-purple-500 to-violet-600",
iconBg: "bg-midnight",
highlight: false,
benefits: ["Instant confirmation", "All major cards"],
},
@@ -74,15 +74,15 @@ export function PaymentStep({ onSelect, amount }: Props) {
key={opt.id}
onClick={() => onSelect(opt.id)}
className={`
w-full text-left rounded-2xl border-2 bg-white p-5 transition-all duration-200 group card-hover
w-full text-left rounded-lg border-2 bg-white p-5 transition-all duration-200 group
${opt.highlight
? "border-success-green/40 shadow-sm shadow-success-green/10 hover:border-success-green hover:shadow-lg hover:shadow-success-green/15"
: "border-gray-200 hover:border-trust-blue/40 hover:shadow-lg hover:shadow-trust-blue/10"
? "border-success-green/40 hover:border-success-green hover:border-fulfilled-green"
: "border-gray-200 hover:border-trust-blue/40 hover:border-promise-blue"
}
`}
>
<div className="flex items-start gap-4">
<div className={`rounded-xl bg-gradient-to-br ${opt.iconBg} p-3 shadow-lg shadow-trust-blue/10 group-hover:scale-105 transition-transform`}>
<div className={`rounded-lg ${opt.iconBg} p-3 transition-transform`}>
<opt.icon className="h-5 w-5 text-white" />
</div>
<div className="flex-1 min-w-0">

32
pledge-now-pay-later/src/app/p/[token]/steps/schedule-step.tsx
View File

@@ -150,10 +150,10 @@ export function ScheduleStep({ amount, onSelect }: Props) {
{/* Pay Now */}
<button
onClick={() => onSelect({ mode: "now" })}
className="w-full text-left rounded-2xl border-2 border-gray-200 bg-white p-5 transition-all duration-200 card-hover hover:border-trust-blue/40 hover:shadow-lg group"
className="w-full text-left rounded-lg border-2 border-gray-200 bg-white p-5 transition-all duration-200 hover:border-trust-blue/40 hover:shadow-lg group"
>
<div className="flex items-start gap-4">
<div className="rounded-xl bg-gradient-to-br from-trust-blue to-blue-600 p-3 shadow-lg shadow-trust-blue/20 group-hover:scale-105 transition-transform">
<div className="rounded-lg bg-midnight p-3 transition-transform">
<Zap className="h-5 w-5 text-white" />
</div>
<div className="flex-1">
@@ -172,10 +172,10 @@ export function ScheduleStep({ amount, onSelect }: Props) {
{/* Pay on a date */}
<button
onClick={() => setMode("calendar")}
className="w-full text-left rounded-2xl border-2 border-success-green/30 bg-gradient-to-r from-success-green/5 to-white p-5 transition-all duration-200 card-hover hover:border-success-green hover:shadow-lg group"
className="w-full text-left rounded-lg border-2 border-success-green/30 bg-fulfilled-green/5 p-5 transition-all duration-200 hover:border-success-green hover:shadow-lg group"
>
<div className="flex items-start gap-4">
<div className="rounded-xl bg-gradient-to-br from-success-green to-emerald-600 p-3 shadow-lg shadow-success-green/20 group-hover:scale-105 transition-transform">
<div className="rounded-lg bg-fulfilled-green p-3 transition-transform">
<Calendar className="h-5 w-5 text-white" />
</div>
<div className="flex-1">
@@ -194,10 +194,10 @@ export function ScheduleStep({ amount, onSelect }: Props) {
{/* Installments */}
<button
onClick={() => setMode("installments")}
className="w-full text-left rounded-2xl border-2 border-gray-200 bg-white p-5 transition-all duration-200 card-hover hover:border-warm-amber/40 hover:shadow-lg group"
className="w-full text-left rounded-lg border-2 border-gray-200 bg-white p-5 transition-all duration-200 hover:border-warm-amber/40 hover:shadow-lg group"
>
<div className="flex items-start gap-4">
<div className="rounded-xl bg-gradient-to-br from-warm-amber to-orange-500 p-3 shadow-lg shadow-warm-amber/20 group-hover:scale-105 transition-transform">
<div className="rounded-lg bg-generosity-gold p-3 transition-transform">
<Repeat className="h-5 w-5 text-white" />
</div>
<div className="flex-1">
@@ -241,9 +241,9 @@ export function ScheduleStep({ amount, onSelect }: Props) {
<button
key={i}
onClick={() => setSelectedDate(s.date)}
className={`shrink-0 rounded-xl border-2 px-3.5 py-2 text-left transition-all ${
className={`shrink-0 rounded-lg border-2 px-3.5 py-2 text-left transition-all ${
isSelected
? "border-success-green bg-success-green/5 shadow-md shadow-success-green/10"
? "border-success-green bg-success-green/5"
: "border-gray-200 bg-white hover:border-success-green/40"
}`}
>
@@ -283,7 +283,7 @@ export function ScheduleStep({ amount, onSelect }: Props) {
disabled={day.isPast || !day.inMonth}
className={`h-9 w-9 mx-auto rounded-lg text-xs font-medium transition-all ${
isSelected
? "bg-success-green text-white font-bold shadow-md shadow-success-green/30"
? "bg-success-green text-white font-bold"
: isToday
? "bg-trust-blue/10 text-trust-blue font-bold"
: day.isPast || !day.inMonth
@@ -301,7 +301,7 @@ export function ScheduleStep({ amount, onSelect }: Props) {
{/* Selected date summary */}
{selectedDate && (
<div className="rounded-2xl bg-success-green/5 border border-success-green/20 p-4 text-center animate-scale-in">
<div className="rounded-lg bg-success-green/5 border border-success-green/20 p-4 text-center animate-fade-in">
<p className="text-xs text-muted-foreground">You&apos;ll pay</p>
<p className="text-xl font-black text-gray-900">£{pounds}</p>
<p className="text-sm font-medium text-success-green">{formatFull(selectedDate)}</p>
@@ -313,7 +313,7 @@ export function ScheduleStep({ amount, onSelect }: Props) {
<Button
size="xl"
className={`w-full ${selectedDate ? "bg-success-green hover:bg-success-green/90 shadow-lg shadow-success-green/25" : ""}`}
className={`w-full ${selectedDate ? "bg-success-green hover:bg-success-green/90" : ""}`}
disabled={!selectedDate}
onClick={handleDateConfirm}
>
@@ -345,9 +345,9 @@ export function ScheduleStep({ amount, onSelect }: Props) {
<button
key={n}
onClick={() => setInstallmentCount(n)}
className={`rounded-xl border-2 px-4 py-3 text-center transition-all min-w-[70px] ${
className={`rounded-lg border-2 px-4 py-3 text-center transition-all min-w-[70px] ${
installmentCount === n
? "border-warm-amber bg-warm-amber text-white font-bold shadow-lg shadow-warm-amber/25"
? "border-warm-amber bg-warm-amber text-white font-bold"
: "border-gray-200 bg-white hover:border-warm-amber/40"
}`}
>
@@ -359,7 +359,7 @@ export function ScheduleStep({ amount, onSelect }: Props) {
{/* Breakdown */}
<Card className="overflow-hidden">
<div className="h-1 bg-gradient-to-r from-warm-amber to-orange-400" />
<div className="h-1 bg-generosity-gold" />
<CardContent className="pt-4">
<div className="text-center mb-4">
<p className="text-xs text-muted-foreground">Monthly payment</p>
@@ -392,7 +392,7 @@ export function ScheduleStep({ amount, onSelect }: Props) {
</CardContent>
</Card>
<div className="rounded-xl bg-warm-amber/5 border border-warm-amber/20 p-3 text-center">
<div className="rounded-lg bg-warm-amber/5 border border-warm-amber/20 p-3 text-center">
<p className="text-xs text-muted-foreground">
We&apos;ll send you a reminder with payment details before each installment date.
You can pay via bank transfer, card, or Direct Debit.
@@ -401,7 +401,7 @@ export function ScheduleStep({ amount, onSelect }: Props) {
<Button
size="xl"
className="w-full bg-warm-amber hover:bg-warm-amber/90 shadow-lg shadow-warm-amber/25"
className="w-full bg-warm-amber hover:bg-warm-amber/90"
onClick={handleInstallmentConfirm}
>
<Check className="h-5 w-5 mr-2" />