From 5f69ab67df6af5464ee558caed1eb418c6d1ea88 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sun, 10 Dec 2023 15:47:01 +0800
Subject: [PATCH] chore: tweak dialog styles

---
 frontend/web/src/components/Alert.tsx                   | 2 +-
 frontend/web/src/components/ChangePasswordDialog.tsx    | 2 +-
 frontend/web/src/components/CreateAccessTokenDialog.tsx | 2 +-
 frontend/web/src/components/CreateUserDialog.tsx        | 2 +-
 frontend/web/src/components/EditUserinfoDialog.tsx      | 2 +-
 frontend/web/src/components/GenerateQRCodeDialog.tsx    | 2 +-
 frontend/web/src/components/ShortcutCard.tsx            | 8 ++++----
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/web/src/components/Alert.tsx b/frontend/web/src/components/Alert.tsx
index b73c5bc..d85ed88 100644
--- a/frontend/web/src/components/Alert.tsx
+++ b/frontend/web/src/components/Alert.tsx
@@ -45,7 +45,7 @@ const Alert: React.FC<Props> = (props: Props) => {
   return (
     <Modal open={true}>
       <ModalDialog>
-        <div className="flex flex-row justify-between items-center w-80 mb-4">
+        <div className="flex flex-row justify-between items-center w-80">
           <span className="text-lg font-medium">{title}</span>
           <Button variant="plain" onClick={handleCloseBtnClick}>
             <Icon.X className="w-5 h-auto text-gray-600" />
diff --git a/frontend/web/src/components/ChangePasswordDialog.tsx b/frontend/web/src/components/ChangePasswordDialog.tsx
index 5a17bf1..9d60d50 100644
--- a/frontend/web/src/components/ChangePasswordDialog.tsx
+++ b/frontend/web/src/components/ChangePasswordDialog.tsx
@@ -62,7 +62,7 @@ const ChangePasswordDialog: React.FC<Props> = (props: Props) => {
   return (
     <Modal open={true}>
       <ModalDialog>
-        <div className="flex flex-row justify-between items-center w-80 mb-4">
+        <div className="flex flex-row justify-between items-center w-80">
           <span className="text-lg font-medium">Change Password</span>
           <Button variant="plain" onClick={handleCloseBtnClick}>
             <Icon.X className="w-5 h-auto text-gray-600" />
diff --git a/frontend/web/src/components/CreateAccessTokenDialog.tsx b/frontend/web/src/components/CreateAccessTokenDialog.tsx
index 4f9d397..2052fac 100644
--- a/frontend/web/src/components/CreateAccessTokenDialog.tsx
+++ b/frontend/web/src/components/CreateAccessTokenDialog.tsx
@@ -87,7 +87,7 @@ const CreateAccessTokenDialog: React.FC<Props> = (props: Props) => {
   return (
     <Modal open={true}>
       <ModalDialog>
-        <div className="flex flex-row justify-between items-center w-80 sm:w-96 mb-4">
+        <div className="flex flex-row justify-between items-center w-80">
           <span className="text-lg font-medium">Create Access Token</span>
           <Button variant="plain" onClick={onClose}>
             <Icon.X className="w-5 h-auto text-gray-600" />
diff --git a/frontend/web/src/components/CreateUserDialog.tsx b/frontend/web/src/components/CreateUserDialog.tsx
index 908c31b..d07c458 100644
--- a/frontend/web/src/components/CreateUserDialog.tsx
+++ b/frontend/web/src/components/CreateUserDialog.tsx
@@ -125,7 +125,7 @@ const CreateUserDialog: React.FC<Props> = (props: Props) => {
   return (
     <Modal open={true}>
       <ModalDialog>
-        <div className="flex flex-row justify-between items-center w-80 sm:w-96 mb-4">
+        <div className="flex flex-row justify-between items-center w-80 sm:w-96">
           <span className="text-lg font-medium">{isCreating ? "Create User" : "Edit User"}</span>
           <Button variant="plain" onClick={onClose}>
             <Icon.X className="w-5 h-auto text-gray-600" />
diff --git a/frontend/web/src/components/EditUserinfoDialog.tsx b/frontend/web/src/components/EditUserinfoDialog.tsx
index 475c2d2..71d1a4e 100644
--- a/frontend/web/src/components/EditUserinfoDialog.tsx
+++ b/frontend/web/src/components/EditUserinfoDialog.tsx
@@ -58,7 +58,7 @@ const EditUserinfoDialog: React.FC<Props> = (props: Props) => {
   return (
     <Modal open={true}>
       <ModalDialog>
-        <div className="flex flex-row justify-between items-center w-80 mb-4">
+        <div className="flex flex-row justify-between items-center w-80">
           <span className="text-lg font-medium">Edit Userinfo</span>
           <Button variant="plain" onClick={handleCloseBtnClick}>
             <Icon.X className="w-5 h-auto text-gray-600" />
diff --git a/frontend/web/src/components/GenerateQRCodeDialog.tsx b/frontend/web/src/components/GenerateQRCodeDialog.tsx
index 519a1bb..0df7ccb 100644
--- a/frontend/web/src/components/GenerateQRCodeDialog.tsx
+++ b/frontend/web/src/components/GenerateQRCodeDialog.tsx
@@ -39,7 +39,7 @@ const GenerateQRCodeDialog: React.FC<Props> = (props: Props) => {
   return (
     <Modal open={true}>
       <ModalDialog>
-        <div className="flex flex-row justify-between items-center w-64 mb-4">
+        <div className="flex flex-row justify-between items-center w-64">
           <span className="text-lg font-medium">QR Code</span>
           <Button variant="plain" onClick={handleCloseBtnClick}>
             <Icon.X className="w-5 h-auto text-gray-600" />
diff --git a/frontend/web/src/components/ShortcutCard.tsx b/frontend/web/src/components/ShortcutCard.tsx
index 3057069..3610628 100644
--- a/frontend/web/src/components/ShortcutCard.tsx
+++ b/frontend/web/src/components/ShortcutCard.tsx
@@ -111,19 +111,19 @@ const ShortcutCard = (props: Props) => {
             arrow
           >
             <div
-              className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-500 text-xs"
+              className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
               onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
             >
-              <VisibilityIcon className="w-3 h-auto mr-0.5 opacity-70" visibility={shortcut.visibility} />
+              <VisibilityIcon className="w-4 h-auto mr-1 opacity-70" visibility={shortcut.visibility} />
               {t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)}
             </div>
           </Tooltip>
           <Tooltip title="View count" variant="solid" placement="top" arrow>
             <Link
               to={`/shortcut/${shortcut.id}#analytics`}
-              className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-500 text-xs"
+              className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
             >
-              <Icon.BarChart2 className="w-3 h-auto mr-0.5 opacity-70" />
+              <Icon.BarChart2 className="w-4 h-auto mr-1 opacity-70" />
               {t("shortcut.visits", { count: shortcut.viewCount })}
             </Link>
           </Tooltip>