From d36e16e7e2997e085b4db65fab8545d11da598a6 Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Thu, 29 Feb 2024 15:56:02 +0100
Subject: [PATCH] fix: settings icon color on hover

---
 src/resources/svg/close-btn-dark.svg       | 11 +++++++++--
 src/resources/svg/close-btn-light-dark.svg | 11 +++++++++--
 src/resources/svg/close-btn-light.svg      | 11 +++++++++--
 src/resources/svg/close-btn.svg            | 11 +++++++++--
 src/views/Settings.vue                     | 19 ++++++++++++++-----
 5 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/src/resources/svg/close-btn-dark.svg b/src/resources/svg/close-btn-dark.svg
index 30a6f763d..9f28a5731 100644
--- a/src/resources/svg/close-btn-dark.svg
+++ b/src/resources/svg/close-btn-dark.svg
@@ -1,4 +1,11 @@
 <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.364075 1.24554L10.3638 10.6573" stroke="#D6D6D6"/>
-<path d="M10.3641 1.34268L0.364237 10.7545" stroke="#D6D6D6"/>
+<g clip-path="url(#clip0_277_168)">
+<path d="M0.364258 1.24548L10.364 10.6572" stroke="#D6D6D6"/>
+<path d="M10.3641 1.34265L0.364258 10.7545" stroke="#D6D6D6"/>
+</g>
+<defs>
+<clipPath id="clip0_277_168">
+<rect width="11" height="12" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/src/resources/svg/close-btn-light-dark.svg b/src/resources/svg/close-btn-light-dark.svg
index 2901d6fbc..cc34966bc 100644
--- a/src/resources/svg/close-btn-light-dark.svg
+++ b/src/resources/svg/close-btn-light-dark.svg
@@ -1,4 +1,11 @@
 <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.36409 1.24554L10.3639 10.6573" stroke="white"/>
-<path d="M10.3641 1.34268L0.364253 10.7545" stroke="white"/>
+<g clip-path="url(#clip0_277_180)">
+<path d="M0.364258 1.24548L10.3641 10.6572" stroke="#3E3D4A"/>
+<path d="M10.3641 1.34265L0.364258 10.7545" stroke="#3E3D4A"/>
+</g>
+<defs>
+<clipPath id="clip0_277_180">
+<rect width="11" height="12" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/src/resources/svg/close-btn-light.svg b/src/resources/svg/close-btn-light.svg
index 2901d6fbc..b1489795d 100644
--- a/src/resources/svg/close-btn-light.svg
+++ b/src/resources/svg/close-btn-light.svg
@@ -1,4 +1,11 @@
 <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.36409 1.24554L10.3639 10.6573" stroke="white"/>
-<path d="M10.3641 1.34268L0.364253 10.7545" stroke="white"/>
+<g clip-path="url(#clip0_277_183)">
+<path d="M0.364258 1.24548L10.3641 10.6572" stroke="white"/>
+<path d="M10.3641 1.34265L0.364258 10.7545" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0_277_183">
+<rect width="11" height="12" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/src/resources/svg/close-btn.svg b/src/resources/svg/close-btn.svg
index b45a4d4a8..aae461288 100644
--- a/src/resources/svg/close-btn.svg
+++ b/src/resources/svg/close-btn.svg
@@ -1,6 +1,13 @@
 <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_277_164)">
 <g opacity="0.3">
-<line y1="-0.5" x2="13.7323" y2="-0.5" transform="matrix(0.728193 0.685373 -0.728193 0.685373 0 1.58823)" stroke="black"/>
-<line y1="-0.5" x2="13.7324" y2="-0.5" transform="matrix(-0.728193 0.685373 -0.728192 -0.685373 10 1)" stroke="black"/>
+<path d="M0.364258 1.24548L10.364 10.6572" stroke="black"/>
+<path d="M10.3643 1.34265L0.364421 10.7545" stroke="black"/>
 </g>
+</g>
+<defs>
+<clipPath id="clip0_277_164">
+<rect width="11" height="12" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index fd976c094..b5c1c181b 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -13,7 +13,12 @@
         @mouseleave="mouseLeaveAction"
         @click="close"
       >
-        <CustomIcon class-name="cross" :name="btnUrl" />
+        <CustomIcon
+          v-if="!showLightIcon"
+          class-name="cross"
+          :name="'close-btn'"
+        />
+        <CustomIcon v-else :name="'close-btn-light'" />
       </div>
       <Version />
     </div>
@@ -50,7 +55,7 @@ export default {
   data() {
     return {
       previousRoute: '',
-      btnUrl: 'close-btn',
+      showLightIcon: false,
     }
   },
   computed: {
@@ -116,10 +121,10 @@ export default {
       this.$router.push(this.previousRoute)
     },
     hoverAction() {
-      this.btnUrl = 'close-btn-light'
+      this.showLightIcon = true
     },
     mouseLeaveAction() {
-      this.btnUrl = 'close-btn'
+      this.showLightIcon = false
     },
   },
 }
@@ -150,13 +155,17 @@ export default {
 }
 
 .close {
-  border: 2px solid $grey-2;
+  border: 1px solid $grey-2;
   border-radius: 50%;
   cursor: pointer;
   height: 36px;
+  width: 36px;
   padding: 8px;
   position: absolute;
   right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   top: 32px;
 
   &:hover {