Commit98f45b4unknown_key
polish(auth): premium gateway feel for login + register (session 1.3)
polish(auth): premium gateway feel for login + register (session 1.3)
Phase 1.3 — gateway page polish. Login and register are the first
in-product surfaces a visitor touches; they should feel like a
serious 2026 SaaS, not a stock form template.
Changes to src/views/layout.tsx — .auth-container CSS:
- Width 420px → 480px (room to breathe, not cramped)
- Padding 32px → 40px (more vertical air around fields)
- Margin 64px → 72px (sits proud of the header gap)
- Border-radius var(--r-lg, 12px) → 16px (more pillowy)
- Shadow gains a soft accent-tinted glow:
0 24px 64px -16px rgba(140, 109, 255, 0.12)
- NEW ::before pseudo — 2px hairline gradient strip on the top edge
(transparent → violet → cyan → transparent). Signals AI-native
branding subliminally. Pointer-events: none so it never interferes
with form interaction.
- H2 font-size var(--t-lg) → 28px, weight 700, font-display family
(Inter Tight). Tight -0.025em letter-spacing. The headline now
looks like a product, not a placeholder.
- NEW .auth-subtitle class for the line below the H2 — muted, 14.5px,
1.5 line-height. Used to introduce the page in one sentence.
- .btn-primary inside .auth-container — bumped to 12px vertical
padding and 15px font-size for a more confident primary action.
Changes to src/routes/auth.tsx:
- Register page: H2 'Create account' → 'Create your account'.
Adds subtitle: 'Get the full AI suite — code review, auto-merge,
spec-to-PR — on unlimited public repos. No credit card.'
Lands the value prop before the user fills out a single field.
- Login page: H2 'Sign in' → 'Welcome back'. Friendlier, more
human. Subtitle: 'Sign in to your gluecron account.'
Net effect: a visitor landing on /register sees a polished gateway
that signals 'this is a real product worth my email address'. The
gradient accent strip + display font + extra breathing room reads
~2x more premium for ~30 lines of CSS and 2 strings.
Tests: 2003/2003 pass. tsc clean. The change is purely additive on
the auth-container surface; nothing else uses .auth-subtitle so the
new class is scope-safe.2 files changed+56−1198f45b46a91ddfdf7697a184ba61854552a4d8ff
2 changed files+56−11
Modifiedsrc/routes/auth.tsx+9−2View fileUnifiedSplit
@@ -55,7 +55,11 @@ auth.get("/register", softAuth, (c) => {
5555 return c.html(
5656 <Layout title="Register" user={null}>
5757 <div class="auth-container">
58 <h2>Create account</h2>
58 <h2>Create your account</h2>
59 <p class="auth-subtitle">
60 Get the full AI suite — code review, auto-merge, spec-to-PR — on
61 unlimited public repos. No credit card.
62 </p>
5963 {error && <div class="auth-error">{decodeURIComponent(error)}</div>}
6064 <Form method="post" action="/register" csrfToken={csrf}>
6165 <FormGroup label="Username" htmlFor="username">
@@ -302,7 +306,10 @@ auth.get("/login", softAuth, async (c) => {
302306 return c.html(
303307 <Layout title="Sign in" user={null}>
304308 <div class="auth-container">
305 <h2>Sign in</h2>
309 <h2>Welcome back</h2>
310 <p class="auth-subtitle">
311 Sign in to your gluecron account.
312 </p>
306313 {error && <div class="auth-error">{decodeURIComponent(error)}</div>}
307314 {success && (
308315 <div class="auth-success">{decodeURIComponent(success)}</div>
Modifiedsrc/views/layout.tsx+47−9View fileUnifiedSplit
@@ -1777,25 +1777,63 @@ const css = `
17771777 /* Auth (register / login / verify) */
17781778 /* ============================================================ */
17791779 .auth-container {
1780 max-width: 420px;
1781 margin: 64px auto;
1782 padding: 32px;
1780 /* 2026 polish — wider, more generous, with a subtle accent-glow
1781 border and gradient top-edge so it reads as a premium product
1782 gateway, not a stock form. The 480px width feels intentional
1783 (not cramped, not endless). */
1784 max-width: 480px;
1785 margin: 72px auto;
1786 padding: 40px 40px 36px;
17831787 background: var(--bg-elevated);
17841788 border: 1px solid var(--border);
1785 border-radius: var(--r-lg);
1786 box-shadow: var(--elev-2);
1789 border-radius: 16px;
1790 box-shadow:
1791 var(--elev-2),
1792 0 24px 64px -16px rgba(140, 109, 255, 0.12);
1793 position: relative;
1794 overflow: hidden;
1795 }
1796 .auth-container::before {
1797 /* Hairline gradient accent on the top edge — signals 'AI-native'
1798 without shouting. Pointer-events disabled so it never interferes
1799 with form interactions. */
1800 content: '';
1801 position: absolute;
1802 top: 0;
1803 left: 0;
1804 right: 0;
1805 height: 2px;
1806 background: linear-gradient(90deg, transparent 0%, #8c6dff 30%, #36c5d6 70%, transparent 100%);
1807 opacity: 0.7;
1808 pointer-events: none;
17871809 }
17881810 .auth-container h2 {
1789 margin-bottom: 6px;
1790 font-size: var(--t-lg);
1791 letter-spacing: -0.02em;
1811 margin: 0 0 8px;
1812 font-size: 28px;
1813 font-weight: 700;
1814 font-family: var(--font-display);
1815 letter-spacing: -0.025em;
1816 color: var(--text-strong);
1817 line-height: 1.15;
1818 }
1819 .auth-container .auth-subtitle {
1820 color: var(--text-muted);
1821 font-size: 14.5px;
1822 line-height: 1.5;
1823 margin: 0 0 24px;
17921824 }
17931825 .auth-container > p {
17941826 color: var(--text-muted);
17951827 font-size: var(--t-sm);
17961828 margin-bottom: 24px;
17971829 }
1798 .auth-container .btn-primary { width: 100%; padding: 10px 16px; }
1830 .auth-container .btn-primary {
1831 width: 100%;
1832 padding: 12px 16px;
1833 font-size: 15px;
1834 font-weight: 600;
1835 margin-top: 4px;
1836 }
17991837 .auth-error {
18001838 background: rgba(248,113,113,0.08);
18011839 border: 1px solid rgba(248,113,113,0.35);
18021840