feat(auth): update layout and styling for login and registration pages
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user