From 9ddb3a9ca64ad5cc2b98bb9624f03cb4c1b2ed43 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 8 Nov 2021 13:21:16 -0500
Subject: [PATCH] FIX: Restore animation for like action on mobile (#14844)

Regressed in https://github.com/discourse/discourse/commit/89a2cec7bef2321a4f633f900b2b240dd91113ce
---
 .../discourse/app/widgets/post-menu.js           |  2 +-
 .../stylesheets/common/base/topic-post.scss      | 16 ++++++++++++++++
 app/assets/stylesheets/desktop/topic-post.scss   | 15 ---------------
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/widgets/post-menu.js b/app/assets/javascripts/discourse/app/widgets/post-menu.js
index 5eaa372b6ec..fcbb4263b89 100644
--- a/app/assets/javascripts/discourse/app/widgets/post-menu.js
+++ b/app/assets/javascripts/discourse/app/widgets/post-menu.js
@@ -677,7 +677,7 @@ export default createWidget("post-menu", {
       `.toggle-like[data-post-id="${attrs.id}"] .d-icon`
     );
     heart.closest(".toggle-like").classList.add("has-like");
-    heart.classList.add("has-animation");
+    heart.classList.add("heart-animation");
 
     return new Promise((resolve) => {
       later(() => {
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 6e091157fb0..a6baafd79c1 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -274,6 +274,22 @@ $quote-share-maxwidth: 150px;
   }
 }
 
+@keyframes heartBump {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.has-like .d-icon.heart-animation {
+  animation: heartBump 0.4s;
+}
+
 // we use aside to hold expandable quotes (versus, say, static blockquotes)
 aside.quote {
   margin-top: 1em;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index bd2b8e66717..ab3737de0f8 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -1,15 +1,3 @@
-@keyframes heartBump {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
 .wrap {
   max-width: $large-width;
 }
@@ -115,9 +103,6 @@ nav.post-controls {
           // Like button after I've liked
           .d-icon {
             color: var(--love);
-            &.has-animation {
-              animation: heartBump 0.4s;
-            }
           }
           &.d-hover {
             background: var(--primary-low);