Move onboarding to auth layout for consistent setup experience

The onboarding wizard was wrapped in the dashboard layout (sidebar +
topbar), which felt jarring when coming from the clean workspace-setup
page. Moved it to the (auth) layout so the entire setup flow stays in
the same centered, chrome-free experience. Widened the auth layout to
max-w-3xl and added max-w-md to each narrow auth page individually.

Made-with: Cursor
This commit is contained in:
Randall Stillwell 2026-04-16 21:43:15 -05:00
parent 150ec3524d
commit 1bceeb0418
7 changed files with 20 additions and 22 deletions

View file

@ -29,7 +29,7 @@ export default function InvitePage() {
if (status === "loading") {
return (
<div className="glass-card flex flex-col items-center rounded-2xl p-8">
<div className="glass-card mx-auto flex w-full max-w-md flex-col items-center rounded-2xl p-8">
<Loader2 className="size-8 animate-spin text-muted-foreground" />
<p className="mt-4 text-sm text-muted-foreground">Verifying invitation...</p>
</div>
@ -38,7 +38,7 @@ export default function InvitePage() {
if (status === "invalid") {
return (
<div className="glass-card flex flex-col items-center rounded-2xl p-8 text-center">
<div className="glass-card mx-auto flex w-full max-w-md flex-col items-center rounded-2xl p-8 text-center">
<XCircle className="mb-4 size-12 text-destructive" />
<h1 className="text-xl font-bold">Invalid Invitation</h1>
<p className="mt-2 text-sm text-muted-foreground">
@ -56,7 +56,7 @@ export default function InvitePage() {
}
return (
<div className="glass-card flex flex-col items-center rounded-2xl p-8 text-center">
<div className="glass-card mx-auto flex w-full max-w-md flex-col items-center rounded-2xl p-8 text-center">
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
<ScanLine className="size-7 text-white" />
</div>

View file

@ -6,7 +6,7 @@ export default function AuthLayout({
return (
<div className="relative flex min-h-screen items-center justify-center">
<div className="gradient-mesh pointer-events-none fixed inset-0 z-0" />
<div className="relative z-10 w-full max-w-md p-4">{children}</div>
<div className="relative z-10 w-full max-w-3xl p-4">{children}</div>
</div>
);
}

View file

@ -53,7 +53,7 @@ function LoginForm() {
}
return (
<div className="glass-card w-full rounded-2xl p-8">
<div className="glass-card mx-auto w-full max-w-md rounded-2xl p-8">
<div className="mb-8 flex flex-col items-center">
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
<ScanLine className="size-7 text-white" />

View file

@ -1,7 +1,6 @@
"use client";
import { useEffect, useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import {
Building2,
MapPin,
@ -60,7 +59,6 @@ const TIMEZONES = [
];
export default function OnboardingPage() {
const router = useRouter();
const [currentStep, setCurrentStep] = useState(0);
const [loading, setLoading] = useState(true);
const [submitting, setSubmitting] = useState(false);
@ -97,14 +95,14 @@ export default function OnboardingPage() {
.then((r) => r.json())
.then((data) => {
if (data.onboardingComplete) {
router.replace("/");
window.location.href = "/";
return;
}
setCurrentStep(data.currentStep || 0);
})
.catch(() => {})
.finally(() => setLoading(false));
}, [router]);
}, []);
const submitStep = useCallback(
async (step: number, data: Record<string, unknown>) => {
@ -141,7 +139,7 @@ export default function OnboardingPage() {
setSubmitting(false);
}
},
[router]
[]
);
function handleOrgSubmit(e: React.FormEvent) {
@ -943,8 +941,8 @@ export default function OnboardingPage() {
</div>
<div className="grid gap-3 text-left sm:grid-cols-3">
<button
onClick={() => router.push("/cards")}
<a
href="/cards"
className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
>
<Upload className="size-5 text-primary" />
@ -954,9 +952,9 @@ export default function OnboardingPage() {
<span className="text-xs text-muted-foreground">
Scan and process a response card
</span>
</button>
<button
onClick={() => router.push("/settings/users")}
</a>
<a
href="/settings/users"
className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
>
<Building2 className="size-5 text-primary" />
@ -966,9 +964,9 @@ export default function OnboardingPage() {
<span className="text-xs text-muted-foreground">
Add reviewers and editors
</span>
</button>
<button
onClick={() => router.push("/")}
</a>
<a
href="/"
className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
>
<PartyPopper className="size-5 text-primary" />
@ -978,7 +976,7 @@ export default function OnboardingPage() {
<span className="text-xs text-muted-foreground">
See your workspace overview
</span>
</button>
</a>
</div>
<Button

View file

@ -117,7 +117,7 @@ export default function SetupPage() {
}
return (
<div className="glass-card w-full max-w-lg rounded-2xl p-8">
<div className="glass-card mx-auto w-full max-w-lg rounded-2xl p-8">
<div className="mb-8 flex flex-col items-center">
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
<ScanLine className="size-7 text-white" />

View file

@ -81,7 +81,7 @@ function SignupForm() {
}
return (
<div className="glass-card w-full rounded-2xl p-8">
<div className="glass-card mx-auto w-full max-w-md rounded-2xl p-8">
<div className="mb-8 flex flex-col items-center">
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
<ScanLine className="size-7 text-white" />

View file

@ -34,7 +34,7 @@ export default function WorkspaceSetupPage() {
}
return (
<div className="glass-card w-full rounded-2xl p-8">
<div className="glass-card mx-auto w-full max-w-md rounded-2xl p-8">
<div className="mb-8 flex flex-col items-center">
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
<ScanLine className="size-7 text-white" />