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

GLobal Styling part 1

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-01 14:54:27 +00:00
parent 0e57c50e56
commit e96069775c
60 changed files with 812 additions and 1712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,8 +6,7 @@
import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Link, useNavigate } from 'react-router-dom';
import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from '../../icons';
import { CreditCard, Building2, Wallet, Check, Loader2, CheckCircle } from 'lucide-react';
import { ChevronLeftIcon, EyeCloseIcon, EyeIcon, CreditCardIcon, Building2Icon, WalletIcon, CheckIcon, Loader2Icon, CheckCircleIcon } from '../../icons';
import Label from '../form/Label';
import Input from '../form/input/InputField';
import Checkbox from '../form/input/Checkbox';
@@ -234,13 +233,13 @@ export default function SignUpFormUnified({
const getPaymentIcon = (method: string) => {
switch (method) {
case 'stripe':
return <CreditCard className="w-5 h-5" />;
return <CreditCardIcon className="w-5 h-5" />;
case 'bank_transfer':
return <Building2 className="w-5 h-5" />;
return <Building2Icon className="w-5 h-5" />;
case 'local_wallet':
return <Wallet className="w-5 h-5" />;
return <WalletIcon className="w-5 h-5" />;
default:
return <CreditCard className="w-5 h-5" />;
return <CreditCardIcon className="w-5 h-5" />;
}
};
@@ -359,7 +358,7 @@ export default function SignUpFormUnified({
<span className={`font-semibold text-sm ${isSelected ? 'text-brand-600 dark:text-brand-400' : 'text-gray-900 dark:text-white'}`}>
{plan.name}
</span>
{isSelected && <CheckCircle className="w-4 h-4 text-brand-500" />}
{isSelected && <CheckCircleIcon className="w-4 h-4 text-brand-500" />}
</div>
<div className="text-lg font-bold text-gray-900 dark:text-white">
{isFree ? 'Free' : `$${displayPrice.toFixed(2)}`}
@@ -450,7 +449,7 @@ export default function SignUpFormUnified({
</Label>
{paymentMethodsLoading ? (
<div className="flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg h-[52px]">
<Loader2 className="w-4 h-4 animate-spin text-brand-500" />
<Loader2Icon className="w-4 h-4 animate-spin text-brand-500" />
</div>
) : paymentMethods.length === 0 ? (
<div className="p-3 bg-warning-50 border border-warning-200 rounded-lg text-warning-800 dark:bg-warning-900/20 dark:border-warning-800 dark:text-warning-200">
@@ -514,7 +513,7 @@ export default function SignUpFormUnified({
<Button type="submit" variant="primary" disabled={loading} className="w-full">
{loading ? (
<span className="flex items-center justify-center">
<Loader2 className="w-4 h-4 animate-spin mr-2" />
<Loader2Icon className="w-4 h-4 animate-spin mr-2" />
Creating your account...
</span>
) : isPaidPlan ? (
@@ -613,7 +612,7 @@ export default function SignUpFormUnified({
{isSelected && (
<div className="absolute -top-4 -right-4">
<div className="bg-brand-500 rounded-full p-2 shadow-lg">
<CheckCircle className="w-8 h-8 text-white" />
<CheckCircleIcon className="w-8 h-8 text-white" />
</div>
</div>
)}
@@ -621,7 +620,7 @@ export default function SignUpFormUnified({
{/* Header: Plan name, price, and features in horizontal layout */}
<div className="flex items-center gap-6">
{/* Plan Name & Price */}
<div className="flex-shrink-0" style={{ minWidth: '200px' }}>
<div className="flex-shrink-0 min-w-[200px]">
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-1">{plan.name}</h3>
<div className="flex items-baseline gap-1">
<span className="text-3xl font-bold text-gray-900 dark:text-white">
@@ -644,7 +643,7 @@ export default function SignUpFormUnified({
<div className="flex-1 grid grid-cols-2 gap-x-6 gap-y-2.5">
{features.map((feature, idx) => (
<div key={idx} className="flex items-center gap-2">
<CheckCircle className="w-4 h-4 text-success-500 dark:text-success-400 flex-shrink-0" />
<CheckCircleIcon className="w-4 h-4 text-success-500 dark:text-success-400 flex-shrink-0" />
<span className="text-sm text-gray-700 dark:text-gray-300 leading-tight">{feature}</span>
</div>
))}