fix: sign in buttom styling

src/app/explorer/page.tsx

@@ -89,7 +89,7 @@ async function YourGuildsSection() {
               </p>
             </div>
 
-            <SignInButton />
+            <SignInButton colorScheme="primary" />
           </div>
         }
       >

src/components/Header.tsx

@@ -8,8 +8,10 @@ export const Header = () => (
     {/* TODO: NavMenu component */}
     <Card className="h-10 w-24 rounded-xl" />
 
-    <AuthBoundary fallback={<SignInButton />}>
-      <SignOutButton />
-    </AuthBoundary>
+    <Card className="rounded-xl">
+      <AuthBoundary fallback={<SignInButton variant="ghost" />}>
+        <SignOutButton />
+      </AuthBoundary>
+    </Card>
   </header>
 );

src/components/SignInButton.tsx

@@ -17,7 +17,6 @@ export const SignInButton = ({
     <Button
       className={cn("h-10", className)}
       variant="solid"
-      colorScheme="primary"
       {...props}
       leftIcon={<SignIn weight="bold" />}
       onClick={() => setSignInDialogOpen(true)}

src/components/SignOutButton.tsx

@@ -10,6 +10,7 @@ export const SignOutButton = () => {
   return (
     <Button
       className="h-10"
+      variant="ghost"
       leftIcon={<SignOut weight="bold" />}
       onClick={() => signOut(pathname)}
     >