From 87ae47bd6114d660735bba82a71c4fc0883b5314 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 13 May 2021 13:59:10 +0100
Subject: [PATCH] tweak reactions row some more, third try lucky

---
 res/css/views/messages/_ReactionsRow.scss     | 36 ++++++++++++-------
 src/components/views/messages/ReactionsRow.js |  5 ++-
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss
index 15d251bd68..f1c19f45a9 100644
--- a/res/css/views/messages/_ReactionsRow.scss
+++ b/res/css/views/messages/_ReactionsRow.scss
@@ -20,23 +20,33 @@ limitations under the License.
 
     .mx_ReactionsRow_addReactionButton {
         position: relative;
-        display: none;
-        width: 16px;
-        height: 16px;
+        display: none; // show on hover of the .mx_EventTile
+        width: 24px;
+        height: 24px;
         vertical-align: middle;
-        margin-left: 6px;
+        margin-left: 4px;
 
         &::before {
             content: '';
             position: absolute;
             height: 100%;
             width: 100%;
-            mask-size: cover;
+            mask-size: 16px;
             mask-repeat: no-repeat;
             mask-position: center;
             background-color: $tertiary-fg-color;
             mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
         }
+
+        &.mx_ReactionsRow_addReactionButton_active {
+            display: inline-block; // keep showing whilst the context menu is shown
+        }
+
+        &:hover, &.mx_ReactionsRow_addReactionButton_active {
+            &::before {
+                background-color: $primary-fg-color;
+            }
+        }
     }
 }
 
@@ -46,14 +56,16 @@ limitations under the License.
 
 .mx_ReactionsRow_showAll {
     text-decoration: none;
-    font-size: $font-10px;
-    font-weight: 600;
-    margin-left: 6px;
+    font-size: $font-12px;
+    line-height: $font-20px;
+    margin-left: 4px;
     vertical-align: middle;
 
-    &:hover,
-    &:link,
-    &:visited {
-        color: $accent-color;
+    &:link, &:visited {
+        color: $tertiary-fg-color
+    }
+
+    &:hover {
+        color: $primary-fg-color;
     }
 }
diff --git a/src/components/views/messages/ReactionsRow.js b/src/components/views/messages/ReactionsRow.js
index 2a67519d6b..a7997c0e32 100644
--- a/src/components/views/messages/ReactionsRow.js
+++ b/src/components/views/messages/ReactionsRow.js
@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { EventType } from "matrix-js-sdk/src/@types/event";
+import classNames from "classnames";
 
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -43,7 +44,9 @@ const ReactButton = ({ mxEvent, reactions }) => {
 
     return <React.Fragment>
         <ContextMenuTooltipButton
-            className="mx_ReactionsRow_addReactionButton"
+            className={classNames("mx_ReactionsRow_addReactionButton", {
+                mx_ReactionsRow_addReactionButton_active: menuDisplayed,
+            })}
             title={_t("Add reaction")}
             onClick={openMenu}
             isExpanded={menuDisplayed}