chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate auth pages to new design system

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-15 19:25:54 -05:00
parent c47484c4cf
commit 4d92e0aeed
4 changed files with 84 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/pages/ChangePasswordPage.tsx
View File

@@ -66,7 +66,7 @@ export function ChangePasswordPage() {
<BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" /> <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
</div> </div>
</div> </div>
<h1 className="text-3xl font-bold text-white tracking-tight"> <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
Change Password Change Password
</h1> </h1>
{isForced && ( {isForced && (
@@ -77,7 +77,7 @@ export function ChangePasswordPage() {
</div> </div>
<form onSubmit={handleSubmit} className="mt-8 space-y-6"> <form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div className="glass-card rounded-2xl p-6 space-y-4"> <div className="bg-card border border-border rounded-xl p-6 space-y-4">
{error && ( {error && (
<div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400"> <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
{error} {error}
@@ -85,7 +85,7 @@ export function ChangePasswordPage() {
)} )}
<div> <div>
<label htmlFor="current-password" className="mb-1 block text-sm font-medium text-white"> <label htmlFor="current-password" className="mb-1 block text-sm font-medium text-foreground">
Current Password Current Password
</label> </label>
<PasswordInput <PasswordInput
@@ -95,16 +95,16 @@ export function ChangePasswordPage() {
value={currentPassword} value={currentPassword}
onChange={(e) => setCurrentPassword(e.target.value)} onChange={(e) => setCurrentPassword(e.target.value)}
className={cn( className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors' 'transition-colors'
)} )}
/> />
</div> </div>
<div> <div>
<label htmlFor="new-password" className="mb-1 block text-sm font-medium text-white"> <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-foreground">
New Password New Password
</label> </label>
<PasswordInput <PasswordInput
@@ -114,20 +114,20 @@ export function ChangePasswordPage() {
value={newPassword} value={newPassword}
onChange={(e) => setNewPassword(e.target.value)} onChange={(e) => setNewPassword(e.target.value)}
className={cn( className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors' 'transition-colors'
)} )}
placeholder="At least 10 characters" placeholder="At least 10 characters"
/> />
<p className="mt-1 text-xs text-white/40"> <p className="mt-1 text-xs text-muted-foreground">
Must include uppercase, lowercase, and a digit. Must include uppercase, lowercase, and a digit.
</p> </p>
</div> </div>
<div> <div>
<label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-white"> <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-foreground">
Confirm New Password Confirm New Password
</label> </label>
<PasswordInput <PasswordInput
@@ -137,9 +137,9 @@ export function ChangePasswordPage() {
value={confirmPassword} value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)} onChange={(e) => setConfirmPassword(e.target.value)}
className={cn( className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors' 'transition-colors'
)} )}
/> />
@@ -150,8 +150,8 @@ export function ChangePasswordPage() {
disabled={isLoading} disabled={isLoading}
className={cn( className={cn(
'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press', 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
'bg-white text-black hover:bg-white/90', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black', 'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
'disabled:cursor-not-allowed disabled:opacity-50', 'disabled:cursor-not-allowed disabled:opacity-50',
'transition-all' 'transition-all'
)} )}

34
frontend/src/pages/LoginPage.tsx
View File

@@ -51,19 +51,19 @@ export function LoginPage() {
<BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" /> <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
</div> </div>
</div> </div>
<h1 className="text-3xl font-bold text-white tracking-tight"> <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
ResolutionFlow ResolutionFlow
</h1> </h1>
<p className="mt-2 text-base font-medium text-white/60 sm:mt-3 sm:text-lg"> <p className="mt-2 text-base font-medium text-muted-foreground sm:mt-3 sm:text-lg">
Decision Tree Platform Decision Tree Platform
</p> </p>
<p className="mt-1 text-sm text-white/40 sm:mt-2"> <p className="mt-1 text-sm text-muted-foreground sm:mt-2">
Sign in to your account Sign in to your account
</p> </p>
</div> </div>
<form onSubmit={handleSubmit} className="mt-8 space-y-6"> <form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div className="glass-card rounded-2xl p-6 space-y-4"> <div className="bg-card border border-border rounded-xl p-6 space-y-4">
{(error || localError) && ( {(error || localError) && (
<div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400"> <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
{localError || error} {localError || error}
@@ -71,7 +71,7 @@ export function LoginPage() {
)} )}
<div> <div>
<label htmlFor="email" className="mb-1 block text-sm font-medium text-white"> <label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">
Email address Email address
</label> </label>
<input <input
@@ -83,9 +83,9 @@ export function LoginPage() {
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
className={cn( className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors' 'transition-colors'
)} )}
placeholder="you@example.com" placeholder="you@example.com"
@@ -93,7 +93,7 @@ export function LoginPage() {
</div> </div>
<div> <div>
<label htmlFor="password" className="mb-1 block text-sm font-medium text-white"> <label htmlFor="password" className="mb-1 block text-sm font-medium text-foreground">
Password Password
</label> </label>
<PasswordInput <PasswordInput
@@ -104,9 +104,9 @@ export function LoginPage() {
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className={cn( className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors' 'transition-colors'
)} )}
placeholder="••••••••••" placeholder="••••••••••"
@@ -114,7 +114,7 @@ export function LoginPage() {
</div> </div>
<div className="text-right"> <div className="text-right">
<Link to="/forgot-password" className="text-xs text-white/40 hover:text-white/60 transition-colors"> <Link to="/forgot-password" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
Forgot password? Forgot password?
</Link> </Link>
</div> </div>
@@ -124,8 +124,8 @@ export function LoginPage() {
disabled={isLoading} disabled={isLoading}
className={cn( className={cn(
'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press', 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
'bg-white text-black hover:bg-white/90', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black', 'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
'disabled:cursor-not-allowed disabled:opacity-50', 'disabled:cursor-not-allowed disabled:opacity-50',
'transition-all' 'transition-all'
)} )}
@@ -134,9 +134,9 @@ export function LoginPage() {
</button> </button>
</div> </div>
<p className="text-center text-sm text-white/40"> <p className="text-center text-sm text-muted-foreground">
Don't have an account?{' '} Don't have an account?{' '}
<Link to="/register" className="font-medium text-white hover:underline"> <Link to="/register" className="font-medium text-foreground hover:underline">
Register Register
</Link> </Link>
</p> </p>

62
frontend/src/pages/RegisterPage.tsx
View File

@@ -87,19 +87,19 @@ export function RegisterPage() {
<BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" /> <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
</div> </div>
</div> </div>
<h1 className="text-3xl font-bold text-white tracking-tight"> <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
ResolutionFlow ResolutionFlow
</h1> </h1>
<p className="mt-2 text-base font-medium text-white/60 sm:mt-3 sm:text-lg"> <p className="mt-2 text-base font-medium text-muted-foreground sm:mt-3 sm:text-lg">
Decision Tree Platform Decision Tree Platform
</p> </p>
<p className="mt-1 text-sm text-white/40 sm:mt-2"> <p className="mt-1 text-sm text-muted-foreground sm:mt-2">
Create your account Create your account
</p> </p>
</div> </div>
<form onSubmit={handleSubmit} className="mt-8 space-y-6"> <form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div className="glass-card rounded-2xl p-6 space-y-4"> <div className="bg-card border border-border rounded-xl p-6 space-y-4">
{(error || localError) && ( {(error || localError) && (
<div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400"> <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
{localError || error} {localError || error}
@@ -107,7 +107,7 @@ export function RegisterPage() {
)} )}
<div> <div>
<label htmlFor="inviteCode" className="block text-sm font-medium text-white"> <label htmlFor="inviteCode" className="block text-sm font-medium text-foreground">
Invite code Invite code
</label> </label>
<input <input
@@ -121,18 +121,18 @@ export function RegisterPage() {
}} }}
onBlur={(e) => validateInviteCode(e.target.value)} onBlur={(e) => validateInviteCode(e.target.value)}
className={cn( className={cn(
'mt-1 block w-full rounded-xl border bg-black/50 px-3 py-2 font-mono tracking-wider', 'mt-1 block w-full rounded-xl border bg-card px-3 py-2 font-mono tracking-wider',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:outline-none focus:ring-1', 'focus:outline-none focus:ring-1',
inviteCodeStatus === 'valid' && 'border-emerald-400/50 focus:border-emerald-400 focus:ring-emerald-400/30', inviteCodeStatus === 'valid' && 'border-emerald-400/50 focus:border-emerald-400 focus:ring-emerald-400/30',
inviteCodeStatus === 'invalid' && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/30', inviteCodeStatus === 'invalid' && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/30',
inviteCodeStatus === 'idle' && 'border-white/10 focus:border-white/30 focus:ring-white/20', inviteCodeStatus === 'idle' && 'border-border focus:border-primary focus:ring-primary/20',
inviteCodeStatus === 'checking' && 'border-white/10 focus:border-white/30 focus:ring-white/20' inviteCodeStatus === 'checking' && 'border-border focus:border-primary focus:ring-primary/20'
)} )}
placeholder="ABCD1234" placeholder="ABCD1234"
/> />
{inviteCodeStatus === 'checking' && ( {inviteCodeStatus === 'checking' && (
<p className="mt-1 text-xs text-white/40">Validating...</p> <p className="mt-1 text-xs text-muted-foreground">Validating...</p>
)} )}
{inviteCodeStatus === 'valid' && ( {inviteCodeStatus === 'valid' && (
<p className="mt-1 text-xs text-emerald-400">{inviteCodeMessage}</p> <p className="mt-1 text-xs text-emerald-400">{inviteCodeMessage}</p>
@@ -143,7 +143,7 @@ export function RegisterPage() {
</div> </div>
<div> <div>
<label htmlFor="name" className="block text-sm font-medium text-white"> <label htmlFor="name" className="block text-sm font-medium text-foreground">
Full name Full name
</label> </label>
<input <input
@@ -155,16 +155,16 @@ export function RegisterPage() {
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
className={cn( className={cn(
'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
placeholder="John Smith" placeholder="John Smith"
/> />
</div> </div>
<div> <div>
<label htmlFor="email" className="block text-sm font-medium text-white"> <label htmlFor="email" className="block text-sm font-medium text-foreground">
Email address Email address
</label> </label>
<input <input
@@ -176,16 +176,16 @@ export function RegisterPage() {
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
className={cn( className={cn(
'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
placeholder="you@example.com" placeholder="you@example.com"
/> />
</div> </div>
<div> <div>
<label htmlFor="password" className="block text-sm font-medium text-white"> <label htmlFor="password" className="block text-sm font-medium text-foreground">
Password Password
</label> </label>
<PasswordInput <PasswordInput
@@ -196,19 +196,19 @@ export function RegisterPage() {
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
className={cn( className={cn(
'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
placeholder="••••••••••" placeholder="••••••••••"
/> />
<p className="mt-1 text-xs text-white/30"> <p className="mt-1 text-xs text-muted-foreground">
Must be at least 10 characters Must be at least 10 characters
</p> </p>
</div> </div>
<div> <div>
<label htmlFor="confirmPassword" className="block text-sm font-medium text-white"> <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">
Confirm password Confirm password
</label> </label>
<PasswordInput <PasswordInput
@@ -219,9 +219,9 @@ export function RegisterPage() {
value={confirmPassword} value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)} onChange={(e) => setConfirmPassword(e.target.value)}
className={cn( className={cn(
'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
placeholder="••••••••••" placeholder="••••••••••"
/> />
@@ -232,8 +232,8 @@ export function RegisterPage() {
disabled={isLoading} disabled={isLoading}
className={cn( className={cn(
'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press', 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
'bg-white text-black hover:bg-white/90', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black', 'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
'disabled:cursor-not-allowed disabled:opacity-50', 'disabled:cursor-not-allowed disabled:opacity-50',
'transition-all' 'transition-all'
)} )}
@@ -242,9 +242,9 @@ export function RegisterPage() {
</button> </button>
</div> </div>
<p className="text-center text-sm text-white/40"> <p className="text-center text-sm text-muted-foreground">
Already have an account?{' '} Already have an account?{' '}
<Link to="/login" className="font-medium text-white hover:underline"> <Link to="/login" className="font-medium text-foreground hover:underline">
Sign in Sign in
</Link> </Link>
</p> </p>

38
frontend/src/pages/ResetPasswordPage.tsx
View File

@@ -82,24 +82,24 @@ export function ResetPasswordPage() {
<BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" /> <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
</div> </div>
</div> </div>
<h1 className="text-3xl font-bold text-white tracking-tight"> <h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
Reset Password Reset Password
</h1> </h1>
</div> </div>
{verifying ? ( {verifying ? (
<div className="glass-card rounded-2xl p-6 text-center"> <div className="bg-card border border-border rounded-xl p-6 text-center">
<p className="text-white/60">Verifying reset link...</p> <p className="text-muted-foreground">Verifying reset link...</p>
</div> </div>
) : !token || !valid ? ( ) : !token || !valid ? (
<div className="glass-card rounded-2xl p-6 space-y-4"> <div className="bg-card border border-border rounded-xl p-6 space-y-4">
<div className="rounded-xl border border-red-400/20 bg-red-400/10 p-4 text-sm text-red-400"> <div className="rounded-xl border border-red-400/20 bg-red-400/10 p-4 text-sm text-red-400">
This reset link is invalid or has expired. Please request a new one. This reset link is invalid or has expired. Please request a new one.
</div> </div>
<div className="text-center"> <div className="text-center">
<Link <Link
to="/forgot-password" to="/forgot-password"
className="text-sm text-white/60 hover:text-white transition-colors" className="text-sm text-muted-foreground hover:text-foreground transition-colors"
> >
Request new reset link Request new reset link
</Link> </Link>
@@ -107,10 +107,10 @@ export function ResetPasswordPage() {
</div> </div>
) : ( ) : (
<form onSubmit={handleSubmit} className="mt-8 space-y-6"> <form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div className="glass-card rounded-2xl p-6 space-y-4"> <div className="bg-card border border-border rounded-xl p-6 space-y-4">
{email && ( {email && (
<p className="text-sm text-white/60"> <p className="text-sm text-muted-foreground">
Resetting password for <span className="font-medium text-white">{email}</span> Resetting password for <span className="font-medium text-foreground">{email}</span>
</p> </p>
)} )}
@@ -121,7 +121,7 @@ export function ResetPasswordPage() {
)} )}
<div> <div>
<label htmlFor="new-password" className="mb-1 block text-sm font-medium text-white"> <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-foreground">
New Password New Password
</label> </label>
<PasswordInput <PasswordInput
@@ -131,20 +131,20 @@ export function ResetPasswordPage() {
value={newPassword} value={newPassword}
onChange={(e) => setNewPassword(e.target.value)} onChange={(e) => setNewPassword(e.target.value)}
className={cn( className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors' 'transition-colors'
)} )}
placeholder="At least 10 characters" placeholder="At least 10 characters"
/> />
<p className="mt-1 text-xs text-white/40"> <p className="mt-1 text-xs text-muted-foreground">
Must include uppercase, lowercase, and a digit. Must include uppercase, lowercase, and a digit.
</p> </p>
</div> </div>
<div> <div>
<label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-white"> <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-foreground">
Confirm New Password Confirm New Password
</label> </label>
<PasswordInput <PasswordInput
@@ -154,9 +154,9 @@ export function ResetPasswordPage() {
value={confirmPassword} value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)} onChange={(e) => setConfirmPassword(e.target.value)}
className={cn( className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors' 'transition-colors'
)} )}
/> />
@@ -167,8 +167,8 @@ export function ResetPasswordPage() {
disabled={isLoading} disabled={isLoading}
className={cn( className={cn(
'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press', 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
'bg-white text-black hover:bg-white/90', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black', 'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
'disabled:cursor-not-allowed disabled:opacity-50', 'disabled:cursor-not-allowed disabled:opacity-50',
'transition-all' 'transition-all'
)} )}