salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

singup page toggle centered

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-20 20:16:18 +00:00
parent fa548c3da9
commit f91af0744c
1 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/auth/SignUpFormUnified.tsx
View File

@@ -459,8 +459,20 @@ export default function SignUpFormUnified({
document.getElementById('signup-pricing-plans') &&
ReactDOM.createPortal(
<div className="space-y-6">
{/* Billing Toggle - Centered with inline discount */}
<div className="flex items-center justify-center gap-3 w-full max-w-[640px] mx-auto">
{/* Billing Toggle - Centered with discount badge above */}
<div className="flex flex-col items-center gap-2 w-full max-w-[640px] mx-auto">
{/* Savings Badge - Fixed height to prevent layout shift */}
<div className="h-8 flex items-center justify-center">
<p className={`inline-flex items-center gap-1.5 text-success-600 dark:text-success-400 text-sm font-semibold bg-success-50 dark:bg-success-900/20 px-3 py-1.5 rounded-full transition-all duration-300 ${
billingPeriod === 'annually' ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
}`}>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Save up to {annualDiscountPercent}%
</p>
</div>
{/* Toggle Switch */}
<div className="relative inline-flex p-1 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-sm">
<span
className={`absolute top-1/2 left-1 flex h-11 w-32 -translate-y-1/2 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 shadow-md transition-all duration-300 ease-out ${
@@ -486,14 +498,6 @@ export default function SignUpFormUnified({
Annually
</button>
</div>
<p className={`inline-flex items-center gap-1.5 text-success-600 dark:text-success-400 text-sm font-semibold bg-success-50 dark:bg-success-900/20 px-3 py-1.5 rounded-full transition-opacity duration-200 ${
billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
}`}>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Save up to {annualDiscountPercent}%
</p>
</div>
{/* Plan Cards - Single column, stacked vertically */}