From d0a160d90d5053aad5be1e38f4ab2cf8282472b8 Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Tue, 24 Dec 2024 17:39:49 +0800
Subject: [PATCH] fix: xs element -> sm element

---
 src/App.vue                                   |  2 +-
 src/api/index.ts                              |  2 +-
 src/components/connections/ConnectionCard.tsx |  2 +-
 src/components/proxies/LatencyTag.vue         |  2 +-
 src/components/proxies/ProxyGroup.vue         |  2 +-
 src/components/proxies/ProxyNodeCard.vue      |  9 ++++++---
 src/components/proxies/ProxyProvider.vue      |  4 ++--
 src/components/rules/RuleProvider.vue         |  2 +-
 src/components/settings/BackendSwitch.vue     |  4 ++--
 src/components/settings/SourceIPLabels.vue    | 10 +++++-----
 src/components/sidebar/CommonCtrl.vue         |  4 ++--
 src/components/sidebar/VerticalInfos.vue      |  2 +-
 src/components/statistics/BasicCharts.vue     |  2 +-
 src/views/SettingsPage.vue                    | 19 +++++++------------
 src/views/SetupPage.vue                       |  4 ++--
 15 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c2f21e2d..08f4695e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,7 +53,7 @@ const fontClassName = computed(() => fontClassMap[font.value])
           {{ $t(tipContent) }}
         </a>
         <button
-          class="btn btn-circle btn-ghost btn-xs"
+          class="btn btn-circle btn-ghost btn-sm"
           @click="tipShowModel = false"
         >
           <XCircleIcon class="w-4 cursor-pointer" />
diff --git a/src/api/index.ts b/src/api/index.ts
index bc46d49e..b758c621 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -152,7 +152,7 @@ export const queryDNSAPI = (params: { name: string; type: string }) => {
 
 const createWebSocket = <T>(url: string, searchParams?: Record<string, string>) => {
   const backend = activeBackend.value!
-  const resurl = new URL(`${getUrlFromBackend(backend)}/${url}`)
+  const resurl = new URL(`${getUrlFromBackend(backend).replace('http', 'ws')}/${url}`)
 
   resurl.searchParams.append('token', backend?.password || '')
 
diff --git a/src/components/connections/ConnectionCard.tsx b/src/components/connections/ConnectionCard.tsx
index da911dcb..348a9481 100644
--- a/src/components/connections/ConnectionCard.tsx
+++ b/src/components/connections/ConnectionCard.tsx
@@ -64,7 +64,7 @@ export default defineComponent<{
       const info = (
         <div class="flex w-12 gap-1">
           <button
-            class="btn btn-circle btn-xs"
+            class="btn btn-circle btn-sm"
             onClick={() => handlerInfo(props.conn)}
           >
             <InformationCircleIcon class="h-4 w-4" />
diff --git a/src/components/proxies/LatencyTag.vue b/src/components/proxies/LatencyTag.vue
index 7ea8cb38..7cef7137 100644
--- a/src/components/proxies/LatencyTag.vue
+++ b/src/components/proxies/LatencyTag.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :class="
-      twMerge('flex h-4 w-8 items-center justify-center rounded-lg bg-base-100 text-xs', color)
+      twMerge('flex h-5 w-8 items-center justify-center rounded-xl bg-base-100 text-xs', color)
     "
   >
     <BoltIcon
diff --git a/src/components/proxies/ProxyGroup.vue b/src/components/proxies/ProxyGroup.vue
index ed249656..45568085 100644
--- a/src/components/proxies/ProxyGroup.vue
+++ b/src/components/proxies/ProxyGroup.vue
@@ -21,7 +21,7 @@
           @click.stop="handlerLatencyTest"
         />
       </div>
-      <div class="flex items-center gap-2 text-xs text-slate-500">
+      <div class="flex items-center gap-2 text-sm text-slate-500">
         <div class="flex-1">{{ proxyGroup.type }} ({{ proxyGroup.all?.length }})</div>
         <div class="shrink-0">{{ prettyBytesHelper(downloadTotal) }}/s</div>
       </div>
diff --git a/src/components/proxies/ProxyNodeCard.vue b/src/components/proxies/ProxyNodeCard.vue
index 97205f4b..67f2816b 100644
--- a/src/components/proxies/ProxyNodeCard.vue
+++ b/src/components/proxies/ProxyNodeCard.vue
@@ -19,7 +19,7 @@
     <div
       :class="
         twMerge(
-          'flex-1 whitespace-nowrap text-xs md:text-sm',
+          'flex-1 whitespace-nowrap text-sm',
           truncateProxyName && 'truncate',
           tightMode && 'pr-6',
         )
@@ -29,12 +29,15 @@
       {{ node.name }}
     </div>
     <span
-      :class="`text-xs tracking-tight ${tightMode ? 'absolute bottom-0 right-0 scale-75' : ''}`"
+      :class="`text-xs tracking-tight ${tightMode ? 'absolute bottom-0 right-1 scale-[0.9]' : ''}`"
     >
       {{ typeDescription }}
     </span>
     <LatencyTag
-      :class="[isLatencyTesting ? 'animate-pulse' : '', tightMode ? 'absolute right-2 top-1' : '']"
+      :class="[
+        isLatencyTesting ? 'animate-pulse' : '',
+        tightMode ? 'absolute right-1 top-[2px]' : '',
+      ]"
       :name="node.name"
       @click.stop="handlerLatencyTest"
     />
diff --git a/src/components/proxies/ProxyProvider.vue b/src/components/proxies/ProxyProvider.vue
index 6773cd12..a7fc9094 100644
--- a/src/components/proxies/ProxyProvider.vue
+++ b/src/components/proxies/ProxyProvider.vue
@@ -9,13 +9,13 @@
         <div class="flex-1" />
         <div class="flex gap-2">
           <button
-            :class="twMerge('btn btn-circle btn-xs z-30', isHealthChecking ? 'animate-pulse' : '')"
+            :class="twMerge('btn btn-circle btn-sm z-30', isHealthChecking ? 'animate-pulse' : '')"
             @click.stop="healthCheckClickHandler"
           >
             <BoltIcon class="h-4 w-4" />
           </button>
           <button
-            :class="twMerge('btn btn-circle btn-xs z-30', isUpdating ? 'animate-spin' : '')"
+            :class="twMerge('btn btn-circle btn-sm z-30', isUpdating ? 'animate-spin' : '')"
             @click.stop="updateProviderClickHandler"
           >
             <ArrowPathIcon class="h-4 w-4" />
diff --git a/src/components/rules/RuleProvider.vue b/src/components/rules/RuleProvider.vue
index dd2d88bf..61f1bd03 100644
--- a/src/components/rules/RuleProvider.vue
+++ b/src/components/rules/RuleProvider.vue
@@ -10,7 +10,7 @@
       </div>
     </div>
     <button
-      :class="twMerge('btn btn-circle btn-xs', isUpdating ? 'animate-spin' : '')"
+      :class="twMerge('btn btn-circle btn-sm', isUpdating ? 'animate-spin' : '')"
       @click="updateRuleProviderClickHandler"
     >
       <ArrowPathIcon class="h-4 w-4" />
diff --git a/src/components/settings/BackendSwitch.vue b/src/components/settings/BackendSwitch.vue
index 330938d4..44536f95 100644
--- a/src/components/settings/BackendSwitch.vue
+++ b/src/components/settings/BackendSwitch.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="join flex">
     <select
-      class="join-item select select-bordered select-xs w-48"
+      class="join-item select select-bordered select-sm w-48"
       v-model="activeUuid"
     >
       <option
@@ -13,7 +13,7 @@
       </option>
     </select>
     <button
-      class="btn join-item btn-xs"
+      class="btn join-item btn-sm"
       @click="addBackend"
     >
       <PlusIcon class="h-4 w-4" />
diff --git a/src/components/settings/SourceIPLabels.vue b/src/components/settings/SourceIPLabels.vue
index 5dafe3e6..38bfbd31 100644
--- a/src/components/settings/SourceIPLabels.vue
+++ b/src/components/settings/SourceIPLabels.vue
@@ -9,11 +9,11 @@
       {{ ip }} ->
       <input
         type="text"
-        class="input input-xs input-bordered w-24"
+        class="input input-sm input-bordered w-24"
         v-model="sourceIPLabelMap[ip]"
       />
       <button
-        class="btn btn-circle btn-xs"
+        class="btn btn-circle btn-sm"
         @click="() => handlerLabelRemove(ip)"
       >
         <MinusCircleIcon class="h-4 w-4" />
@@ -23,16 +23,16 @@
       IP:
       <input
         type="text"
-        class="input input-xs input-bordered w-44"
+        class="input input-sm input-bordered w-44"
         v-model="newLabelForIP.ip"
       />
       <input
         type="text"
-        class="input input-xs input-bordered w-20"
+        class="input input-sm input-bordered w-20"
         v-model="newLabelForIP.label"
       />
       <button
-        class="btn btn-circle btn-xs"
+        class="btn btn-circle btn-sm"
         @click="handlerLabelAdd"
       >
         <PlusIcon class="h-4 w-4" />
diff --git a/src/components/sidebar/CommonCtrl.vue b/src/components/sidebar/CommonCtrl.vue
index 08a055ed..28ca84c5 100644
--- a/src/components/sidebar/CommonCtrl.vue
+++ b/src/components/sidebar/CommonCtrl.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="flex flex-col gap-2 p-2 text-xs">
+  <div class="flex flex-col gap-2 p-2 text-sm">
     <StatisticsInfo />
     <BackendVersion />
 
     <div class="flex">
       <button
-        class="btn btn-circle btn-xs"
+        class="btn btn-circle btn-sm"
         @click="isSiderbarCollapsed = true"
       >
         <ArrowLeftCircleIcon class="h-5 w-5" />
diff --git a/src/components/sidebar/VerticalInfos.vue b/src/components/sidebar/VerticalInfos.vue
index 73e4fce9..ab11d468 100644
--- a/src/components/sidebar/VerticalInfos.vue
+++ b/src/components/sidebar/VerticalInfos.vue
@@ -20,7 +20,7 @@
     </div>
     <div class="flex flex-col items-center justify-center">
       <button
-        class="btn btn-circle btn-xs"
+        class="btn btn-circle btn-sm"
         @click="isSiderbarCollapsed = false"
       >
         <ArrowRightCircleIcon class="h-5 w-5" />
diff --git a/src/components/statistics/BasicCharts.vue b/src/components/statistics/BasicCharts.vue
index 8c4c91f8..4f8868f4 100644
--- a/src/components/statistics/BasicCharts.vue
+++ b/src/components/statistics/BasicCharts.vue
@@ -13,7 +13,7 @@
       ref="themeColorRef"
     ></span>
     <button
-      class="btn btn-ghost btn-xs absolute bottom-0 right-1"
+      class="btn btn-ghost btn-sm absolute bottom-0 right-1"
       @click="isPaused = !isPaused"
     >
       <component
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index 22ce321f..6d722e8a 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -64,9 +64,7 @@
         <div class="grid max-w-screen-md grid-cols-2 gap-2 sm:grid-cols-4">
           <template v-if="!isSingBox">
             <button
-              :class="
-                twMerge('btn btn-primary btn-xs sm:btn-sm', isUIUpgrading ? 'animate-pulse' : '')
-              "
+              :class="twMerge('btn btn-primary btn-sm', isUIUpgrading ? 'animate-pulse' : '')"
               @click="handlerClickUpgradeUI"
             >
               {{ $t('upgradeUI') }}
@@ -75,13 +73,13 @@
           </template>
 
           <button
-            class="btn btn-xs sm:btn-sm"
+            class="btn btn-sm"
             @click="exportSettings"
           >
             {{ $t('exportSettings') }}
           </button>
           <button
-            class="btn btn-xs sm:btn-sm"
+            class="btn btn-sm"
             @click="importSettings"
           >
             {{ $t('importSettings') }}
@@ -139,10 +137,7 @@
               </span>
               <button
                 :class="
-                  twMerge(
-                    'btn btn-primary btn-xs flex-1 sm:btn-sm',
-                    isCoreUpgrading ? 'animate-pulse' : '',
-                  )
+                  twMerge('btn btn-primary btn-sm flex-1', isCoreUpgrading ? 'animate-pulse' : '')
                 "
                 @click="handlerClickUpgradeCore"
               >
@@ -150,20 +145,20 @@
               </button>
             </div>
             <button
-              :class="twMerge('btn btn-xs sm:btn-sm', isCoreRestarting ? 'animate-pulse' : '')"
+              :class="twMerge('btn btn-sm', isCoreRestarting ? 'animate-pulse' : '')"
               @click="handlerClickRestartCore"
             >
               {{ $t('restartCore') }}
             </button>
           </template>
           <button
-            :class="twMerge('btn btn-xs sm:btn-sm', isConfigReloading ? 'animate-pulse' : '')"
+            :class="twMerge('btn btn-sm', isConfigReloading ? 'animate-pulse' : '')"
             @click="handlerClickReloadConfigs"
           >
             {{ $t('reloadConfigs') }}
           </button>
           <button
-            class="btn btn-xs sm:btn-sm"
+            class="btn btn-sm"
             @click="flushFakeIPAPI"
           >
             {{ $t('flushFakeIP') }}
diff --git a/src/views/SetupPage.vue b/src/views/SetupPage.vue
index a6a2ca41..c3847992 100644
--- a/src/views/SetupPage.vue
+++ b/src/views/SetupPage.vue
@@ -89,13 +89,13 @@
           class="flex items-center gap-2"
         >
           <button
-            class="btn btn-xs flex-1"
+            class="btn btn-sm flex-1"
             @click="selectBackend(backend.uuid)"
           >
             {{ getUrlFromBackend(backend) }}
           </button>
           <button
-            class="btn btn-circle btn-xs"
+            class="btn btn-circle btn-sm"
             @click="() => removeBackend(backend.uuid)"
           >
             <MinusCircleIcon class="h-4 w-4" />