From 5296bd53858f8e23ee8ee82a08c8caa568edb3c8 Mon Sep 17 00:00:00 2001
From: Nikita-Polyakov <polyakov@soramitsu.co.jp>
Date: Tue, 5 Mar 2024 17:07:18 +0300
Subject: [PATCH] fix icon hover & dropdown focus

---
 src/components/shared/Button/SortButton.vue |  2 ++
 src/components/shared/LinksDropdown.vue     |  2 +-
 src/styles/_mixins.scss                     | 13 +++++++------
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/shared/Button/SortButton.vue b/src/components/shared/Button/SortButton.vue
index 520725304..2d8d6816f 100644
--- a/src/components/shared/Button/SortButton.vue
+++ b/src/components/shared/Button/SortButton.vue
@@ -75,5 +75,7 @@ export default class SortButton extends Vue {
   &--descending {
     transform: rotate(180deg);
   }
+
+  @include icon-styles($hoverColor: var(--s-color-theme-accent-hover));
 }
 </style>
diff --git a/src/components/shared/LinksDropdown.vue b/src/components/shared/LinksDropdown.vue
index f47475cb6..d884925e5 100644
--- a/src/components/shared/LinksDropdown.vue
+++ b/src/components/shared/LinksDropdown.vue
@@ -51,7 +51,7 @@ export default class LinksDropdown extends Mixins(TranslationMixin) {
   &,
   .el-tooltip {
     &:focus {
-      outline: auto;
+      @include focus-outline($inner: true);
     }
   }
 }
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 110bab08e..860471fc0 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -346,14 +346,16 @@ $button-custom-shadow: -1px -1px 5px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0,
   }
 }
 
-@mixin icon-styles($hasPointerCursor: false) {
+@mixin icon-styles($hasPointerCursor: false, $withHover: true, $hoverColor: var(--s-color-base-content-secondary)) {
   color: var(--s-color-base-content-tertiary);
   transition: var(--s-transition-default);
   @if $hasPointerCursor == true {
     cursor: pointer;
   }
-  &:hover {
-    color: var(--s-color-base-content-secondary);
+  @if $withHover == true {
+    &:hover {
+      color: $hoverColor;
+    }
   }
 }
 
@@ -488,9 +490,8 @@ $button-custom-shadow: -1px -1px 5px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0,
         font-weight: 500 !important;
       }
 
-      [class^='s-icon-'],
-      [class*=' s-icon-'] {
-        @include icon-styles;
+      i:not(.sort-icon) {
+        @include icon-styles($withHover: false);
       }
     }