Add react button to action bar

This adds a (temporarily non-functional) react button to the action bar.

Part of https://github.com/vector-im/riot-web/issues/9753

res/css/views/messages/_MessageActionBar.scss

@@ -67,6 +67,10 @@ limitations under the License.
     background-color: $message-action-bar-fg-color;
 }
 
+.mx_MessageActionBar_reactButton::after {
+    mask-image: url('$(res)/img/react.svg');
+}
+
 .mx_MessageActionBar_replyButton::after {
     mask-image: url('$(res)/img/reply.svg');
 }

res/img/react.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 18 17">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#2E2F32" fill-rule="nonzero" d="M13.6 14.5a7.875 7.875 0 1 1 2.183-3h-.818a7.125 7.125 0 1 0-2.62 3H13.6z"/>
+        <g stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round" stroke-width=".75">
+            <path d="M11.5 13h6M14.5 10v6"/>
+        </g>
+        <path stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round" stroke-width=".75" d="M5.5 10s1.125 1.5 3 1.5 3-1.5 3-1.5"/>
+        <path stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.25 6.25h.008M10.75 6.25h.008"/>
+    </g>
+</svg>

src/components/views/messages/MessageActionBar.js

@@ -131,6 +131,16 @@ export default class MessageActionBar extends React.PureComponent {
         return SettingsStore.isFeatureEnabled("feature_message_editing");
     }
 
+    renderReactButton() {
+        if (!this.isReactionsEnabled()) {
+            return null;
+        }
+
+        return <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton"
+            title={_t("React")}
+        />;
+    }
+
     renderAgreeDimension() {
         if (!this.isReactionsEnabled()) {
             return null;
@@ -160,12 +170,14 @@ export default class MessageActionBar extends React.PureComponent {
     }
 
     render() {
+        let reactButton;
         let agreeDimensionReactionButtons;
         let likeDimensionReactionButtons;
         let replyButton;
         let editButton;
 
         if (isContentActionable(this.props.mxEvent)) {
+            reactButton = this.renderReactButton();
             agreeDimensionReactionButtons = this.renderAgreeDimension();
             likeDimensionReactionButtons = this.renderLikeDimension();
             replyButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
@@ -181,6 +193,7 @@ export default class MessageActionBar extends React.PureComponent {
         }
 
         return <div className="mx_MessageActionBar">
+            {reactButton}
             {agreeDimensionReactionButtons}
             {likeDimensionReactionButtons}
             {replyButton}

src/i18n/strings/en_EN.json

@@ -930,6 +930,7 @@
     "Error decrypting audio": "Error decrypting audio",
     "Agree or Disagree": "Agree or Disagree",
     "Like or Dislike": "Like or Dislike",
+    "React": "React",
     "Reply": "Reply",
     "Edit": "Edit",
     "Options": "Options",