MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hackathon): update auth page dark mode color scheme

Browse Source
This commit is contained in:
Hafid Nur
2025-11-27 12:02:23 +07:00
parent cfcdfa527c
commit 2700f7cbb7
4 changed files with 88 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/hackathon/src/app/auth/forgot-password/page.tsx
+17 -16
View File
@@ -3,6 +3,7 @@ import { supabase } from '@imphnen-frontend-service/service';
import { Link, useNavigate } from 'react-router'; import { Link, useNavigate } from 'react-router';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Icon } from '@iconify/react'; import { Icon } from '@iconify/react';
import ThemeToggle from '../../../components/theme-toggle';
export default function ForgotPasswordPage() { export default function ForgotPasswordPage() {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
@@ -80,13 +81,23 @@ export default function ForgotPasswordPage() {
} }
return ( return (
<div className="flex justify-center items-center min-h-screen bg-gray-50 p-4"> <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
<div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200"> <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between mb-6">
<button
onClick={() => navigate('/auth/login')}
className="cursor-pointer text-primary-500 hover:text-primary-600 dark:text-primary-400 dark:hover:text-primary-300 text-base font-sans flex items-center"
>
<Icon icon="ic:baseline-chevron-left" width="24" height="24" />
Back to Login
</button>
<ThemeToggle />
</div>
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-3xl font-bold text-gray-900 mb-2"> <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
Forgot Password? Forgot Password?
</h2> </h2>
<p className="text-gray-600"> <p className="text-gray-600 dark:text-gray-400">
No worries, we'll send you reset instructions No worries, we'll send you reset instructions
</p> </p>
</div> </div>
@@ -95,7 +106,7 @@ export default function ForgotPasswordPage() {
<div> <div>
<label <label
htmlFor="email" htmlFor="email"
className="block text-sm font-medium text-gray-700 mb-1" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
> >
Email Address Email Address
</label> </label>
@@ -106,7 +117,7 @@ export default function ForgotPasswordPage() {
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="your@email.com" placeholder="your@email.com"
disabled={isLoading} disabled={isLoading}
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed" className="bg-white dark:bg-gray-800 w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
required required
/> />
</div> </div>
@@ -119,16 +130,6 @@ export default function ForgotPasswordPage() {
{isLoading ? 'Sending...' : 'Send Reset Link'} {isLoading ? 'Sending...' : 'Send Reset Link'}
</button> </button>
</form> </form>
<div className="mt-8">
<Link
to="/auth/login"
className="text-primary-500 hover:text-primary-600 flex items-center"
>
<Icon icon="ic:baseline-chevron-left" width="24" height="24" />
<span> Back to Login</span>
</Link>
</div>
</div> </div>
</div> </div>
); );
apps/hackathon/src/app/auth/login/page.tsx
+16 -14
View File
@@ -115,8 +115,8 @@ export default function LoginPage() {
}; };
return ( return (
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-neutral-950 p-4"> <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
<div className="bg-white dark:bg-neutral-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-neutral-700"> <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<button <button
onClick={() => navigate('/')} onClick={() => navigate('/')}
@@ -132,7 +132,7 @@ export default function LoginPage() {
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2"> <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
Welcome Back Welcome Back
</h2> </h2>
<p className="text-gray-600 dark:text-neutral-400 font-sans"> <p className="text-gray-600 dark:text-gray-400 font-sans">
Sign in to join or create your hackathon team Sign in to join or create your hackathon team
</p> </p>
</div> </div>
@@ -147,7 +147,7 @@ export default function LoginPage() {
<div> <div>
<label <label
htmlFor="email" htmlFor="email"
className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
> >
Email Email
</label> </label>
@@ -158,7 +158,7 @@ export default function LoginPage() {
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="your@email.com" placeholder="your@email.com"
disabled={isEmailLoading} disabled={isEmailLoading}
className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed" className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
required required
/> />
</div> </div>
@@ -167,7 +167,7 @@ export default function LoginPage() {
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
<label <label
htmlFor="password" htmlFor="password"
className="block text-sm font-medium text-gray-700 dark:text-neutral-300" className="block text-sm font-medium text-gray-700 dark:text-gray-300"
> >
Password Password
</label> </label>
@@ -185,7 +185,7 @@ export default function LoginPage() {
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••" placeholder="••••••••"
disabled={isEmailLoading} disabled={isEmailLoading}
className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed" className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
required required
/> />
</div> </div>
@@ -193,23 +193,25 @@ export default function LoginPage() {
<button <button
type="submit" type="submit"
disabled={isEmailLoading} disabled={isEmailLoading}
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900 disabled:bg-gray-400 dark:disabled:bg-neutral-600 disabled:cursor-not-allowed transition-colors cursor-pointer" className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
> >
{isEmailLoading ? 'Signing in...' : 'Sign in with Email'} {isEmailLoading ? 'Signing in...' : 'Sign in with Email'}
</button> </button>
</form> </form>
<div className="my-6 flex items-center"> <div className="my-6 flex items-center">
<div className="flex-1 border-t border-gray-300 dark:border-neutral-600"></div> <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
<span className="px-4 text-sm text-gray-500 dark:text-neutral-400">OR</span> <span className="px-4 text-sm text-gray-500 dark:text-gray-400">
<div className="flex-1 border-t border-gray-300 dark:border-neutral-600"></div> OR
</span>
<div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
</div> </div>
<button <button
onClick={handleGithubLogin} onClick={handleGithubLogin}
disabled={isGithubLoading} disabled={isGithubLoading}
type="button" type="button"
className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-neutral-800 border border-gray-300 dark:border-neutral-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-neutral-900 disabled:bg-gray-100 dark:disabled:bg-neutral-800 disabled:cursor-not-allowed transition-colors cursor-pointer" className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
> >
<GithubOutlined className="text-xl" /> <GithubOutlined className="text-xl" />
<span> <span>
@@ -218,7 +220,7 @@ export default function LoginPage() {
</button> </button>
<div className="mt-6 text-center"> <div className="mt-6 text-center">
<p className="text-gray-600 dark:text-neutral-400 text-sm"> <p className="text-gray-600 dark:text-gray-400 text-sm">
Don't have an account?{' '} Don't have an account?{' '}
<a <a
href="/auth/signup" href="/auth/signup"
@@ -230,7 +232,7 @@ export default function LoginPage() {
</div> </div>
<div className="mt-6 text-center"> <div className="mt-6 text-center">
<p className="text-gray-500 dark:text-neutral-500 text-xs"> <p className="text-gray-500 dark:text-gray-500 text-xs">
By signing in, you agree to our Terms of Service and Privacy Policy By signing in, you agree to our Terms of Service and Privacy Policy
</p> </p>
</div> </div>
apps/hackathon/src/app/auth/reset-password/page.tsx
+33 -29
View File
@@ -10,17 +10,17 @@ export default function ResetPasswordPage() {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [isValidToken, setIsValidToken] = useState(false); const [isValidToken, setIsValidToken] = useState(false);
useEffect(() => { // useEffect(() => {
// Check if we have a valid session (from the reset link) // // Check if we have a valid session (from the reset link)
supabase.auth.getSession().then(({ data: { session } }) => { // supabase.auth.getSession().then(({ data: { session } }) => {
if (session) { // if (session) {
setIsValidToken(true); // setIsValidToken(true);
} else { // } else {
toast.error('Invalid or expired reset link'); // toast.error('Invalid or expired reset link');
setTimeout(() => navigate('/auth/forgot-password'), 2000); // setTimeout(() => navigate('/auth/forgot-password'), 2000);
} // }
}); // });
}, [navigate]); // }, [navigate]);
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
@@ -59,32 +59,36 @@ export default function ResetPasswordPage() {
} }
}; };
if (!isValidToken) { // if (!isValidToken) {
return ( // return (
<div className="flex justify-center items-center min-h-screen bg-gray-50"> // <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950">
<div className="text-center"> // <div className="text-center">
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div> // <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mb-4"></div>
<p className="text-gray-600">Verifying reset link...</p> // <p className="text-gray-600 dark:text-gray-400">
</div> // Verifying reset link...
</div> // </p>
); // </div>
} // </div>
// );
// }
return ( return (
<div className="flex justify-center items-center min-h-screen bg-gray-50 p-4"> <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
<div className="bg-white w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200"> <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-3xl font-bold text-gray-900 mb-2"> <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
Set New Password Set New Password
</h2> </h2>
<p className="text-gray-600">Enter your new password below</p> <p className="text-gray-600 dark:text-gray-400">
Enter your new password below
</p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
<div> <div>
<label <label
htmlFor="password" htmlFor="password"
className="block text-sm font-medium text-gray-700 mb-1" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
> >
New Password New Password
</label> </label>
@@ -95,7 +99,7 @@ export default function ResetPasswordPage() {
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••" placeholder="••••••••"
disabled={isLoading} disabled={isLoading}
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed" className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
required required
minLength={6} minLength={6}
/> />
@@ -104,7 +108,7 @@ export default function ResetPasswordPage() {
<div> <div>
<label <label
htmlFor="confirmPassword" htmlFor="confirmPassword"
className="block text-sm font-medium text-gray-700 mb-1" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
> >
Confirm New Password Confirm New Password
</label> </label>
@@ -115,7 +119,7 @@ export default function ResetPasswordPage() {
onChange={(e) => setConfirmPassword(e.target.value)} onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="••••••••" placeholder="••••••••"
disabled={isLoading} disabled={isLoading}
className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed" className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
required required
minLength={6} minLength={6}
/> />
apps/hackathon/src/app/auth/signup/page.tsx
+22 -18
View File
@@ -138,8 +138,8 @@ export default function SignupPage() {
}; };
return ( return (
<div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-neutral-950 p-4"> <div className="flex justify-center items-center min-h-screen bg-gray-50 dark:bg-gray-950 p-4">
<div className="bg-white dark:bg-neutral-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-neutral-700"> <div className="bg-white dark:bg-gray-900 w-full max-w-md p-8 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<button <button
onClick={() => navigate('/')} onClick={() => navigate('/')}
@@ -155,7 +155,9 @@ export default function SignupPage() {
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2"> <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
Create Account Create Account
</h2> </h2>
<p className="text-gray-600 dark:text-neutral-400">Join the hackathon community</p> <p className="text-gray-600 dark:text-gray-400">
Join the hackathon community
</p>
</div> </div>
{error && ( {error && (
@@ -168,7 +170,7 @@ export default function SignupPage() {
<div> <div>
<label <label
htmlFor="fullname" htmlFor="fullname"
className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
> >
Full Name Full Name
</label> </label>
@@ -179,7 +181,7 @@ export default function SignupPage() {
onChange={(e) => setFullname(e.target.value)} onChange={(e) => setFullname(e.target.value)}
placeholder="John Doe" placeholder="John Doe"
disabled={isEmailLoading} disabled={isEmailLoading}
className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed" className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
required required
/> />
</div> </div>
@@ -187,7 +189,7 @@ export default function SignupPage() {
<div> <div>
<label <label
htmlFor="email" htmlFor="email"
className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
> >
Email Email
</label> </label>
@@ -198,7 +200,7 @@ export default function SignupPage() {
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
placeholder="your@email.com" placeholder="your@email.com"
disabled={isEmailLoading} disabled={isEmailLoading}
className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed" className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
required required
/> />
</div> </div>
@@ -206,7 +208,7 @@ export default function SignupPage() {
<div> <div>
<label <label
htmlFor="password" htmlFor="password"
className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
> >
Password Password
</label> </label>
@@ -217,7 +219,7 @@ export default function SignupPage() {
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••" placeholder="••••••••"
disabled={isEmailLoading} disabled={isEmailLoading}
className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed" className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
required required
/> />
</div> </div>
@@ -225,7 +227,7 @@ export default function SignupPage() {
<div> <div>
<label <label
htmlFor="confirmPassword" htmlFor="confirmPassword"
className="block text-sm font-medium text-gray-700 dark:text-neutral-300 mb-1" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
> >
Confirm Password Confirm Password
</label> </label>
@@ -236,7 +238,7 @@ export default function SignupPage() {
onChange={(e) => setConfirmPassword(e.target.value)} onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="••••••••" placeholder="••••••••"
disabled={isEmailLoading} disabled={isEmailLoading}
className="w-full px-4 py-2.5 border border-gray-300 dark:border-neutral-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-neutral-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 disabled:bg-gray-100 dark:disabled:bg-neutral-700 disabled:cursor-not-allowed" className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
required required
/> />
</div> </div>
@@ -244,23 +246,25 @@ export default function SignupPage() {
<button <button
type="submit" type="submit"
disabled={isEmailLoading} disabled={isEmailLoading}
className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900 disabled:bg-gray-400 dark:disabled:bg-neutral-600 disabled:cursor-not-allowed transition-colors cursor-pointer" className="w-full py-3 bg-primary-600 text-white rounded-lg font-semibold hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors cursor-pointer"
> >
{isEmailLoading ? 'Creating account...' : 'Create Account'} {isEmailLoading ? 'Creating account...' : 'Create Account'}
</button> </button>
</form> </form>
<div className="my-6 flex items-center"> <div className="my-6 flex items-center">
<div className="flex-1 border-t border-gray-300 dark:border-neutral-600"></div> <div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
<span className="px-4 text-sm text-gray-500 dark:text-neutral-400">OR</span> <span className="px-4 text-sm text-gray-500 dark:text-gray-400">
<div className="flex-1 border-t border-gray-300 dark:border-neutral-600"></div> OR
</span>
<div className="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
</div> </div>
<button <button
onClick={handleGithubLogin} onClick={handleGithubLogin}
disabled={isGithubLoading} disabled={isGithubLoading}
type="button" type="button"
className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-neutral-800 border border-gray-300 dark:border-neutral-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-neutral-900 disabled:bg-gray-100 dark:disabled:bg-neutral-800 disabled:cursor-not-allowed transition-colors cursor-pointer" className="w-full py-3 flex items-center justify-center gap-2 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition-colors cursor-pointer"
> >
<GithubOutlined className="text-xl" /> <GithubOutlined className="text-xl" />
<span> <span>
@@ -269,7 +273,7 @@ export default function SignupPage() {
</button> </button>
<div className="mt-6 text-center"> <div className="mt-6 text-center">
<p className="text-gray-600 dark:text-neutral-400 text-sm"> <p className="text-gray-600 dark:text-gray-400 text-sm">
Already have an account?{' '} Already have an account?{' '}
<a <a
href="/auth/login" href="/auth/login"
@@ -281,7 +285,7 @@ export default function SignupPage() {
</div> </div>
<div className="mt-6 text-center"> <div className="mt-6 text-center">
<p className="text-gray-500 dark:text-neutral-500 text-xs"> <p className="text-gray-500 dark:text-gray-500 text-xs">
By signing up, you agree to our Terms of Service and Privacy Policy By signing up, you agree to our Terms of Service and Privacy Policy
</p> </p>
</div> </div>