From 6d28e7d649e9746aa23f9b53975545a9738dd447 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Thu, 23 Feb 2023 22:18:35 +0800
Subject: [PATCH] refactor: button height

---
 src/common/component/GoogleLoginButton.tsx | 6 +++---
 src/common/component/styled/Button.tsx     | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/common/component/GoogleLoginButton.tsx b/src/common/component/GoogleLoginButton.tsx
index d8cf72d5..a345f0c8 100644
--- a/src/common/component/GoogleLoginButton.tsx
+++ b/src/common/component/GoogleLoginButton.tsx
@@ -44,8 +44,8 @@ const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
   }, [error]);
 
   return (
-    <Button className=" group relative w-full !bg-white dark:!bg-gray-700 !text-gray-600 dark:!text-gray-200 !h-[46px] overflow-hidden border border-solid border-gray-300" disabled={!loaded || isLoading}>
-      <div className="absolute left-0 top-0 w-full flex-center gap-3 z-[998] h-10 bg-inherit">
+    <Button className=" group relative w-full !bg-white dark:!bg-gray-700 !text-gray-600 dark:!text-gray-200 overflow-hidden border border-solid border-gray-300 dark:border-gray-500" disabled={!loaded || isLoading}>
+      <div className="absolute left-0 top-0 w-full h-full flex-center gap-3 z-[998] bg-inherit">
         <IconGoogle className="w-6 h-6" />
         {loadError
           ? "Script Load Error!"
@@ -53,7 +53,7 @@ const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
             ? `${type === "login" ? t("login.google") : t("reg.google")}`
             : `Initializing`}
       </div>
-      <div className="absolute left-0 top-0 w-full group-hover:opacity-0 group-hover:z-[999]">
+      <div className="absolute left-0 top-0 w-full h-full group-hover:opacity-0 group-hover:z-[999]">
         <GoogleLogin
           width="360px"
           onSuccess={(res) => {
diff --git a/src/common/component/styled/Button.tsx b/src/common/component/styled/Button.tsx
index 2da15e59..891296f8 100644
--- a/src/common/component/styled/Button.tsx
+++ b/src/common/component/styled/Button.tsx
@@ -10,13 +10,13 @@ const StyledButton = ({ children, className = '', ...rest }: Props) => {
   const isSmall = className.includes('small');
   const isMini = className.includes('mini');
   const isFull = className.includes('flex');
-  return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg px-3.5 py-2.5 md:hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`,
+  return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg px-3.5 h-11 md:hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`,
     isFull && "w-full text-center justify-center",
-    isGhost && "!text-gray-600 dark:!text-gray-100  !border !border-solid !border-gray-300 !bg-transparent",
+    isGhost && " !text-gray-600 dark:!text-gray-100  !border !border-solid !border-gray-300 dark:!border-gray-500 !bg-transparent",
     isCancel && "!bg-transparent !text-black dark:!text-gray-50 !border !border-solid !border-gray-200",
-    isSmall && "!py-2",
+    isSmall && "!h-auto !py-2",
     noBorder && "!shadow-none !border-none",
-    isMini && "!px-2.5 !py-1 !text-xs",
+    isMini && "!h-auto !px-2.5 !py-1 !text-xs",
     isDanger && "!bg-red-500 disabled:!bg-gray-300 md:hover:!bg-red-500/80 active:bg-red-700",
     className
   )} {...rest}>