feat: connect button in primary style

src/components/common/Comment.tsx

@@ -139,7 +139,7 @@ export const Comment: React.FC<{
                 ? userSites.isSuccess && !userSites.data?.length
                   ? "Create Character"
                   : "Submit"
-                : "Connect Wallet"}
+                : "Connect"}
             </Button>
           </div>
         </form>

src/components/common/ConnectButton.tsx

@@ -2,6 +2,7 @@ import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit"
 import { useGetUserSites } from "~/queries/site"
 import { useAccount, useDisconnect, useBalance } from "wagmi"
 import { Avatar } from "~/components/ui/Avatar"
+import { Button } from "~/components/ui/Button"
 import type { HeaderLinkType } from "~/components/site/SiteHeader"
 import { DashboardIcon } from "../icons/DashboardIcon"
 import { UniLink } from "../ui/UniLink"
@@ -12,7 +13,8 @@ import { CrossbellIcon } from "~/components/icons/CrossbellIcon"
 
 export const ConnectButton: React.FC<{
   left?: boolean
-}> = ({ left }) => {
+  variant?: "text" | "primary" | "secondary" | "like" | "collect" | "crossbell"
+}> = ({ left, variant }) => {
   const { address } = useAccount()
   const userSites = useGetUserSites(address)
   const { disconnect } = useDisconnect()
@@ -92,14 +94,14 @@ export const ConnectButton: React.FC<{
             {(() => {
               if (!mounted || !account || !chain) {
                 return (
-                  <button
+                  <Button
                     className="text-theme-color"
                     onClick={openConnectModal}
-                    type="button"
                     style={{ height: "30px" }}
+                    variant={variant || "primary"}
                   >
-                    Connect Wallet
-                  </button>
+                    Connect
+                  </Button>
                 )
               }
               return (

src/components/site/SiteHeader.tsx

@@ -279,7 +279,7 @@ export const SiteHeader: React.FC<{
               return <HeaderLink link={link} key={`${link.label}${i}`} />
             })}
           </div>
-          <ConnectButton />
+          <ConnectButton variant="text" />
         </div>
       </div>
       <Modal

src/css/tailwind.css

@@ -29,7 +29,7 @@ body {
   @apply items-center;
   @apply justify-center;
   @apply h-8;
-  @apply px-3;
+  @apply px-5;
   @apply min-w-[100px];
   @apply shadow-button;
   @apply whitespace-nowrap;
@@ -94,8 +94,6 @@ body {
 
 .button.is-text {
   @apply shadow-none p-0;
-  @apply text-gray-500 fill-gray-500;
-  @apply hover:text-gray-600 hover:fill-gray-600;
 }
 
 .button.is-like {