Skip to content

Commit 79b2c17

Browse files
marcus-pousettemarcus-pousette
committed
fix: rset page stylibng
1 parent 1cc0d32 commit 79b2c17

File tree

2 files changed

+41
-18
lines changed

2 files changed

+41
-18
lines changed

‎packages/apps/explorer/src/routes/reset.tsx‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,27 +29,41 @@ export function ResetPasswordRoute() {
2929

3030
if (status === 'loading') {
3131
return (
32-
<div className="flex min-h-screen items-center justify-center bg-slate-100 text-slate-500">
33-
<span className="text-sm font-medium">Preparing reset form…</span>
32+
<div className="min-h-screen bg-gradient-to-br from-slate-100 via-white to-slate-50 text-slate-900">
33+
<div className="mx-auto flex min-h-screen w-full items-center justify-center px-4 py-12 sm:px-6">
34+
<section className="w-full max-w-md">
35+
<div className="rounded-3xl bg-white/90 px-8 py-10 text-center shadow-2xl shadow-slate-900/10 ring-1 ring-slate-200/70 backdrop-blur">
36+
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Powergit</p>
37+
<p className="mt-4 text-sm text-slate-500">Preparing reset form…</p>
38+
</div>
39+
</section>
40+
</div>
3441
</div>
3542
)
3643
}
3744

3845
if (!completed && status === 'unauthenticated') {
3946
return (
40-
<div className="flex min-h-screen items-center justify-center bg-slate-100 px-4 text-center">
41-
<div className="max-w-md space-y-3 rounded-2xl border border-slate-200 bg-white px-6 py-8 shadow">
42-
<h2 className="text-lg font-semibold text-slate-900">Password reset link expired</h2>
43-
<p className="text-sm text-slate-600">Request a new reset email before trying again.</p>
47+
<div className="min-h-screen bg-gradient-to-br from-slate-100 via-white to-slate-50 text-slate-900">
48+
<div className="mx-auto flex min-h-screen w-full items-center justify-center px-4 py-12 sm:px-6">
49+
<section className="w-full max-w-md">
50+
<div className="rounded-3xl bg-white/90 px-8 py-10 text-center shadow-2xl shadow-slate-900/10 ring-1 ring-slate-200/70 backdrop-blur">
51+
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Powergit</p>
52+
<h2 className="mt-4 text-lg font-semibold text-slate-900">Password reset link expired</h2>
53+
<p className="mt-2 text-sm text-slate-500">Request a new reset email before trying again.</p>
54+
<div className="mt-6">
4455
<button
4556
type="button"
46-
className="btn w-full"
57+
className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-emerald-600 px-4 text-sm font-semibold text-white shadow-sm shadow-emerald-600/25 transition hover:bg-emerald-500 focus:outline-none focus:ring-4 focus:ring-emerald-200/60"
4758
onClick={() => {
4859
void navigate({ to: '/auth' })
4960
}}
5061
>
5162
Return to sign in
5263
</button>
64+
</div>
65+
</div>
66+
</section>
5367
</div>
5468
</div>
5569
)

‎packages/apps/explorer/src/screens/auth/ResetPasswordScreen.tsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,52 +43,62 @@ export const ResetPasswordScreen: React.FC<ResetPasswordScreenProps> = ({ onSubm
4343
return (
4444
<div className="min-h-screen bg-gradient-to-br from-slate-100 via-white to-slate-50 text-slate-900">
4545
<div className="mx-auto flex min-h-screen w-full items-center justify-center px-4 py-12 sm:px-6">
46-
<div className="w-full max-w-md">
47-
<div className="card space-y-6 px-8 py-10">
46+
<section className="w-full max-w-md">
47+
<div className="rounded-3xl bg-white/90 px-8 py-10 shadow-2xl shadow-slate-900/10 ring-1 ring-slate-200/70 backdrop-blur">
4848
<header className="space-y-2 text-center">
49+
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Powergit</p>
4950
<h2 className="text-2xl font-semibold text-slate-900">Set a new password</h2>
5051
<p className="text-sm text-slate-500">Choose a new password to finish resetting your account.</p>
5152
</header>
53+
5254
{error ? (
53-
<div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
55+
<div className="mt-6 rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700 ring-1 ring-red-200" role="alert">
5456
{error}
5557
</div>
5658
) : null}
5759
{successMessage ? (
58-
<div className="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700" role="status">
60+
<div className="mt-6 rounded-xl bg-blue-50 px-4 py-3 text-sm text-blue-700 ring-1 ring-blue-200" role="status">
5961
{successMessage}
6062
</div>
6163
) : null}
62-
<form className="space-y-4" onSubmit={handleSubmit}>
64+
65+
<form className="mt-8 space-y-4" onSubmit={handleSubmit}>
6366
<label className="flex flex-col gap-2 text-left">
6467
<span className="text-xs font-semibold uppercase tracking-wide text-slate-400">New password</span>
6568
<input
66-
className="input h-12"
69+
className="h-12 w-full rounded-xl border border-slate-200 bg-white px-4 text-sm shadow-sm placeholder:text-slate-400 focus:border-emerald-400 focus:outline-none focus:ring-4 focus:ring-emerald-200/40"
6770
type="password"
6871
autoComplete="new-password"
6972
value={password}
7073
onChange={(event) => setPassword(event.target.value)}
7174
placeholder="New password"
75+
required
7276
/>
7377
</label>
7478
<label className="flex flex-col gap-2 text-left">
7579
<span className="text-xs font-semibold uppercase tracking-wide text-slate-400">Confirm password</span>
7680
<input
77-
className="input h-12"
81+
className="h-12 w-full rounded-xl border border-slate-200 bg-white px-4 text-sm shadow-sm placeholder:text-slate-400 focus:border-emerald-400 focus:outline-none focus:ring-4 focus:ring-emerald-200/40"
7882
type="password"
7983
autoComplete="new-password"
8084
value={confirmPassword}
8185
onChange={(event) => setConfirmPassword(event.target.value)}
8286
placeholder="Confirm password"
87+
required
8388
/>
8489
</label>
90+
8591
<div className="flex flex-col gap-3 pt-2 sm:flex-row">
86-
<button type="submit" className="btn w-full" disabled={loading}>
92+
<button
93+
type="submit"
94+
className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-emerald-600 px-4 text-sm font-semibold text-white shadow-sm shadow-emerald-600/25 transition hover:bg-emerald-500 focus:outline-none focus:ring-4 focus:ring-emerald-200/60 disabled:cursor-not-allowed disabled:opacity-50"
95+
disabled={loading}
96+
>
8797
{loading ? 'Updating…' : 'Update password'}
8898
</button>
8999
<button
90100
type="button"
91-
className="btn-secondary w-full"
101+
className="inline-flex h-12 w-full items-center justify-center rounded-xl bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-emerald-200/40 disabled:cursor-not-allowed disabled:opacity-50"
92102
onClick={() => {
93103
void onCancel()
94104
}}
@@ -99,9 +109,8 @@ export const ResetPasswordScreen: React.FC<ResetPasswordScreenProps> = ({ onSubm
99109
</div>
100110
</form>
101111
</div>
102-
</div>
112+
</section>
103113
</div>
104114
</div>
105115
)
106116
}
107-

0 commit comments

Comments
 (0)