From 39647340ec507997707ffd01d98b696e99e3e14b Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 7 Sep 2022 01:44:00 +0100
Subject: [PATCH] feat: connect button in primary style

---
 src/components/common/Comment.tsx       |  2 +-
 src/components/common/ConnectButton.tsx | 12 +++++++-----
 src/components/site/SiteHeader.tsx      |  2 +-
 src/css/tailwind.css                    |  4 +---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/common/Comment.tsx b/src/components/common/Comment.tsx
index 37e705b7..d7eb4c03 100644
--- a/src/components/common/Comment.tsx
+++ b/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>
diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index 26f6f247..9d0fcf73 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/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 (
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index ce646bd1..fa498405 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/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
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index 98701211..e790486b 100644
--- a/src/css/tailwind.css
+++ b/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 {