Add back Clerk auth components

.env.example

@@ -1,7 +1,7 @@
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
 CLERK_SECRET_KEY=
-NEXT_PUBLIC_CLERK_SIGN_IN_URL=/login
-NEXT_PUBLIC_CLERK_SIGN_UP_URL=/login
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
 NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/profile
 NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/profile
 MONGODB_URL=

app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignIn />;
+}

app/(auth)/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignUp />;
+}

app/globals.css

@@ -59,9 +59,7 @@
   }
 }
 
-[class^="cl-"] {
-  @apply text-foreground;
-}
+/* === APPLY SHADCN THEME TO CLERK COMPONENTS === */
 
 .cl-formButtonPrimary {
   @apply inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
@@ -71,19 +69,59 @@
 .cl-socialButtonsBlockButton,
 .cl-alert,
 .cl-identityPreview,
-.cl-phoneInputBox {
+.cl-phoneInputBox,
+.cl-userButtonPopoverCard {
   @apply border border-input bg-background;
 }
 
-.cl-navbar {
-  @apply bg-background text-foreground;
+.cl-headerTitle,
+.cl-socialButtonsBlockButtonText,
+.cl-loading,
+.cl-formFieldLabel,
+.cl-formHeaderTitle,
+.cl-selectButton__countryCode,
+.cl-selectButton__countryCode p,
+.cl-selectOption p,
+.cl-selectOption div,
+.cl-modalCloseButton,
+.cl-navbarButton,
+.cl-breadcrumbsItem.cl-breadcrumbsItem__currentPage,
+.cl-profileSectionTitle p,
+.cl-userPreviewTextContainer,
+.cl-profileSectionContent p,
+.cl-form p {
+  @apply dark:text-foreground;
+}
+
+.cl-headerSubtitle,
+.cl-dividerText,
+.cl-footerActionText,
+.cl-alertText,
+.cl-formFieldInfoText,
+.cl-formFieldSuccessText,
+.cl-identityPreviewText,
+.cl-userButtonPopoverActionButton,
+.cl-userButtonPopoverActionButton svg,
+.cl-userButtonPopoverActionButtonText,
+.cl-userButtonPopoverFooter p,
+.cl-userButtonPopoverFooter a,
+.cl-formHeaderSubtitle,
+.cl-breadcrumbsItem,
+.cl-breadcrumbsItemDivider,
+.cl-fileDropAreaHint,
+.cl-fileDropAreaFooterHint,
+.cl-form
+  p[data-localization-key="userProfile.emailAddressPage.emailCode.formHint"] {
+  @apply text-muted-foreground;
 }
 
 .cl-dividerLine {
   @apply bg-border;
 }
 
-.cl-formFieldInput {
+.cl-formFieldInput[type="text"],
+.cl-formFieldInput[type="email"],
+.cl-formFieldInput[type="password"] {
   @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
 }
 
@@ -109,4 +147,65 @@
 
 .cl-internal-icon {
   @apply text-foreground;
-}
+}
+
+.cl-profileSectionTitle {
+  @apply border-b border-input;
+}
+
+button[data-localization-key="userProfile.start.dangerSection.deleteAccountButton"] {
+  @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
+}
+
+.cl-avatarImageActionsUpload,
+.cl-fileDropAreaButtonPrimary,
+.cl-formButtonReset,
+.cl-accordionContent
+  button[data-localization-key="userProfile.start.emailAddressesSection.detailsAction__unverified"] {
+  @apply text-blue-600 dark:text-blue-400;
+}
+
+.cl-avatarImageActionsRemove,
+.cl-accordionContent
+  button[data-localization-key="userProfile.start.emailAddressesSection.destructiveAction"] {
+  @apply text-destructive dark:text-red-400;
+}
+
+.cl-fileDropAreaBox {
+  @apply bg-accent;
+}
+
+.cl-fileDropAreaIconBox {
+  @apply dark:bg-slate-700;
+}
+
+/* Hover styling */
+
+.cl-userButtonPopoverActionButton,
+.cl-profileSectionPrimaryButton,
+.cl-accordionTriggerButton,
+.cl-navbarButton {
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  @apply hover:bg-accent hover:text-accent-foreground;
+}
+
+/* Dark mode variable overrides */
+
+.dark {
+  .cl-badge {
+    --bg: #bfdbfe;
+    --accent: #1e3a8a;
+  }
+  .cl-badge[data-localization-key="badge__unverified"] {
+    --bg: #fecaca;
+    --accent: #991b1b;
+  }
+  .cl-userButtonPopoverActionButton,
+  .cl-profileSectionPrimaryButton,
+  .cl-accordionTriggerButton,
+  .cl-navbarButton {
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+  }
+}

components/shared/claim-username.tsx

@@ -1,18 +1,25 @@
-import { ArrowTopRightIcon } from "@radix-ui/react-icons"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import Link from "next/link"
+import { ArrowTopRightIcon } from "@radix-ui/react-icons";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { SignUpButton } from "@clerk/nextjs";
 
 export default function ClaimUsername() {
   return (
     <div className="mt-6 md:mt-10 flex flex-col md:flex-row items-center gap-2">
       <div className="flex items-center">
-        <p className="px-2 h-9 font-mono text-base sm:text-lg flex items-center bg-secondary rounded-l-md font-medium text-foreground">marriageresu.me/@</p>
-        <Input className="bg-background font-mono text-base sm:text-lg h-9 border-l-0 rounded-l-none w-full md:w-56" placeholder="saad" />
+        <p className="px-2 h-9 font-mono text-base sm:text-lg flex items-center bg-secondary rounded-l-md font-medium text-foreground">
+          marriageresu.me/@
+        </p>
+        <Input
+          className="bg-background font-mono text-base sm:text-lg h-9 border-l-0 rounded-l-none w-full md:w-56"
+          placeholder="saad"
+        />
       </div>
-      <Link href="/login" className="w-full md:w-auto">
-        <Button className="flex w-full gap-2 items-center">Claim <ArrowTopRightIcon /></Button>
-      </Link>
+      <SignUpButton>
+        <Button className="flex w-full md:w-auto gap-2 items-center">
+          Claim <ArrowTopRightIcon />
+        </Button>
+      </SignUpButton>
     </div>
-  )
+  );
 }

components/shared/header.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link"
 import { ModeToggle } from "@/components/ui/mode-toggle"
 import { Button } from "@/components/ui/button"
-import { SignedIn, SignedOut } from "@clerk/nextjs"
+import { SignedIn, SignedOut, SignUpButton } from "@clerk/nextjs"
 import Image from "next/image"
 import UserDropdown from "@/components/shared/user-dropdown"
 
@@ -18,9 +18,9 @@ const Header = () => {
           <UserDropdown />
         </SignedIn>
         <SignedOut>
-          <Link href="/login">
+          <SignUpButton>
             <Button>Sign In</Button>
-          </Link>
+          </SignUpButton>
         </SignedOut>
       </div>
     </header>