From 13dfc677dc4d8cc84215d14b3832e736ff23c7be Mon Sep 17 00:00:00 2001
From: rui hildt <rui@mullvad.net>
Date: Fri, 19 Apr 2024 14:57:32 +0200
Subject: [PATCH] Change the proxy DNS from a switch to a checkbox

---
 src/components/Proxy/ProxyGlobal.vue | 18 +++++++-----------
 src/components/Proxy/ProxyHost.vue   | 18 +++++++-----------
 src/popup/App.vue                    |  6 ++++++
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/components/Proxy/ProxyGlobal.vue b/src/components/Proxy/ProxyGlobal.vue
index 9287aadd..77f43b9b 100644
--- a/src/components/Proxy/ProxyGlobal.vue
+++ b/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>
diff --git a/src/components/Proxy/ProxyHost.vue b/src/components/Proxy/ProxyHost.vue
index 56adae7f..a54d95b3 100644
--- a/src/components/Proxy/ProxyHost.vue
+++ b/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>
diff --git a/src/popup/App.vue b/src/popup/App.vue
index e4a7626e..1a160fea 100644
--- a/src/popup/App.vue
+++ b/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>