feat(button): icon button

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>
   )
 }

src/components/Header.tsx

@@ -159,9 +159,8 @@ export const Header = () => {
 
               locale(curLocale === LANG.EN ? LANG.ZH : LANG.EN)
             }}
-          >
+            icon={<IconLanguage />}
-            <IconLanguage />
+          />
-          </Button>
 
           <ThemeSwitcher />
         </div>

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()}

src/pages/Connections.tsx

@@ -109,9 +109,8 @@ export default () => {
 
               modal?.showModal()
             }}
-          >
+            icon={<IconInfoSmall size="16" />}
-            <IconInfoSmall size="16" />
+          />
-          </Button>
         </div>
       ),
     },
@@ -127,9 +126,8 @@ export default () => {
           <Button
             class="btn-circle btn-xs"
             onClick={() => closeSingleConnectionAPI(row.original.id)}
-          >
+            icon={<IconX size="16" />}
-            <IconX size="16" />
+          />
-          </Button>
         </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)}
-          >
+            icon={paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
-            {paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
+          />
-          </Button>
 
           <Button
             class="join-item btn-sm sm:btn-md"
@@ -395,9 +392,8 @@ export default () => {
                 closeAllConnectionsAPI()
               }
             }}
-          >
+            icon={<IconX />}
-            <IconX />
+          />
-          </Button>
 
           <Button
             class="btn join-item btn-sm sm:btn-md"
@@ -408,9 +404,8 @@ export default () => {
 
               modal?.showModal()
             }}
-          >
+            icon={<IconSettings />}
-            <IconSettings />
+          />
-          </Button>
         </div>
       </div>
 

src/pages/Logs.tsx

@@ -146,9 +146,8 @@ export default () => {
 
             modal?.showModal()
           }}
-        >
+          icon={<IconSettings />}
-          <IconSettings />
+        />
-        </Button>
       </div>
 
       <div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">

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)}
-          >
+            icon={
               <IconReload
                 class={twMerge(
                   isAllProviderUpdating() && 'animate-spin text-success',
                 )}
               />
-          </Button>
+            }
+          />
         </Show>
 
         <div class="ml-auto">
@@ -139,9 +140,8 @@ export default () => {
 
               modal?.showModal()
             }}
-          >
+            icon={<IconSettings />}
-            <IconSettings />
+          />
-          </Button>
         </div>
       </div>
 
@@ -176,14 +176,15 @@ export default () => {
                         class="btn-circle btn-sm"
                         disabled={latencyTestingMap()[proxyGroup.name]}
                         onClick={(e) => onLatencyTestClick(e, proxyGroup.name)}
-                      >
+                        icon={
                           <IconBrandSpeedtest
                             class={twMerge(
                               latencyTestingMap()[proxyGroup.name] &&
                                 'animate-pulse text-success',
                             )}
                           />
-                      </Button>
+                        }
+                      />
                     </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)
                           }
-                        >
+                          icon={
                             <IconReload
                               class={twMerge(
                                 updatingMap()[proxyProvider.name] &&
                                   'animate-spin text-success',
                               )}
                             />
-                        </Button>
+                          }
+                        />
 
                         <Button
                           class="btn btn-circle btn-sm"
@@ -264,14 +266,15 @@ export default () => {
                           onClick={(e) =>
                             onHealthCheckClick(e, proxyProvider.name)
                           }
-                        >
+                          icon={
                             <IconBrandSpeedtest
                               class={twMerge(
                                 healthCheckingMap()[proxyProvider.name] &&
                                   'animate-pulse text-success',
                               )}
                             />
-                        </Button>
+                          }
+                        />
                       </div>
                     </div>