From 8d5830f4d4923daf0f36f3351dcfbaa3fd762afa Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 21 Nov 2024 20:02:29 +0100
Subject: [PATCH] feat: add sign in button to explorer

---
 src/app/explorer/page.tsx       | 11 ++---------
 src/components/SignInButton.tsx | 27 ++++++++++++++++-----------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
index 447f10a76f..5fbf46aed7 100644
--- a/src/app/explorer/page.tsx
+++ b/src/app/explorer/page.tsx
@@ -1,9 +1,8 @@
 import { AuthBoundary } from "@/components/AuthBoundary";
 import { GuildCardSkeleton } from "@/components/GuildCard";
 import { GuildCard } from "@/components/GuildCard";
-import { Button } from "@/components/ui/Button";
+import { SignInButton } from "@/components/SignInButton";
 import { env } from "@/lib/env";
-import { SignIn } from "@phosphor-icons/react/dist/ssr";
 import {
   HydrationBoundary,
   QueryClient,
@@ -79,13 +78,7 @@ async function YourGuildsSection() {
               Sign in to view your guilds or create new ones
             </p>
 
-            <Button
-              colorScheme="primary"
-              leftIcon={<SignIn weight="bold" />}
-              className="ml-auto h-10"
-            >
-              Sign in
-            </Button>
+            <SignInButton className="ml-auto" />
           </div>
         }
       >
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index 639ec1ef45..5ad2ac6cc0 100644
--- a/src/components/SignInButton.tsx
+++ b/src/components/SignInButton.tsx
@@ -1,23 +1,28 @@
 "use client";
 
 import { signInDialogOpenAtom } from "@/config/atoms";
+import { cn } from "@/lib/cssUtils";
 import { SignIn } from "@phosphor-icons/react/dist/ssr";
 import { useSetAtom } from "jotai";
+import type { ComponentProps } from "react";
 import { Button } from "./ui/Button";
-import { Card } from "./ui/Card";
 
-export const SignInButton = () => {
+export const SignInButton = ({
+  className,
+  ...props
+}: ComponentProps<typeof Button>) => {
   const setSignInDialogOpen = useSetAtom(signInDialogOpenAtom);
 
   return (
-    <Card className="rounded-xl">
-      <Button
-        className="h-10"
-        leftIcon={<SignIn weight="bold" />}
-        onClick={() => setSignInDialogOpen(true)}
-      >
-        Sign in
-      </Button>
-    </Card>
+    <Button
+      className={cn("h-10", className)}
+      variant="solid"
+      colorScheme="primary"
+      {...props}
+      leftIcon={<SignIn weight="bold" />}
+      onClick={() => setSignInDialogOpen(true)}
+    >
+      Sign in
+    </Button>
   );
 };