From 36633ec025c16bb1fb11a513deab08970770dafa Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 13 May 2021 13:32:38 +0100
Subject: [PATCH] Tweak alignment of reactions row, move add reaction to right
 and only show on hover

---
 res/css/views/messages/_ReactionsRow.scss       | 11 ++++++++---
 res/css/views/messages/_ReactionsRowButton.scss |  5 +++--
 src/components/views/messages/ReactionsRow.js   |  2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss
index e86d23dc7c..15d251bd68 100644
--- a/res/css/views/messages/_ReactionsRow.scss
+++ b/res/css/views/messages/_ReactionsRow.scss
@@ -20,10 +20,11 @@ limitations under the License.
 
     .mx_ReactionsRow_addReactionButton {
         position: relative;
-        display: inline-block;
+        display: none;
         width: 16px;
         height: 16px;
-        vertical-align: sub;
+        vertical-align: middle;
+        margin-left: 6px;
 
         &::before {
             content: '';
@@ -39,12 +40,16 @@ limitations under the License.
     }
 }
 
+.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
+    display: inline-block;
+}
+
 .mx_ReactionsRow_showAll {
     text-decoration: none;
     font-size: $font-10px;
     font-weight: 600;
     margin-left: 6px;
-    vertical-align: top;
+    vertical-align: middle;
 
     &:hover,
     &:link,
diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index c132fa5a0f..766fea2f8f 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -16,14 +16,15 @@ limitations under the License.
 
 .mx_ReactionsRowButton {
     display: inline-flex;
-    line-height: $font-21px;
+    line-height: $font-20px;
     margin-right: 6px;
-    padding: 0 6px;
+    padding: 1px 6px;
     border: 1px solid $reaction-row-button-border-color;
     border-radius: 10px;
     background-color: $reaction-row-button-bg-color;
     cursor: pointer;
     user-select: none;
+    vertical-align: middle;
 
     &:hover {
         border-color: $reaction-row-button-hover-border-color;
diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js
index 22f12709a7..2a67519d6b 100644
--- a/src/components/views/messages/ReactionsRow.js
+++ b/src/components/views/messages/ReactionsRow.js
@@ -192,8 +192,8 @@ export default class ReactionsRow extends React.PureComponent {
             aria-label={_t("Reactions")}
         >
             { items }
-            { addReactionButton }
             { showAllButton }
+            { addReactionButton }
         </div>;
     }
 }