From 40989b7b874335eacec100ef85b19772edf1a4a2 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 18 Jan 2023 14:42:08 +0000
Subject: [PATCH] feat: bigger dashboard tabs

---
 src/components/common/ConnectButton.tsx       | 40 +++++++++++++++----
 src/components/dashboard/DashboardLayout.tsx  | 10 ++---
 src/components/dashboard/DashboardSidebar.tsx |  2 +-
 src/components/ui/Tabs.tsx                    |  2 +-
 src/css/tailwind.css                          |  1 -
 5 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index 6f4ea5fd..2409050c 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -27,7 +27,20 @@ import {
 export const ConnectButton: React.FC<{
   left?: boolean
   variant?: "text" | "primary" | "secondary" | "like" | "collect" | "crossbell"
-}> = ({ left, variant }) => {
+  size?: "base" | "sm"
+}> = ({ left, variant, size = "sm" }) => {
+  let avatarSize
+  let sizeDecrease
+  switch (size) {
+    case "base":
+      avatarSize = 40
+      sizeDecrease = "sm"
+      break
+    default:
+      avatarSize = 30
+      sizeDecrease = "xs"
+  }
+
   const [ssrReady, account] = useAccountState(({ ssrReady, computed }) => [
     ssrReady,
     computed.account,
@@ -105,7 +118,7 @@ export const ConnectButton: React.FC<{
             <Button
               className="text-accent"
               onClick={openConnectModal}
-              style={{ height: "30px" }}
+              style={{ height: avatarSize + "px" }}
               variant={variant || "primary"}
             >
               Connect
@@ -113,7 +126,10 @@ export const ConnectButton: React.FC<{
           )
         }
         return (
-          <div className="relative group" style={{ gap: 12, height: "30px" }}>
+          <div
+            className="relative group"
+            style={{ gap: 12, height: avatarSize + "px" }}
+          >
             {userSites.isSuccess ? (
               <>
                 <button
@@ -125,13 +141,13 @@ export const ConnectButton: React.FC<{
                     className="align-middle mr-2"
                     images={userSites.data?.[0]?.avatars || []}
                     name={userSites.data?.[0]?.name}
-                    size={30}
+                    size={avatarSize}
                   />
                   <div className="flex-1 flex flex-col min-w-0">
                     <span
                       className={`text-left leading-none font-medium truncate ${
                         InsufficientBalance ? "text-red-600" : "text-gray-600"
-                      }`}
+                      } ${size === "base" ? "text-base" : "text-sm"}`}
                       style={{ marginBottom: "0.15rem" }}
                     >
                       {userSites.data?.[0]?.name ||
@@ -139,7 +155,9 @@ export const ConnectButton: React.FC<{
                     </span>
                     {userSites.data?.[0]?.username && (
                       <span
-                        className={`text-left leading-none text-xs truncate ${
+                        className={`text-left leading-none ${
+                          sizeDecrease === "sm" ? "text-sm" : "text-xs"
+                        } truncate ${
                           InsufficientBalance ? "text-red-400" : "text-gray-400"
                         }`}
                       >
@@ -154,7 +172,11 @@ export const ConnectButton: React.FC<{
                     left ? "left" : "right"
                   }-0 pt-2 group-hover:block top-full z-10 text-gray-600`}
                 >
-                  <div className="bg-white rounded-lg ring-1 ring-zinc-100 min-w-[140px] shadow-md py-2 text-sm">
+                  <div
+                    className={`bg-white rounded-lg ring-1 ring-zinc-100 min-w-[140px] shadow-md py-2 ${
+                      size === "base" ? "text-base" : "text-sm"
+                    }`}
+                  >
                     {InsufficientBalance && (
                       <UniLink
                         href="https://faucet.crossbell.io/"
@@ -170,7 +192,9 @@ export const ConnectButton: React.FC<{
                           key={i}
                           href={link.url}
                           onClick={link.onClick}
-                          className="px-4 h-8 flex items-center w-full whitespace-nowrap hover:bg-zinc-100"
+                          className={`${
+                            size === "base" ? "pl-5 pr-6 h-11" : "pl-4 pr-5 h-9"
+                          } flex items-center w-full whitespace-nowrap hover:bg-zinc-100`}
                           aria-label={link.label}
                         >
                           <span className="mr-2 flex justify-center">
diff --git a/src/components/dashboard/DashboardLayout.tsx b/src/components/dashboard/DashboardLayout.tsx
index c9761621..6d89a037 100644
--- a/src/components/dashboard/DashboardLayout.tsx
+++ b/src/components/dashboard/DashboardLayout.tsx
@@ -142,7 +142,7 @@ export function DashboardLayout({
               </div>
             )}
           <div className="mb-2 px-5 pt-3 pb-2">
-            <ConnectButton left={true} />
+            <ConnectButton left={true} size="base" />
           </div>
 
           <div className="px-3 space-y-[2px] text-zinc-500">
@@ -158,10 +158,10 @@ export function DashboardLayout({
                   href={link.href}
                   key={link.href}
                   className={clsx(
-                    `flex px-2 h-8 text-sm items-center rounded-lg space-x-2 w-full`,
+                    `flex px-4 h-12 items-center rounded-md space-x-2 w-full`,
                     active
-                      ? `bg-gray-200 font-medium text-gray-800`
-                      : `hover:bg-gray-200 hover:bg-opacity-50`,
+                      ? `bg-slate-200 font-medium text-slate-800`
+                      : `hover:bg-slate-200 hover:bg-opacity-50`,
                   )}
                   onClick={link.onClick}
                 >
@@ -177,7 +177,7 @@ export function DashboardLayout({
               href={getSiteLink({
                 subdomain,
               })}
-              className="space-x-2 border rounded-lg bg-gray-100 border-gray-200 text-gray-500 hover:text-accent flex w-full h-12 items-center justify-center transition-colors"
+              className="space-x-2 border rounded-lg bg-slate-100 border-slate-200 text-slate-500 hover:text-accent flex w-full h-12 items-center justify-center transition-colors"
             >
               <span className="i-bi:box-arrow-up-right"></span>
               <span>View Site</span>
diff --git a/src/components/dashboard/DashboardSidebar.tsx b/src/components/dashboard/DashboardSidebar.tsx
index 899702a8..70b9e3ac 100644
--- a/src/components/dashboard/DashboardSidebar.tsx
+++ b/src/components/dashboard/DashboardSidebar.tsx
@@ -2,7 +2,7 @@ export const DashboardSidebar: React.FC<{
   children: React.ReactNode
 }> = ({ children }) => {
   return (
-    <div className="w-sidebar fixed top-0 bottom-0 left-0 bg-zinc-50 z-10">
+    <div className="w-sidebar fixed top-0 bottom-0 left-0 bg-slate-50 z-10">
       {children}
       <div className="w-[1px] bg-border absolute top-0 right-0 bottom-0"></div>
     </div>
diff --git a/src/components/ui/Tabs.tsx b/src/components/ui/Tabs.tsx
index 105f39e8..95417575 100644
--- a/src/components/ui/Tabs.tsx
+++ b/src/components/ui/Tabs.tsx
@@ -22,7 +22,7 @@ export const Tabs: React.FC<{ items: TabItem[] }> = ({ items }) => {
             onClick={item.onClick}
             key={item.text}
             className={clsx(
-              `border-b-2 text-sm inline-flex items-center h-10`,
+              `border-b-2 inline-flex items-center h-10`,
               item.active
                 ? `border-accent text-black font-medium`
                 : `text-gray-500  border-transparent hover:border-gray-300`,
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index 0d03f6e4..283e89de 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -212,7 +212,6 @@ textarea.input {
 .form-label {
   @apply block;
   @apply mb-2;
-  @apply text-sm;
   @apply font-bold;
   @apply text-gray-700;
   @apply capitalize;