Skip to content

Commit 3ea0ff4

Browse files
harrisj4harrisj4
committed
Redesigned layout with colour schemes
1 parent 0860f76 commit 3ea0ff4

File tree

7 files changed

+272
-144
lines changed

7 files changed

+272
-144
lines changed

‎app/auth/signin/page.tsx‎

Lines changed: 81 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -31,60 +31,93 @@ export default function SignIn() {
3131
};
3232

3333
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>
34+
<div className="min-h-screen bg-[#0b1016] flex items-center justify-center px-4">
35+
<div className="w-full max-w-md">
36+
<Card className="bg-[#111827]/90 border border-[#1f2937] text-slate-100 shadow-xl backdrop-blur">
37+
<CardHeader className="pb-3">
38+
<CardTitle className="text-lg font-semibold tracking-tight text-slate-100 text-center">
39+
Sign In
40+
</CardTitle>
41+
<p className="text-xs text-slate-400 tracking-wide uppercase text-center">
42+
Welcome back to FlowBuildr
43+
</p>
44+
</CardHeader>
3945

40-
<CardContent>
41-
{localError && <Alert variant="error" message={localError} />}
46+
<CardContent className="pt-2">
47+
{localError && (
48+
<div className="mb-4">
49+
<Alert variant="error" message={localError} />
50+
</div>
51+
)}
4252

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-
/>
53+
<form onSubmit={handleSignIn} className="space-y-4 text-white">
54+
{/* Email */}
55+
<div className="space-y-1">
56+
<label
57+
htmlFor="email"
58+
className="block text-sm font-medium text-slate-100"
59+
>
60+
Email
61+
</label>
62+
<Input
63+
id="email"
64+
type="email"
65+
value={email}
66+
onChange={(e) => setEmail(e.target.value)}
67+
placeholder="[email protected]"
68+
required
69+
/>
70+
</div>
5371

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-
/>
72+
{/* Password */}
73+
<div className="space-y-1">
74+
<label
75+
htmlFor="password"
76+
className="block text-sm font-medium text-slate-100"
77+
>
78+
Password
79+
</label>
80+
<Input
81+
id="password"
82+
type="password"
83+
value={password}
84+
onChange={(e) => setPassword(e.target.value)}
85+
placeholder="••••••••"
86+
required
87+
/>
88+
</div>
6389

64-
<Button
65-
type="submit"
66-
variant="primary"
67-
className="w-full"
68-
isLoading={isLoading}
69-
>
70-
Sign In
71-
</Button>
72-
</form>
90+
<Button
91+
type="submit"
92+
variant="primary"
93+
className="w-full !bg-[#297fd7] !hover:bg-[#2f8af0] !border-0"
94+
isLoading={isLoading}
95+
>
96+
Sign In
97+
</Button>
98+
</form>
7399

74-
<p className="mt-6 text-center text-gray-600">
75-
Don't have an account?{' '}
76-
<Link href="/auth/signup" className="text-indigo-600 hover:text-indigo-800 font-medium">
77-
Sign Up
78-
</Link>
79-
</p>
100+
<p className="mt-6 text-center text-sm text-slate-400">
101+
Don&apos;t have an account?{' '}
102+
<Link
103+
href="/auth/signup"
104+
className="text-[#4fa2ff] hover:text-[#76b7ff] font-medium"
105+
>
106+
Sign Up
107+
</Link>
108+
</p>
80109

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>
110+
<p className="mt-3 text-center">
111+
<Link
112+
href="/"
113+
className="text-xs text-slate-500 hover:text-slate-300"
114+
>
115+
← Back to home
116+
</Link>
117+
</p>
118+
</CardContent>
119+
</Card>
120+
</div>
88121
</div>
89122
);
90123
}

‎app/auth/signup/page.tsx‎

Lines changed: 108 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useAuth } from '@/contexts';
66
import { Button, Input, Card, CardHeader, CardContent, CardTitle } from '@/components/ui';
77
import { Alert } from '@/components/ui/Alert';
88
import Link from 'next/link';
9+
import Image from 'next/image';
910

1011
export default function SignUp() {
1112
const [email, setEmail] = useState('');
@@ -23,7 +24,6 @@ export default function SignUp() {
2324
setIsLoading(true);
2425
setSuccess(false);
2526

26-
// Validation
2727
if (password !== confirmPassword) {
2828
setLocalError('Passwords do not match');
2929
setIsLoading(false);
@@ -50,73 +50,120 @@ export default function SignUp() {
5050
};
5151

5252
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>
53+
<div className="min-h-screen bg-[#0b1016] flex items-center justify-center px-4">
54+
<div className="w-full max-w-md">
55+
<Card className="bg-[#111827]/90 border border-[#1f2937] text-slate-100 shadow-xl backdrop-blur">
56+
<CardHeader className="pb-3">
57+
<CardTitle className="text-lg font-semibold tracking-tight text-slate-100 text-center">
58+
Create your FlowBuildr account
59+
</CardTitle>
60+
<p className="text-xs text-slate-400 tracking-wide uppercase text-center">
61+
Takeoffs powered by FlowBuildr
62+
</p>
63+
</CardHeader>
5864

59-
<CardContent>
60-
{localError && <Alert variant="error" message={localError} />}
61-
{success && (
62-
<Alert variant="success" message="Account created successfully! Redirecting..." />
63-
)}
65+
<CardContent className="pt-2">
66+
{localError && (
67+
<div className="mb-4">
68+
<Alert variant="error" message={localError} />
69+
</div>
70+
)}
6471

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-
/>
72+
{success && (
73+
<div className="mb-4">
74+
<Alert
75+
variant="success"
76+
message="Account created successfully! Redirecting..."
77+
/>
78+
</div>
79+
)}
7580

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-
/>
81+
<form onSubmit={handleSignUp} className="space-y-4 text-white">
82+
{/* Email */}
83+
<div className="space-y-1">
84+
<label
85+
htmlFor="email"
86+
className="block text-sm font-medium text-slate-100"
87+
>
88+
Email
89+
</label>
90+
<Input
91+
id="email"
92+
type="email"
93+
value={email}
94+
onChange={(e) => setEmail(e.target.value)}
95+
placeholder="[email protected]"
96+
required
97+
/>
98+
</div>
8599

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-
/>
100+
{/* Password */}
101+
<div className="space-y-1">
102+
<label
103+
htmlFor="password"
104+
className="block text-sm font-medium text-slate-100"
105+
>
106+
Password
107+
</label>
108+
<Input
109+
id="password"
110+
type="password"
111+
value={password}
112+
onChange={(e) => setPassword(e.target.value)}
113+
placeholder="••••••••"
114+
required
115+
/>
116+
</div>
95117

96-
<Button
97-
type="submit"
98-
variant="primary"
99-
className="w-full"
100-
isLoading={isLoading}
101-
>
102-
Sign Up
103-
</Button>
104-
</form>
118+
{/* Confirm Password */}
119+
<div className="space-y-1">
120+
<label
121+
htmlFor="confirmPassword"
122+
className="block text-sm font-medium text-slate-100"
123+
>
124+
Confirm Password
125+
</label>
126+
<Input
127+
id="confirmPassword"
128+
type="password"
129+
value={confirmPassword}
130+
onChange={(e) => setConfirmPassword(e.target.value)}
131+
placeholder="••••••••"
132+
required
133+
/>
134+
</div>
105135

106-
<p className="mt-6 text-center text-gray-600">
107-
Already have an account?{' '}
108-
<Link href="/auth/signin" className="text-indigo-600 hover:text-indigo-800 font-medium">
109-
Sign In
110-
</Link>
111-
</p>
136+
<Button
137+
type="submit"
138+
variant="primary"
139+
className="w-full !bg-[#297fd7] !hover:bg-[#2f8af0] !border-0"
140+
isLoading={isLoading}
141+
>
142+
Sign Up
143+
</Button>
144+
</form>
112145

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>
146+
<p className="mt-6 text-center text-sm text-slate-400">
147+
Already have an account?{' '}
148+
<Link
149+
href="/auth/signin"
150+
className="text-[#4fa2ff] hover:text-[#76b7ff] font-medium"
151+
>
152+
Sign In
153+
</Link>
154+
</p>
155+
156+
<p className="mt-3 text-center">
157+
<Link
158+
href="/"
159+
className="text-xs text-slate-500 hover:text-slate-300"
160+
>
161+
← Back to home
162+
</Link>
163+
</p>
164+
</CardContent>
165+
</Card>
166+
</div>
120167
</div>
121168
);
122169
}

‎app/dashboard/page.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,7 @@ export default function Dashboard() {
7171
</p>
7272
</div>
7373

74-
<div className="bg-green-50 border border-green-200 rounded-lg p-6">
75-
<h3 className="text-lg font-semibold text-green-900 mb-2">
76-
🎉 Success!
77-
</h3>
78-
<p className="text-gray-700">
79-
You're successfully authenticated with Supabase. This is a protected page
80-
that only authenticated users can access.
81-
</p>
82-
</div>
74+
8375
</CardContent>
8476
</Card>
8577
</main>

0 commit comments

Comments
 (0)