From 3a8de1e44918836fa6866bd814899ec0cadace28 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 2 Mar 2023 21:39:39 -0500
Subject: [PATCH] Make interaction buttons use focused-style

---
 src/components/extra_buttons/extra_buttons.vue     | 10 +++++-----
 src/components/favorite_button/favorite_button.vue |  6 +++++-
 src/components/react_button/react_button.vue       | 12 ++++++------
 src/components/reply_button/reply_button.vue       |  6 +++++-
 src/components/retweet_button/retweet_button.vue   |  6 +++++-
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index c1c15c0f..c6f4f6ae 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -192,11 +192,6 @@
     position: static;
     padding: 10px;
     margin: -10px;
-
-    &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover-trigger-button {
@@ -213,6 +208,11 @@
       .focus-marker {
         visibility: visible;
       }
+
+      .svg-inline--fa {
+        color: $fallback--text;
+        color: var(--text, $fallback--text);
+      }
     }
   }
 }
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 8c883c13..8ecc2aba 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -86,7 +86,6 @@
       animation-duration: 0.6s;
     }
 
-    &:hover .svg-inline--fa,
     &.-favorited .svg-inline--fa {
       color: $fallback--cOrange;
       color: var(--cOrange, $fallback--cOrange);
@@ -103,6 +102,11 @@
     }
 
     @include focused-style {
+      .svg-inline--fa {
+        color: $fallback--cOrange;
+        color: var(--cOrange, $fallback--cOrange);
+      }
+
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index a813b6fd..97da2a0b 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -121,7 +121,7 @@
       line-height: 1.5;
       align-content: center;
 
-      &:hover {
+      @include focused-style {
         transform: scale(1.25);
       }
     }
@@ -130,11 +130,6 @@
   .popover-trigger {
     padding: 10px;
     margin: -10px;
-
-    &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover-trigger-button {
@@ -151,6 +146,11 @@
       .focus-marker {
         visibility: visible;
       }
+
+      .svg-inline--fa {
+        color: $fallback--text;
+        color: var(--text, $fallback--text);
+      }
     }
   }
 }
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index 60a40a08..9fdc21c7 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -76,7 +76,6 @@
   }
 
   .interactive {
-    &:hover .svg-inline--fa,
     &.-active .svg-inline--fa {
       color: $fallback--cBlue;
       color: var(--cBlue, $fallback--cBlue);
@@ -89,6 +88,11 @@
     }
 
     @include focused-style {
+      .svg-inline--fa {
+        color: $fallback--cBlue;
+        color: var(--cBlue, $fallback--cBlue);
+      }
+
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index e1b6b153..884a6334 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -105,7 +105,6 @@
       animation-duration: 0.6s;
     }
 
-    &:hover .svg-inline--fa,
     &.-repeated .svg-inline--fa {
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
@@ -122,6 +121,11 @@
     }
 
     @include focused-style {
+      .svg-inline--fa {
+        color: $fallback--cGreen;
+        color: var(--cGreen, $fallback--cGreen);
+      }
+
       .focus-marker {
         visibility: visible;
       }