zv/payme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zvspany
2026-03-29 20:30:16 +02:00
parent 910cf6eaee
commit c028abd323
6 changed files with 30 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
.codex Normal file
View File

9
app/(auth)/login/page.tsx
View File

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

9
app/(auth)/register/page.tsx
View File

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

15
app/globals.css
View File

@@ -75,6 +75,17 @@ a {
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 {
border-top: 1px solid rgb(var(--color-border) / 0.8);
padding-top: 2.5rem;
@@ -159,6 +170,10 @@ select.ui-control {
padding: 3rem 2.25rem 3.5rem;
}
.auth-shell {
padding: 3rem 2rem;
}
.terminal-section {
padding-top: 3rem;
}

10
components/auth/login-form.tsx
View File

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

2
components/auth/register-form.tsx
View File

@@ -97,7 +97,7 @@ export function RegisterForm() {
{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"}
</Button>
</form>