fix: settings icon color on hover

witnet · Feb 29, 2024 · d36e16e · d36e16e
1 parent afbc9a9
commit d36e16e
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 13 deletions.
diff --git a/src/resources/svg/close-btn-dark.svg b/src/resources/svg/close-btn-dark.svg
diff --git a/src/resources/svg/close-btn-light-dark.svg b/src/resources/svg/close-btn-light-dark.svg
diff --git a/src/resources/svg/close-btn-light.svg b/src/resources/svg/close-btn-light.svg
diff --git a/src/resources/svg/close-btn.svg b/src/resources/svg/close-btn.svg
diff --git 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 {