From df6accb600be6fff421144408d23d19fbc5e3287 Mon Sep 17 00:00:00 2001
From: SinachPat <sinachpat@gmail.com>
Date: Thu, 7 May 2026 07:27:24 +0100
Subject: [PATCH] feat: apply canvas dot-grid background to sign-in and sign-up
 pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the plain body background on auth pages with the product's canvas
aesthetic — the same canvasBg colour and radial dot-grid used by the
canvas editor, toggling correctly between dark and light themes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/app/sign-in/[[...sign-in]]/page.tsx   | 20 ++++++++++++++++++-
 .../src/app/sign-up/[[...sign-up]]/page.tsx   | 20 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/app/sign-in/[[...sign-in]]/page.tsx b/packages/app/src/app/sign-in/[[...sign-in]]/page.tsx
index 1cb397e..3302a9b 100644
--- a/packages/app/src/app/sign-in/[[...sign-in]]/page.tsx
+++ b/packages/app/src/app/sign-in/[[...sign-in]]/page.tsx
@@ -1,8 +1,26 @@
+'use client';
+
 import { SignIn } from '@clerk/nextjs';
+import { useCanvasTheme } from '@/store/canvasTheme';
 
 export default function SignInPage() {
+  const T = useCanvasTheme();
+
   return (
-    <main style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
+    <main
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        // Use the exact canvas background tokens so this page matches the
+        // product's dark / light canvas aesthetic.
+        background: T.canvasBg,
+        backgroundImage: `radial-gradient(circle, ${T.dotColor} 1px, transparent 1px)`,
+        backgroundSize: '24px 24px',
+        transition: 'background 0.2s',
+      }}
+    >
       <SignIn />
     </main>
   );
diff --git a/packages/app/src/app/sign-up/[[...sign-up]]/page.tsx b/packages/app/src/app/sign-up/[[...sign-up]]/page.tsx
index 75cf26b..c713df2 100644
--- a/packages/app/src/app/sign-up/[[...sign-up]]/page.tsx
+++ b/packages/app/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -1,8 +1,26 @@
+'use client';
+
 import { SignUp } from '@clerk/nextjs';
+import { useCanvasTheme } from '@/store/canvasTheme';
 
 export default function SignUpPage() {
+  const T = useCanvasTheme();
+
   return (
-    <main style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
+    <main
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        // Use the exact canvas background tokens so this page matches the
+        // product's dark / light canvas aesthetic.
+        background: T.canvasBg,
+        backgroundImage: `radial-gradient(circle, ${T.dotColor} 1px, transparent 1px)`,
+        backgroundSize: '24px 24px',
+        transition: 'background 0.2s',
+      }}
+    >
       <SignUp />
     </main>
   );