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

componenets standardization 1

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 21:42:04 +00:00
parent c880e24fc0
commit a4691ad2da
95 changed files with 3597 additions and 1745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -284,24 +284,28 @@ export default function SignUpFormUnified({
billingPeriod === 'monthly' ? 'translate-x-0' : 'translate-x-28'
}`}
></span>
<button
type="button"
<Button
variant="ghost"
tone="neutral"
size="sm"
onClick={() => setBillingPeriod('monthly')}
className={`relative flex h-9 w-28 items-center justify-center text-sm font-semibold transition-all duration-200 rounded-md ${
billingPeriod === 'monthly' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
}`}
>
Monthly
</button>
<button
type="button"
</Button>
<Button
variant="ghost"
tone="neutral"
size="sm"
onClick={() => setBillingPeriod('annually')}
className={`relative flex h-9 w-28 items-center justify-center text-sm font-semibold transition-all duration-200 rounded-md ${
billingPeriod === 'annually' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
}`}
>
Annually
</button>
</Button>
</div>
<div className="h-6 flex items-center justify-center">
<span className={`inline-flex items-center gap-1.5 text-xs text-success-600 dark:text-success-400 font-semibold bg-success-50 dark:bg-success-900/20 px-2 py-1 rounded-full transition-opacity duration-200 ${
@@ -345,8 +349,11 @@ export default function SignUpFormUnified({
const isFree = parseFloat(String(plan.price || 0)) === 0;
return (
<button
<Button
key={plan.id}
variant="ghost"
tone="neutral"
size="md"
onClick={() => onPlanSelect(plan)}
className={`p-3 rounded-lg border-2 text-left transition-all ${
isSelected
@@ -366,7 +373,7 @@ export default function SignUpFormUnified({
<div className="text-xs text-gray-500 dark:text-gray-400">
{billingPeriod === 'annually' && !isFree ? '/year' : '/month'}
</div>
</button>
</Button>
);
})}
</div>
@@ -550,24 +557,28 @@ export default function SignUpFormUnified({
billingPeriod === 'monthly' ? 'translate-x-0' : 'translate-x-32'
}`}
></span>
<button
type="button"
<Button
variant="ghost"
tone="neutral"
size="sm"
onClick={() => setBillingPeriod('monthly')}
className={`relative flex h-11 w-32 items-center justify-center text-base font-semibold transition-all duration-200 rounded-lg ${
billingPeriod === 'monthly' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
}`}
>
Monthly
</button>
<button
type="button"
</Button>
<Button
variant="ghost"
tone="neutral"
size="sm"
onClick={() => setBillingPeriod('annually')}
className={`relative flex h-11 w-32 items-center justify-center text-base font-semibold transition-all duration-200 rounded-lg ${
billingPeriod === 'annually' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
}`}
>
Annually
</button>
</Button>
</div>
<div className="h-7 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-opacity duration-200 ${