tweak reactions row some more, third try lucky

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;
     }
 }

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}