From ffcac7bf5ab2ef6ef27febb6695969baff1a2035 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 16 Jun 2023 10:25:58 -0400
Subject: [PATCH] UX: consistent button hover transitions (#22157)

---
 app/assets/stylesheets/common/base/topic-post.scss    | 11 ++++++-----
 app/assets/stylesheets/common/components/buttons.scss |  4 +++-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 0c3c5ec4305..a3c7fe5c4d2 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -315,6 +315,11 @@ nav.post-controls {
       vertical-align: top;
       background: transparent;
       border: none;
+      .d-icon {
+        // this avoids an issue where hovering off the icon
+        // removes the .d-hover class from the button prematurely
+        pointer-events: none;
+      }
       &.d-hover,
       &:focus,
       &:active {
@@ -329,7 +334,7 @@ nav.post-controls {
         position: relative;
       }
       &.delete.d-hover,
-      &.delete:hover,
+      &.delete:active,
       &.delete:focus {
         background: var(--danger);
         color: var(--secondary);
@@ -982,17 +987,13 @@ aside.quote {
     .widget-button {
       display: flex;
       align-items: center;
-
       .d-button-label {
         order: 0;
         padding-right: 0.25em;
         color: var(--primary-med-or-secondary-med);
-        transition: color 0.25s;
       }
-
       .d-icon {
         order: 1;
-        transition: color 0.25s;
         color: var(--primary-med-or-secondary-med);
       }
       .discourse-no-touch & {
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index c901d5232bb..fa142c4d99a 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -27,6 +27,7 @@
     rgba(0, 0, 0, 0)
   );
   border-radius: var(--d-button-border-radius);
+  transition: background 0.25s, color 0.25s;
   cursor: pointer;
   .d-icon {
     color: $icon-color;
@@ -293,9 +294,10 @@
   background: transparent;
   border: 0;
   line-height: var(--line-height-small);
-  transition: color 0.25s, background 0.25s;
+  transition: background 0.25s, color 0.25s;
   .d-icon {
     color: var(--primary-low-mid);
+    transition: color 0.25s;
   }
   @include hover {
     background: transparent;