From 5ef8410da5cbc67ad7fc6bd63775e325aaf57828 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Fri, 22 Sep 2023 16:05:36 +0800
Subject: [PATCH] feat(button): icon button

---
 src/components/Button.tsx | 24 ++++++++++--
 src/components/Header.tsx |  5 +--
 src/pages/Config.tsx      |  4 +-
 src/pages/Connections.tsx | 27 ++++++--------
 src/pages/Logs.tsx        |  5 +--
 src/pages/Proxies.tsx     | 77 ++++++++++++++++++++-------------------
 6 files changed, 76 insertions(+), 66 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 1f84489..58732c7 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -5,13 +5,22 @@ export const Button: ParentComponent<
   JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
     loading?: boolean
     disabled?: boolean
+    icon?: JSX.Element
   }
 > = (props) => {
-  const [local, others] = splitProps(props, ['class', 'loading', 'disabled'])
+  const [local, others] = splitProps(props, [
+    'class',
+    'loading',
+    'disabled',
+    'icon',
+  ])
 
   return (
     <button
-      class={twMerge('btn', local.loading ? 'btn-disabled' : local.class)}
+      class={twMerge(
+        'btn flex items-center',
+        local.loading ? 'btn-disabled' : local.class,
+      )}
       {...others}
       onClick={(e) => {
         if (props.disabled) {
@@ -27,10 +36,17 @@ export const Button: ParentComponent<
       }}
     >
       <Show when={local.loading}>
-        <span class="loading loading-spinner" />
+        <div class="loading loading-spinner" />
       </Show>
 
-      {props.children}
+      <span
+        class="truncate"
+        classList={{
+          'flex-1': !local.icon,
+        }}
+      >
+        {props.icon || props.children}
+      </span>
     </button>
   )
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 1aacd5f..b27040b 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -159,9 +159,8 @@ export const Header = () => {
 
               locale(curLocale === LANG.EN ? LANG.ZH : LANG.EN)
             }}
-          >
-            <IconLanguage />
-          </Button>
+            icon={<IconLanguage />}
+          />
 
           <ThemeSwitcher />
         </div>
diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
index d800940..c5c0b18 100644
--- a/src/pages/Config.tsx
+++ b/src/pages/Config.tsx
@@ -217,7 +217,7 @@ const ConfigForm = () => {
         </For>
       </form>
 
-      <div class="flex flex-wrap items-center justify-center gap-2">
+      <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
         <Button
           class="btn-primary"
           loading={reloadingConfigFile()}
@@ -241,9 +241,7 @@ const ConfigForm = () => {
         >
           {t('flushFakeIP')}
         </Button>
-      </div>
 
-      <div class="flex flex-wrap items-center justify-center gap-2">
         <Button
           class="btn-error"
           loading={upgradingBackend()}
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index 499e18b..4e72051 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -109,9 +109,8 @@ export default () => {
 
               modal?.showModal()
             }}
-          >
-            <IconInfoSmall size="16" />
-          </Button>
+            icon={<IconInfoSmall size="16" />}
+          />
         </div>
       ),
     },
@@ -127,9 +126,8 @@ export default () => {
           <Button
             class="btn-circle btn-xs"
             onClick={() => closeSingleConnectionAPI(row.original.id)}
-          >
-            <IconX size="16" />
-          </Button>
+            icon={<IconX size="16" />}
+          />
         </div>
       ),
     },
@@ -348,7 +346,7 @@ export default () => {
           </div>
 
           <select
-            class="join-item select select-bordered select-primary"
+            class="select join-item select-bordered select-primary"
             onChange={(e) => setSourceIPFilter(e.target.value)}
           >
             <option value="">{t('all')}</option>
@@ -380,9 +378,8 @@ export default () => {
           <Button
             class="join-item btn-sm sm:btn-md"
             onClick={() => setPaused((paused) => !paused)}
-          >
-            {paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
-          </Button>
+            icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
+          />
 
           <Button
             class="join-item btn-sm sm:btn-md"
@@ -395,9 +392,8 @@ export default () => {
                 closeAllConnectionsAPI()
               }
             }}
-          >
-            <IconX />
-          </Button>
+            icon={<IconX />}
+          />
 
           <Button
             class="btn join-item btn-sm sm:btn-md"
@@ -408,9 +404,8 @@ export default () => {
 
               modal?.showModal()
             }}
-          >
-            <IconSettings />
-          </Button>
+            icon={<IconSettings />}
+          />
         </div>
       </div>
 
diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx
index bfcc28e..ba88ab4 100644
--- a/src/pages/Logs.tsx
+++ b/src/pages/Logs.tsx
@@ -146,9 +146,8 @@ export default () => {
 
             modal?.showModal()
           }}
-        >
-          <IconSettings />
-        </Button>
+          icon={<IconSettings />}
+        />
       </div>
 
       <div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index 10c11b9..9f3c829 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -98,7 +98,7 @@ export default () => {
   return (
     <div class="flex h-full flex-col gap-2">
       <div class="flex items-center gap-2">
-        <div class="tabs-boxed tabs gap-2">
+        <div class="tabs tabs-boxed gap-2">
           <For each={tabs()}>
             {(tab) => (
               <button
@@ -120,13 +120,14 @@ export default () => {
             class="btn btn-circle btn-sm"
             disabled={isAllProviderUpdating()}
             onClick={(e) => onUpdateAllProviderClick(e)}
-          >
-            <IconReload
-              class={twMerge(
-                isAllProviderUpdating() && 'animate-spin text-success',
-              )}
-            />
-          </Button>
+            icon={
+              <IconReload
+                class={twMerge(
+                  isAllProviderUpdating() && 'animate-spin text-success',
+                )}
+              />
+            }
+          />
         </Show>
 
         <div class="ml-auto">
@@ -139,9 +140,8 @@ export default () => {
 
               modal?.showModal()
             }}
-          >
-            <IconSettings />
-          </Button>
+            icon={<IconSettings />}
+          />
         </div>
       </div>
 
@@ -176,14 +176,15 @@ export default () => {
                         class="btn-circle btn-sm"
                         disabled={latencyTestingMap()[proxyGroup.name]}
                         onClick={(e) => onLatencyTestClick(e, proxyGroup.name)}
-                      >
-                        <IconBrandSpeedtest
-                          class={twMerge(
-                            latencyTestingMap()[proxyGroup.name] &&
-                              'animate-pulse text-success',
-                          )}
-                        />
-                      </Button>
+                        icon={
+                          <IconBrandSpeedtest
+                            class={twMerge(
+                              latencyTestingMap()[proxyGroup.name] &&
+                                'animate-pulse text-success',
+                            )}
+                          />
+                        }
+                      />
                     </div>
 
                     <div class="text-sm text-slate-500">
@@ -242,21 +243,22 @@ export default () => {
                         </div>
                       </div>
 
-                      <div>
+                      <div class="flex items-center gap-2">
                         <Button
-                          class="btn btn-circle btn-sm mr-2"
+                          class="btn btn-circle btn-sm"
                           disabled={updatingMap()[proxyProvider.name]}
                           onClick={(e) =>
                             onUpdateProviderClick(e, proxyProvider.name)
                           }
-                        >
-                          <IconReload
-                            class={twMerge(
-                              updatingMap()[proxyProvider.name] &&
-                                'animate-spin text-success',
-                            )}
-                          />
-                        </Button>
+                          icon={
+                            <IconReload
+                              class={twMerge(
+                                updatingMap()[proxyProvider.name] &&
+                                  'animate-spin text-success',
+                              )}
+                            />
+                          }
+                        />
 
                         <Button
                           class="btn btn-circle btn-sm"
@@ -264,14 +266,15 @@ export default () => {
                           onClick={(e) =>
                             onHealthCheckClick(e, proxyProvider.name)
                           }
-                        >
-                          <IconBrandSpeedtest
-                            class={twMerge(
-                              healthCheckingMap()[proxyProvider.name] &&
-                                'animate-pulse text-success',
-                            )}
-                          />
-                        </Button>
+                          icon={
+                            <IconBrandSpeedtest
+                              class={twMerge(
+                                healthCheckingMap()[proxyProvider.name] &&
+                                  'animate-pulse text-success',
+                              )}
+                            />
+                          }
+                        />
                       </div>
                     </div>