Change the proxy DNS from a switch to a checkbox

Author: ruihildt

src/components/Proxy/ProxyGlobal.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { NCard, NSwitch, NTooltip } from 'naive-ui';
+import { NCard, NCheckbox, NSwitch, NTooltip } from 'naive-ui';
 
 import Button from '@/components/Buttons/Button.vue';
 import TitleCategory from '@/components/TitleCategory.vue';
@@ -40,16 +40,12 @@ const handleProxySelect = () => {
         <li>Proxy Server: {{ globalProxyDetails.server }}</li>
         <li>
           Proxy DNS
-          <n-tooltip v-if="globalProxyDetails.server">
-            <template #trigger>
-              <n-switch
-                :value="globalProxyDNSEnabled"
-                size="small"
-                @update-value="toggleGlobalProxyDNS"
-              />
-            </template>
-            <span> {{ globalProxyDNSEnabled ? 'DNS proxied' : 'DNS not proxied' }}</span>
-          </n-tooltip>
+          <n-checkbox
+            size="large"
+            :checked="globalProxyDNSEnabled"
+            :focusable="false"
+            @update-checked="toggleGlobalProxyDNS"
+          />
         </li>
       </ul>
     </div>

src/components/Proxy/ProxyHost.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { NCard, NSwitch, NTooltip } from 'naive-ui';
+import { NCard, NCheckbox, NSwitch, NTooltip } from 'naive-ui';
 
 import Button from '@/components/Buttons/Button.vue';
 import TitleCategory from '@/components/TitleCategory.vue';
@@ -56,16 +56,12 @@ const handleProxySelect = () => {
         <li>Proxy Server: {{ currentHostProxyDetails.server }}</li>
         <li>
           Proxy DNS
-          <n-tooltip v-if="currentHostProxyDetails && !currentHostExcluded">
-            <template #trigger>
-              <n-switch
-                :value="currentHostProxyDNSEnabled"
-                size="small"
-                @update-value="toggleCurrentHostProxyDNS"
-              />
-            </template>
-            <span> {{ currentHostProxyDNSEnabled ? 'DNS proxied' : 'DNS not proxied' }}</span>
-          </n-tooltip>
+          <n-checkbox
+            size="large"
+            :checked="currentHostProxyDNSEnabled"
+            :focusable="false"
+            @update-checked="toggleCurrentHostProxyDNS"
+          />
         </li>
       </ul>
     </div>

src/popup/App.vue

@@ -39,6 +39,12 @@ const themeOverrides: GlobalThemeOverrides = {
   Switch: {
     railColorActive: 'var(--success)',
   },
+  Checkbox: {
+    colorChecked: 'var(--blue)',
+    checkMarkColor: 'var(--success)',
+    border: '1px solid var(--blue)',
+    borderChecked: '1px solid var(--blue)',
+  },
 };
 </script>