Skip to content

Commit 4471029

Browse files
minhazzzminhazzz
authored
Merge pull request #5 from techstartucalgary/feature/newui
Redesigned frontend layout, auth pages, and user dashboard
2 parents 6ac86c4 + bd0aa11 commit 4471029

File tree

10 files changed

+572
-190
lines changed

10 files changed

+572
-190
lines changed

‎app/auth/signin/page.tsx‎

Lines changed: 65 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33
import { useState } from 'react';
44
import { useRouter } from 'next/navigation';
55
import { useAuth } from '@/contexts';
6-
import { Button, Input, Card, CardHeader, CardContent, CardTitle } from '@/components/ui';
7-
import { Alert } from '@/components/ui/Alert';
86
import Link from 'next/link';
97

8+
109
export default function SignIn() {
1110
const [email, setEmail] = useState('');
1211
const [password, setPassword] = useState('');
@@ -31,60 +30,79 @@ export default function SignIn() {
3130
};
3231

3332
return (
34-
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
35-
<Card className="w-full max-w-md">
36-
<CardHeader>
37-
<CardTitle>Sign In</CardTitle>
38-
</CardHeader>
33+
<div className="min-h-screen bg-[#030712] text-white selection:bg-blue-500/30 font-sans">
34+
35+
36+
<div className="min-h-screen flex items-center justify-center relative overflow-hidden">
37+
38+
39+
<div className="absolute top-0 left-1/2 w-full -translate-x-1/2 h-full z-0 pointer-events-none">
40+
<div className="absolute top-1/4 left-10 w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[120px] opacity-50"></div>
41+
<div className="absolute bottom-1/4 right-10 w-[600px] h-[600px] bg-indigo-600/10 rounded-full blur-[120px] opacity-50"></div>
42+
</div>
43+
44+
<div className="w-full max-w-md p-8 bg-[#0b1120]/80 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl relative z-10 mx-4">
45+
<div className="text-center mb-8">
46+
<h2 className="text-3xl font-bold text-white mb-2 tracking-tight">Welcome Back</h2>
47+
<p className="text-gray-400 text-sm">
48+
Enter your credentials to access your workspace.
49+
</p>
50+
</div>
3951

40-
<CardContent>
41-
{localError && <Alert variant="error" message={localError} />}
52+
{localError && (
53+
<div className="mb-6 p-4 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm text-center">
54+
{localError}
55+
</div>
56+
)}
4257

43-
<form onSubmit={handleSignIn} className="space-y-4">
44-
<Input
45-
id="email"
46-
type="email"
47-
label="Email"
48-
value={email}
49-
onChange={(e) => setEmail(e.target.value)}
50-
placeholder="[email protected]"
51-
required
52-
/>
58+
<form onSubmit={handleSignIn} className="space-y-5">
59+
<div>
60+
<label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Email Address</label>
61+
<input
62+
type="email"
63+
value={email}
64+
onChange={(e) => setEmail(e.target.value)}
65+
placeholder="[email protected]"
66+
className="w-full bg-[#030712] border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all"
67+
required
68+
/>
69+
</div>
5370

54-
<Input
55-
id="password"
56-
type="password"
57-
label="Password"
58-
value={password}
59-
onChange={(e) => setPassword(e.target.value)}
60-
placeholder="••••••••"
61-
required
62-
/>
71+
<div>
72+
<label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Password</label>
73+
<input
74+
type="password"
75+
value={password}
76+
onChange={(e) => setPassword(e.target.value)}
77+
placeholder="••••••••"
78+
className="w-full bg-[#030712] border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all"
79+
required
80+
/>
81+
</div>
6382

64-
<Button
65-
type="submit"
66-
variant="primary"
67-
className="w-full"
68-
isLoading={isLoading}
83+
<button
84+
type="submit"
85+
disabled={isLoading}
86+
className="w-full px-6 py-3.5 rounded-lg font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 transition-all shadow-lg shadow-blue-500/20 mt-2 disabled:opacity-50 disabled:cursor-not-allowed"
6987
>
70-
Sign In
71-
</Button>
88+
{isLoading ? 'Signing In...' : 'Sign In'}
89+
</button>
7290
</form>
7391

74-
<p className="mt-6 text-center text-gray-600">
92+
<div className="mt-8 text-center text-sm text-gray-400">
7593
Don't have an account?{' '}
76-
<Link href="/auth/signup" className="text-indigo-600 hover:text-indigo-800 font-medium">
94+
<Link href="/auth/signup" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">
7795
Sign Up
7896
</Link>
79-
</p>
80-
81-
<p className="mt-2 text-center">
82-
<Link href="/" className="text-sm text-gray-500 hover:text-gray-700">
83-
← Back to home
84-
</Link>
85-
</p>
86-
</CardContent>
87-
</Card>
97+
</div>
98+
99+
<div className="mt-4 text-center">
100+
<Link href="/" className="text-xs text-gray-500 hover:text-white transition-colors">
101+
← Back to home
102+
</Link>
103+
</div>
104+
</div>
105+
</div>
88106
</div>
89107
);
90-
}
108+
}

‎app/auth/signup/page.tsx‎

Lines changed: 77 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
import { useState } from 'react';
44
import { useRouter } from 'next/navigation';
55
import { useAuth } from '@/contexts';
6-
import { Button, Input, Card, CardHeader, CardContent, CardTitle } from '@/components/ui';
7-
import { Alert } from '@/components/ui/Alert';
86
import Link from 'next/link';
97

108
export default function SignUp() {
@@ -23,7 +21,6 @@ export default function SignUp() {
2321
setIsLoading(true);
2422
setSuccess(false);
2523

26-
// Validation
2724
if (password !== confirmPassword) {
2825
setLocalError('Passwords do not match');
2926
setIsLoading(false);
@@ -50,73 +47,95 @@ export default function SignUp() {
5047
};
5148

5249
return (
53-
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
54-
<Card className="w-full max-w-md">
55-
<CardHeader>
56-
<CardTitle>Sign Up</CardTitle>
57-
</CardHeader>
50+
<div className="min-h-screen bg-[#030712] text-white selection:bg-blue-500/30 font-sans">
51+
<div className="min-h-screen flex items-center justify-center relative overflow-hidden">
52+
53+
{/* Background Gradients */}
54+
<div className="absolute top-0 left-1/2 w-full -translate-x-1/2 h-full z-0 pointer-events-none">
55+
<div className="absolute top-1/4 right-10 w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[120px] opacity-50"></div>
56+
<div className="absolute bottom-1/4 left-10 w-[600px] h-[600px] bg-indigo-600/10 rounded-full blur-[120px] opacity-50"></div>
57+
</div>
58+
59+
<div className="w-full max-w-md p-8 bg-[#0b1120]/80 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl relative z-10 mx-4">
60+
<div className="text-center mb-8">
61+
<h2 className="text-3xl font-bold text-white mb-2 tracking-tight">Create Your FlowBuildr Account</h2>
62+
<p className="text-gray-400 text-sm">
63+
Takeoffs powered by FlowBuildr
64+
</p>
65+
</div>
66+
67+
{localError && (
68+
<div className="mb-6 p-4 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm text-center">
69+
{localError}
70+
</div>
71+
)}
5872

59-
<CardContent>
60-
{localError && <Alert variant="error" message={localError} />}
6173
{success && (
62-
<Alert variant="success" message="Account created successfully! Redirecting..." />
74+
<div className="mb-6 p-4 rounded-lg bg-green-500/10 border border-green-500/20 text-green-400 text-sm text-center">
75+
Account created successfully! Redirecting...
76+
</div>
6377
)}
6478

65-
<form onSubmit={handleSignUp} className="space-y-4">
66-
<Input
67-
id="email"
68-
type="email"
69-
label="Email"
70-
value={email}
71-
onChange={(e) => setEmail(e.target.value)}
72-
placeholder="[email protected]"
73-
required
74-
/>
79+
<form onSubmit={handleSignUp} className="space-y-5">
80+
<div>
81+
<label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Email Address</label>
82+
<input
83+
type="email"
84+
value={email}
85+
onChange={(e) => setEmail(e.target.value)}
86+
placeholder="[email protected]"
87+
className="w-full bg-[#030712] border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all"
88+
required
89+
/>
90+
</div>
7591

76-
<Input
77-
id="password"
78-
type="password"
79-
label="Password"
80-
value={password}
81-
onChange={(e) => setPassword(e.target.value)}
82-
placeholder="••••••••"
83-
required
84-
/>
92+
<div>
93+
<label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Password</label>
94+
<input
95+
type="password"
96+
value={password}
97+
onChange={(e) => setPassword(e.target.value)}
98+
placeholder="••••••••"
99+
className="w-full bg-[#030712] border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all"
100+
required
101+
/>
102+
</div>
85103

86-
<Input
87-
id="confirmPassword"
88-
type="password"
89-
label="Confirm Password"
90-
value={confirmPassword}
91-
onChange={(e) => setConfirmPassword(e.target.value)}
92-
placeholder="••••••••"
93-
required
94-
/>
104+
<div>
105+
<label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Confirm Password</label>
106+
<input
107+
type="password"
108+
value={confirmPassword}
109+
onChange={(e) => setConfirmPassword(e.target.value)}
110+
placeholder="••••••••"
111+
className="w-full bg-[#030712] border border-gray-800 focus:border-blue-500 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all"
112+
required
113+
/>
114+
</div>
95115

96-
<Button
97-
type="submit"
98-
variant="primary"
99-
className="w-full"
100-
isLoading={isLoading}
116+
<button
117+
type="submit"
118+
disabled={isLoading}
119+
className="w-full px-6 py-3.5 rounded-lg font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 transition-all shadow-lg shadow-blue-500/20 mt-2 disabled:opacity-50 disabled:cursor-not-allowed"
101120
>
102-
Sign Up
103-
</Button>
121+
{isLoading ? 'Creating Account...' : 'Sign Up'}
122+
</button>
104123
</form>
105124

106-
<p className="mt-6 text-center text-gray-600">
125+
<div className="mt-8 text-center text-sm text-gray-400">
107126
Already have an account?{' '}
108-
<Link href="/auth/signin" className="text-indigo-600 hover:text-indigo-800 font-medium">
127+
<Link href="/auth/signin" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">
109128
Sign In
110129
</Link>
111-
</p>
112-
113-
<p className="mt-2 text-center">
114-
<Link href="/" className="text-sm text-gray-500 hover:text-gray-700">
115-
← Back to home
116-
</Link>
117-
</p>
118-
</CardContent>
119-
</Card>
130+
</div>
131+
132+
<div className="mt-4 text-center">
133+
<Link href="/" className="text-xs text-gray-500 hover:text-white transition-colors">
134+
← Back to home
135+
</Link>
136+
</div>
137+
</div>
138+
</div>
120139
</div>
121140
);
122-
}
141+
}

0 commit comments

Comments
 (0)