feat(web): match cheatcode V1's auth modal — native Clerk dark theme

Per V1 (which used baseTheme: dark): drop V2's custom light header/footer/card
wrapper and render Clerk's native <SignIn>/<SignUp> with @clerk/themes' dark
baseTheme inside a transparent shell with a single custom close X. Clerk's own
chrome (header, Google, divider, fields, footer toggle) now shows, dark and
native. Auth route page darkened to match so the modal sits on a dark surface.

- add @clerk/themes dependency
- clerk-auth-appearance: baseTheme dark + V1's minimal card overrides
- auth-modal: minimal V1-exact structure, mode-driven (footer routes /sign-in↔/sign-up)

Author: iamjr15

apps/web/package.json

@@ -18,6 +18,7 @@
     "@cheatcode/types": "workspace:*",
     "@cheatcode/ui": "workspace:*",
     "@clerk/nextjs": "catalog:",
+    "@clerk/themes": "^2.4.57",
     "@clerk/ui": "catalog:",
     "@hookform/resolvers": "catalog:",
     "@streamdown/code": "catalog:",

apps/web/src/components/auth/auth-modal.tsx

@@ -2,10 +2,8 @@
 
 import { ModalShell } from "@cheatcode/ui";
 import { SignIn, SignUp } from "@clerk/nextjs";
-import { useState, useSyncExternalStore } from "react";
-import { CheatcodeMark } from "@/components/ui/cheatcode-mark";
+import { useSyncExternalStore } from "react";
 import { X } from "@/components/ui/icons";
-import { cn } from "@/lib/ui/cn";
 import { clerkAuthAppearance } from "./clerk-auth-appearance";
 
 export type AuthMode = "sign-in" | "sign-up";
@@ -32,96 +30,43 @@ export function AuthModal({
     return null;
   }
 
-  return (
-    <AuthModalContent
-      initialMode={mode}
-      key={mode}
-      onClose={onClose}
-      redirectPath={redirectPath}
-      titleId={titleId}
-    />
-  );
-}
-
-function AuthModalContent({
-  initialMode,
-  onClose,
-  redirectPath,
-  titleId,
-}: {
-  initialMode: AuthMode;
-  onClose: () => void;
-  redirectPath: string;
-  titleId: string;
-}) {
-  const [activeMode, setActiveMode] = useState<AuthMode>(initialMode);
-  const isSignIn = activeMode === "sign-in";
-
+  const isSignIn = mode === "sign-in";
   return (
     <ModalShell
-      className="cheatcode-auth-dialog m-auto max-h-[calc(100vh-2rem)] w-[min(calc(100vw-2rem),442px)] max-w-[442px] overflow-visible border-0 bg-transparent p-0 text-[#1b1b1b] shadow-none backdrop:bg-black/25 backdrop:backdrop-blur-[8px]"
+      className="cheatcode-auth-dialog m-auto max-h-[calc(100vh-2rem)] w-[min(calc(100vw-2rem),25rem)] max-w-[25rem] overflow-visible border-0 bg-transparent p-0 text-white shadow-none backdrop:bg-black/60 backdrop:backdrop-blur-[6px]"
       labelledBy={titleId}
       onClose={onClose}
       open={true}
     >
-      <div className="cheatcode-auth-card relative max-h-[calc(100vh-2rem)] overflow-hidden rounded-[22px] bg-white shadow-[0_28px_80px_rgba(0,0,0,0.16)] ring-1 ring-[#eeeeee]">
+      <div className="relative mx-auto max-h-[calc(100vh-2rem)] overflow-y-auto">
+        <span className="sr-only" id={titleId}>
+          {isSignIn ? "Sign in to Cheatcode" : "Create your account"}
+        </span>
         <button
           aria-label="Close authentication modal"
-          className="absolute top-3 right-3 z-10 flex h-8 w-8 items-center justify-center rounded-full text-[#707070] outline-none transition-colors hover:bg-[#f7f7f7] hover:text-[#1b1b1b] focus-visible:ring-2 focus-visible:ring-[#1b1b1b]/15"
+          className="absolute top-4 right-6 z-10 flex h-8 w-8 items-center justify-center rounded-full text-white/60 outline-none transition-colors hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:ring-white/25"
           onClick={onClose}
           type="button"
         >
-          <X aria-hidden="true" className="h-4 w-4" />
+          <X aria-hidden="true" className="h-5 w-5" />
         </button>
-        <div className="px-10 pt-9 pb-8 max-sm:px-6">
-          <div className="mb-4 flex justify-center">
-            <span className="flex size-12 items-center justify-center text-[#dfa94f] drop-shadow-[0_1px_0_rgba(255,255,255,0.65)]">
-              <CheatcodeMark aria-hidden="true" className="size-10" />
-            </span>
-          </div>
-          <div className="mb-6 text-center">
-            <h2 className="font-semibold text-[#1b1b1b] text-[20px] leading-6" id={titleId}>
-              {isSignIn ? "Sign in to Cheatcode" : "Create your account"}
-            </h2>
-            <p className="mt-2 text-[#707070] text-[14px] leading-5">
-              {isSignIn
-                ? "Welcome back! Please sign in to continue"
-                : "Welcome! Please fill in the details to get started."}
-            </p>
-          </div>
-          {isSignIn ? (
-            <SignIn
-              appearance={clerkAuthAppearance}
-              fallbackRedirectUrl={redirectPath}
-              forceRedirectUrl={redirectPath}
-              oauthFlow="popup"
-              routing="hash"
-              signUpUrl="#sign-up"
-            />
-          ) : (
-            <SignUp
-              appearance={clerkAuthAppearance}
-              fallbackRedirectUrl={redirectPath}
-              forceRedirectUrl={redirectPath}
-              oauthFlow="popup"
-              routing="hash"
-              signInUrl="#sign-in"
-            />
-          )}
-        </div>
-        <div className="flex justify-center border-[#eeeeee] border-t bg-[#fafafa] px-4 py-5 text-[#707070] text-[14px]">
-          <span>{isSignIn ? "Don’t have an account?" : "Already have an account?"}</span>
-          <button
-            className={cn(
-              "ml-1 font-medium text-[#d99b36] transition-colors hover:text-[#b87418]",
-              "paper-focus-ring rounded-sm",
-            )}
-            onClick={() => setActiveMode(isSignIn ? "sign-up" : "sign-in")}
-            type="button"
-          >
-            {isSignIn ? "Sign up" : "Sign in"}
-          </button>
-        </div>
+        {isSignIn ? (
+          <SignIn
+            appearance={clerkAuthAppearance}
+            fallbackRedirectUrl={redirectPath}
+            forceRedirectUrl={redirectPath}
+            oauthFlow="popup"
+            routing="hash"
+          />
+        ) : (
+          <SignUp
+            appearance={clerkAuthAppearance}
+            fallbackRedirectUrl={redirectPath}
+            forceRedirectUrl={redirectPath}
+            oauthFlow="popup"
+            routing="hash"
+          />
+        )}
       </div>
     </ModalShell>
   );

apps/web/src/components/auth/auth-route-page.tsx

@@ -19,8 +19,8 @@ export function AuthRoutePage({ mode }: { mode: AuthMode }) {
   }, [isLoaded, isSignedIn, redirectPath, router]);
 
   return (
-    <main className="relative min-h-screen overflow-hidden bg-white text-[#1b1b1b]">
-      <div className="fixed top-3.5 right-3.5 z-20 hidden h-7 items-center gap-2 rounded-full bg-[#f7f7f7] pr-3 pl-2.5 text-[14px] md:flex">
+    <main className="relative min-h-screen overflow-hidden bg-[#0d0d0d] text-white">
+      <div className="fixed top-3.5 right-3.5 z-20 hidden h-7 items-center gap-2 rounded-full bg-[#1a1a1a] pr-3 pl-2.5 text-[#d4d4d4] text-[14px] md:flex">
         <Monitor aria-hidden="true" className="h-3.5 w-3.5" />
         Computer
       </div>
@@ -29,9 +29,9 @@ export function AuthRoutePage({ mode }: { mode: AuthMode }) {
         className="mx-auto flex min-h-screen w-full max-w-[704px] flex-col items-center px-6 pt-[154px]"
       >
         <CheatcodeMark aria-hidden="true" className="mb-7 h-10 w-10 text-[#f8af2c]" />
-        <div className="mb-2 h-4 w-40 rounded-full bg-[#f7f7f7]" />
-        <div className="h-8 w-72 rounded-full bg-[#f1f1f1]" />
-        <div className="mt-16 h-[132px] w-full rounded-[24px] border border-[#f1f1f1] bg-white shadow-[0_18px_70px_rgba(0,0,0,0.06)]" />
+        <div className="mb-2 h-4 w-40 rounded-full bg-[#1a1a1a]" />
+        <div className="h-8 w-72 rounded-full bg-[#161616]" />
+        <div className="mt-16 h-[132px] w-full rounded-[24px] border border-[#1f1f1f] bg-[#111111] shadow-[0_18px_70px_rgba(0,0,0,0.4)]" />
       </section>
       <AuthModal
         id="auth-route-modal"

apps/web/src/components/auth/clerk-auth-appearance.ts

@@ -1,50 +1,16 @@
+import { dark } from "@clerk/themes";
+
+// Exact parity with cheatcode V1's auth modal: Clerk's native dark theme with the card's own
+// border/shadow removed (the modal shell provides the surface). Keeping Clerk's default chrome
+// — header, social buttons, divider, fields, footer — so it looks and feels 100% native.
 export const clerkAuthAppearance = {
+  baseTheme: dark,
   elements: {
-    card: "!m-0 !flex !w-full !flex-col !gap-0 !rounded-none !border-0 !bg-transparent !p-0 !shadow-none",
-    cardBox: "!w-full !bg-transparent !shadow-none",
-    developmentMode: "!hidden",
-    dividerLine: "!bg-[#eeeeee]",
-    dividerRow: "!my-0 !w-full",
-    dividerText: "!text-[#707070] !text-[13px]",
-    footer: "!hidden",
-    footerAction: "!hidden",
-    footerActionLink: "!hidden",
-    footerActionText: "!hidden",
-    form: "!w-full !gap-5 !space-y-0",
-    formButtonPrimary:
-      "!flex !h-10 !min-h-10 !w-full !items-center !justify-center !gap-2 !rounded-[12px] !border-0 !bg-[#e3ac55] !px-4 !font-semibold !text-[14px] !text-white !shadow-none !transition-colors hover:!bg-[#d39a3f]",
-    formField: "!w-full !space-y-2",
-    formFieldInput:
-      "!box-border !h-[38px] !w-full !rounded-[11px] !border !border-[#e6e6e6] !bg-white !px-3.5 !text-[#1b1b1b] !text-[14px] !shadow-none placeholder:!text-[#a3a3a3] focus:!border-[#d8d8d8] focus:!ring-2 focus:!ring-[#1b1b1b]/10",
-    formFieldInputGroup:
-      "!box-border !h-[38px] !w-full !rounded-[11px] !border !border-[#e6e6e6] !bg-white focus-within:!border-[#d8d8d8] focus-within:!ring-2 focus-within:!ring-[#1b1b1b]/10",
-    formFieldInputShowPasswordButton: "!text-[#707070] hover:!text-[#1b1b1b]",
-    formFieldLabel: "!text-[#1b1b1b] !text-[13px] !font-medium",
-    formFieldLabelRow: "!mb-2",
-    formFieldRow: "!w-full",
-    header: "!hidden",
-    headerSubtitle: "!hidden",
-    headerTitle: "!hidden",
-    logoBox: "!hidden",
-    main: "!w-full !gap-5 !space-y-0",
-    rootBox: "!w-full",
-    socialButtons: "!w-full",
-    socialButtonsBlockButtonText: "!text-[14px] !font-medium !text-[#5f5f5f]",
-    socialButtonsBlockButton:
-      "!flex !h-[38px] !w-full !items-center !justify-center !gap-2.5 !rounded-[11px] !border !border-[#e6e6e6] !bg-white !px-3.5 !text-[#5f5f5f] !shadow-none !transition-colors hover:!bg-[#f7f7f7]",
-    socialButtonsRoot: "!mb-0 !w-full",
-  },
-  layout: {
-    socialButtonsPlacement: "top",
-    socialButtonsVariant: "blockButton",
+    card: "shadow-none border-0",
+    developmentMode: "hidden",
+    rootBox: "mx-auto",
   },
   variables: {
-    borderRadius: "10px",
-    colorBackground: "#ffffff",
-    colorInputBackground: "#ffffff",
-    colorPrimary: "#e0aa57",
-    colorText: "#1b1b1b",
-    colorTextSecondary: "#707070",
     fontFamily: "var(--font-geist-sans), Arial, sans-serif",
   },
 };

apps/web/src/components/shell/app-sidebar.tsx

@@ -69,7 +69,7 @@ interface SidebarProject {
 }
 
 const PRIMARY_NAV = navItems("primary");
-const WORKSPACE_SECTION_NAV = navItems("workspace").filter((item) => item.id !== "tools");
+const WORKSPACE_SECTION_NAV = navItems("workspace");
 const FOOTER_NAV = navItems("footer");
 const CREDIT_BAR_KEYS = Array.from({ length: 50 }, (_, index) => `credit-bar-${index}`);
 const BUD_ACCOUNT_FONT = 'circular, "circular Fallback", sans-serif';

apps/web/src/components/tools/tools-catalog.tsx

@@ -306,10 +306,9 @@ function BrandLogo({
   return (
     <span
       className={cn(
-        "flex shrink-0 items-center justify-center overflow-hidden rounded-[14px]",
+        "flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-white shadow-[0_0_0_1px_#ececec]",
         boxClass,
       )}
-      style={{ backgroundImage: gradientForSlug(slug) }}
     >
       {failed ? (
         <span className="font-bold text-[#1b1b1b]/70 text-[10px]">{initials(displayName)}</span>
@@ -772,15 +771,3 @@ function initials(displayName: string): string {
     .toUpperCase();
   return joined || "?";
 }
-
-// Deterministic soft gradient per toolkit slug — keeps each logo tile visually
-// distinct across the whole catalog without per-brand styling. Inline style (not a
-// Tailwind class) because the hue is computed at runtime.
-function gradientForSlug(slug: string): string {
-  let hash = 0;
-  for (let index = 0; index < slug.length; index += 1) {
-    hash = (hash * 31 + slug.charCodeAt(index)) % 360;
-  }
-  const hue = hash;
-  return `linear-gradient(135deg, hsl(${hue} 62% 93%), hsl(${(hue + 36) % 360} 58% 88%))`;
-}