Unify page layouts, compact headers and shared UI styling

frontend/app/signup/page.tsx

@@ -2,7 +2,7 @@
 
 import { Suspense, useEffect, useMemo, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import BrandingLogo from '../ui/BrandingLogo'
+import AuthLayout from '../ui/AuthLayout'
 import { clearToken, getApiBase, setToken } from '../lib/auth'
 
 type InviteInfo = {
@@ -133,11 +133,8 @@ function SignupPageContent() {
   }
 
   return (
-    <main className="card auth-card">
-      <BrandingLogo className="brand-logo brand-logo--login" />
-      <h1>Create account</h1>
-      <p className="lede">Use an invite code from your admin to create your Jellyfin-backed Magent account.</p>
-      <form onSubmit={submit} className="auth-form">
+    <AuthLayout title="Create account" description="Your invite is the first step to Grizzlyflix.">
+      <form onSubmit={submit} className="account-form login-form auth-flow-form">
         <label>
           Invite code
           <div className="invite-lookup-row">
@@ -162,16 +159,16 @@ function SignupPageContent() {
             <div className="invite-summary-row">
               <strong>{invite.label || invite.code}</strong>
               <span className={`small-pill ${invite.is_usable ? '' : 'is-muted'}`}>
-                {invite.is_usable ? 'Usable' : 'Unavailable'}
+                {invite.is_usable ? 'Ready' : 'Unavailable'}
               </span>
             </div>
             {invite.description && <p>{invite.description}</p>}
-            <div className="admin-meta-row">
+            <details className="auth-invite-details"><summary>Invite details</summary><div className="admin-meta-row">
               <span>Code: {invite.code}</span>
               <span>Expires: {formatDate(invite.expires_at)}</span>
               <span>Remaining uses: {invite.remaining_uses ?? 'Unlimited'}</span>
               <span>Profile: {invite.profile?.name || 'None'}</span>
-            </div>
+            </div></details>
           </div>
         )}
         <label>
@@ -200,24 +197,24 @@ function SignupPageContent() {
             autoComplete="new-password"
           />
         </label>
-        {error && <div className="error-banner">{error}</div>}
-        {status && <div className="status-banner">{status}</div>}
+        {error && <div className="account-notice is-error" role="alert">{error}</div>}
+        {status && <div className="account-notice is-status" role="status">{status}</div>}
         <div className="auth-actions">
-          <button type="submit" disabled={!canSubmit}>
-            {loading ? 'Creating account…' : 'Create account (Jellyfin + Magent)'}
+          <button type="submit" className="account-primary" disabled={!canSubmit}>
+            {loading ? 'Creating account…' : 'Create account'}
           </button>
         </div>
         <button type="button" className="ghost-button" disabled={loading} onClick={() => router.push('/login')}>
           Back to sign in
         </button>
       </form>
-    </main>
+    </AuthLayout>
   )
 }
 
 export default function SignupPage() {
   return (
-    <Suspense fallback={<main className="card auth-card">Loading sign-up…</main>}>
+    <Suspense fallback={<AuthLayout title="Create account" description="Your invite is the first step to Grizzlyflix."><p role="status">Loading sign-up…</p></AuthLayout>}>
       <SignupPageContent />
     </Suspense>
   )