feat(auth): update layout and styling for login and registration pages

This commit is contained in:
2026-03-29 20:30:16 +02:00
parent 910cf6eaee
commit c028abd323
6 changed files with 30 additions and 15 deletions

0
.codex Normal file
View File

View File

@@ -3,12 +3,11 @@ import { LoginForm } from "@/components/auth/login-form";
export default function LoginPage() { export default function LoginPage() {
return ( return (
<main className="mx-auto flex min-h-screen w-full max-w-md flex-col justify-center px-6 py-16"> <main className="auth-shell">
<div className="rounded-xl border border-border/80 bg-panel/50 p-6 md:p-7"> <div className="w-full p-2 md:p-4">
<div className="mb-8 space-y-3"> <div className="mb-8 space-y-3 text-center">
<p className="text-xs uppercase tracking-[0.2em] text-muted">PayMe</p> <p className="text-xs uppercase tracking-[0.2em] text-muted">PayMe</p>
<h1 className="text-2xl font-semibold">Sign in</h1> <h1 className="text-3xl font-semibold">Sign in</h1>
<p className="text-sm text-muted">Use your email and password to manage your public payment profile.</p>
</div> </div>
<LoginForm /> <LoginForm />
<p className="mt-6 text-sm text-muted"> <p className="mt-6 text-sm text-muted">

View File

@@ -3,12 +3,11 @@ import { RegisterForm } from "@/components/auth/register-form";
export default function RegisterPage() { export default function RegisterPage() {
return ( return (
<main className="mx-auto flex min-h-screen w-full max-w-md flex-col justify-center px-6 py-16"> <main className="auth-shell">
<div className="rounded-xl border border-border/80 bg-panel/50 p-6 md:p-7"> <div className="w-full p-2 md:p-4">
<div className="mb-8 space-y-3"> <div className="mb-8 space-y-3 text-center">
<p className="text-xs uppercase tracking-[0.2em] text-muted">PayMe</p> <p className="text-xs uppercase tracking-[0.2em] text-muted">PayMe</p>
<h1 className="text-2xl font-semibold">Create account</h1> <h1 className="text-3xl font-semibold">Create account</h1>
<p className="text-sm text-muted">Start publishing your payment details in a self-hosted profile.</p>
</div> </div>
<RegisterForm /> <RegisterForm />
<p className="mt-6 text-sm text-muted"> <p className="mt-6 text-sm text-muted">

View File

@@ -75,6 +75,17 @@ a {
padding: 2.5rem 1.75rem 3rem; padding: 2.5rem 1.75rem 3rem;
} }
.auth-shell {
width: 100%;
max-width: 40rem;
margin: 0 auto;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1.25rem;
}
.terminal-section { .terminal-section {
border-top: 1px solid rgb(var(--color-border) / 0.8); border-top: 1px solid rgb(var(--color-border) / 0.8);
padding-top: 2.5rem; padding-top: 2.5rem;
@@ -159,6 +170,10 @@ select.ui-control {
padding: 3rem 2.25rem 3.5rem; padding: 3rem 2.25rem 3.5rem;
} }
.auth-shell {
padding: 3rem 2rem;
}
.terminal-section { .terminal-section {
padding-top: 3rem; padding-top: 3rem;
} }

View File

@@ -38,7 +38,7 @@ export function LoginForm() {
} }
return ( return (
<form className="space-y-4" onSubmit={onSubmit}> <form className="space-y-5" onSubmit={onSubmit}>
<label className="block space-y-2 text-sm"> <label className="block space-y-2 text-sm">
<span className="text-muted">Email</span> <span className="text-muted">Email</span>
<Input <Input
@@ -63,9 +63,11 @@ export function LoginForm() {
{error ? <p className="text-sm text-red-300">{error}</p> : null} {error ? <p className="text-sm text-red-300">{error}</p> : null}
<Button type="submit" variant="primary" className="w-full" disabled={pending}> <div style={{ marginTop: 26 }}>
<Button type="submit" variant="primary" className="dashboard-action min-h-11 w-full text-base" disabled={pending}>
{pending ? "Signing in..." : "Sign in"} {pending ? "Signing in..." : "Sign in"}
</Button> </Button>
</div>
</form> </form>
); );
} }

View File

@@ -97,7 +97,7 @@ export function RegisterForm() {
{error ? <p className="text-sm text-red-300">{error}</p> : null} {error ? <p className="text-sm text-red-300">{error}</p> : null}
<Button type="submit" variant="primary" className="w-full" disabled={pending}> <Button type="submit" variant="primary" className="dashboard-action min-h-11 w-full text-base" disabled={pending}>
{pending ? "Creating account..." : "Create account"} {pending ? "Creating account..." : "Create account"}
</Button> </Button>
</form> </form>