From e4eeafd4852a2669c51ec465c740a4152fc3d0ac Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Sun, 21 Feb 2021 18:02:34 +0100
Subject: [PATCH 01/11] migrate the message context menu to IconizedContextMenu

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 res/css/_components.scss                      |   1 -
 .../context_menus/_MessageContextMenu.scss    |  30 ---
 .../views/context_menus/MessageContextMenu.js | 172 ++++++++++++------
 .../views/messages/MessageActionBar.js        |  17 +-
 4 files changed, 124 insertions(+), 96 deletions(-)
 delete mode 100644 res/css/views/context_menus/_MessageContextMenu.scss

diff --git a/res/css/_components.scss b/res/css/_components.scss
index ec3af8655e..77f13437a2 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -57,7 +57,6 @@
 @import "./views/beta/_BetaCard.scss";
 @import "./views/context_menus/_CallContextMenu.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";
-@import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
deleted file mode 100644
index 2ecb93e734..0000000000
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_MessageContextMenu {
-    padding: 6px;
-}
-
-.mx_MessageContextMenu_field {
-    display: block;
-    padding: 3px 6px 3px 6px;
-    cursor: pointer;
-    white-space: nowrap;
-}
-
-.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
-    font-weight: bold;
-}
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index eef10c995a..f0ee2cb259 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -22,13 +22,13 @@ import { EventStatus } from 'matrix-js-sdk/src/models/event';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
+import {_t} from '../../../languageHandler';
 import Modal from '../../../Modal';
 import Resend from '../../../Resend';
 import SettingsStore from '../../../settings/SettingsStore';
 import { isUrlPermitted } from '../../../HtmlUtils';
 import { isContentActionable } from '../../../utils/EventUtils';
-import { MenuItem } from "../../structures/ContextMenu";
+import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ReadPinsEventId } from "../right_panel/PinnedMessagesCard";
@@ -257,55 +257,62 @@ export default class MessageContextMenu extends React.Component {
         let externalURLButton;
         let quoteButton;
         let collapseReplyThread;
+        const optionLists = [];
 
         // status is SENT before remote-echo, null after
         const isSent = !eventStatus || eventStatus === EventStatus.SENT;
         if (!mxEvent.isRedacted()) {
             if (unsentReactionsCount !== 0) {
                 resendReactionsButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onResendReactionsClick}>
-                        { _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        label={ _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
+                        onClick={this.onResendReactionsClick}
+                    />
                 );
             }
         }
 
         if (isSent && this.state.canRedact) {
             redactButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
-                    { _t('Remove') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    label={_t("Remove")}
+                    onClick={this.onRedactClick}
+                />
             );
         }
 
         if (isContentActionable(mxEvent)) {
             forwardButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
-                    { _t('Forward Message') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    label={_t("Forward Message")}
+                    onClick={this.onForwardClick}
+                />
             );
 
             if (this.state.canPin) {
                 pinButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
-                        { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        label={ this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
+                        onClick={this.onPinClick}
+                    />
                 );
             }
         }
 
         const viewSourceButton = (
-            <MenuItem className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
-                { _t('View Source') }
-            </MenuItem>
+            <IconizedContextMenuOption
+                label={_t("View Source")}
+                onClick={this.onViewSourceClick}
+            />
         );
 
         if (this.props.eventTileOps) {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
-                    <MenuItem className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
-                        { _t('Unhide Preview') }
-                    </MenuItem>
+                    <IconizedContextMenuOption
+                        label={_t("Unhide Preview")}
+                        onClick={this.onUnhidePreviewClick}
+                    />
                 );
             }
         }
@@ -316,77 +323,130 @@ export default class MessageContextMenu extends React.Component {
         }
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         const permalinkButton = (
-            <MenuItem
-                element="a"
-                className="mx_MessageContextMenu_field"
+            <IconizedContextMenuOption
                 onClick={this.onPermalinkClick}
+                label= { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
+                    ? _t('Share Permalink') : _t('Share Message') }
+                element="a"
                 href={permalink}
                 target="_blank"
                 rel="noreferrer noopener"
-            >
-                { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
-                    ? _t('Share Permalink') : _t('Share Message') }
-            </MenuItem>
+            />
         );
 
         if (this.props.eventTileOps) { // this event is rendered using TextualBody
             quoteButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
-                    { _t('Quote') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    label={_t("Quote")}
+                    onClick={this.onQuoteClick}
+                />
             );
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
         if (
-            typeof(mxEvent.event.content.external_url) === "string" &&
+            typeof (mxEvent.event.content.external_url) === "string" &&
             isUrlPermitted(mxEvent.event.content.external_url)
         ) {
             externalURLButton = (
-                <MenuItem
+                <IconizedContextMenuOption
+                    onClick={this.closeMenu}
+                    label={ _t('Source URL') }
                     element="a"
-                    className="mx_MessageContextMenu_field"
                     target="_blank"
                     rel="noreferrer noopener"
-                    onClick={this.closeMenu}
                     href={mxEvent.event.content.external_url}
-                >
-                    { _t('Source URL') }
-                </MenuItem>
+                />
             );
         }
 
         if (this.props.collapseReplyThread) {
             collapseReplyThread = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onCollapseReplyThreadClick}>
-                    { _t('Collapse Reply Thread') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    label={_t("Collapse Reply Thread")}
+                    onClick={this.onCollapseReplyThreadClick}
+                />
             );
         }
 
         let reportEventButton;
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.onReportEventClick}>
-                    { _t('Report Content') }
-                </MenuItem>
+                <IconizedContextMenuOption
+                    label={_t("Report Content")}
+                    onClick={this.onReportEventClick}
+                />
             );
         }
 
+        if (forwardButton || quoteButton || collapseReplyThread) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {quoteButton}
+                    {forwardButton}
+                    {collapseReplyThread}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (resendReactionsButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {resendReactionsButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (externalURLButton || permalinkButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {externalURLButton}
+                    {permalinkButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (pinButton || unhidePreviewButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {pinButton}
+                    {unhidePreviewButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (reportEventButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {reportEventButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (viewSourceButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList>
+                    {viewSourceButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
+        if (redactButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList red>
+                    {redactButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
         return (
-            <div className="mx_MessageContextMenu">
-                { resendReactionsButton }
-                { redactButton }
-                { forwardButton }
-                { pinButton }
-                { viewSourceButton }
-                { unhidePreviewButton }
-                { permalinkButton }
-                { quoteButton }
-                { externalURLButton }
-                { collapseReplyThread }
-                { reportEventButton }
-            </div>
+            <IconizedContextMenu
+                {...this.props}
+                className="mx_MessageContextMenu"
+                compact={true}
+            >
+                {optionLists}
+            </IconizedContextMenu>
         );
     }
 }
diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js
index 37737519ce..3d434e0ee2 100644
--- a/src/components/views/messages/MessageActionBar.js
+++ b/src/components/views/messages/MessageActionBar.js
@@ -48,15 +48,14 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
         const replyThread = getReplyThread && getReplyThread();
 
         const buttonRect = button.current.getBoundingClientRect();
-        contextMenu = <ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu}>
-            <MessageContextMenu
-                mxEvent={mxEvent}
-                permalinkCreator={permalinkCreator}
-                eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
-                collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
-                onFinished={closeMenu}
-            />
-        </ContextMenu>;
+        contextMenu = <MessageContextMenu
+            {...aboveLeftOf(buttonRect)}
+            mxEvent={mxEvent}
+            permalinkCreator={permalinkCreator}
+            eventTileOps={tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined}
+            collapseReplyThread={replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined}
+            onFinished={closeMenu}
+        />;
     }
 
     return <React.Fragment>

From 62efea7e1995e95e54512e48daebb4f472ac0b95 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 23 Feb 2021 18:49:11 +0100
Subject: [PATCH 02/11] add message context menu icons

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 res/css/_components.scss                      |  1 +
 .../context_menus/_MessageContextMenu.scss    | 71 +++++++++++++++++++
 res/img/element-icons/message/chevron-up.svg  |  1 +
 .../element-icons/message/corner-up-right.svg |  1 +
 res/img/element-icons/message/link.svg        |  1 +
 res/img/element-icons/message/repeat.svg      |  1 +
 res/img/element-icons/message/share.svg       |  1 +
 .../views/context_menus/MessageContextMenu.js | 11 +++
 8 files changed, 88 insertions(+)
 create mode 100644 res/css/views/context_menus/_MessageContextMenu.scss
 create mode 100644 res/img/element-icons/message/chevron-up.svg
 create mode 100644 res/img/element-icons/message/corner-up-right.svg
 create mode 100644 res/img/element-icons/message/link.svg
 create mode 100644 res/img/element-icons/message/repeat.svg
 create mode 100644 res/img/element-icons/message/share.svg

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 77f13437a2..ec3af8655e 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -57,6 +57,7 @@
 @import "./views/beta/_BetaCard.scss";
 @import "./views/context_menus/_CallContextMenu.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";
+@import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
new file mode 100644
index 0000000000..d4f5913064
--- /dev/null
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -0,0 +1,71 @@
+.mx_MessageContextMenu {
+
+    .mx_IconizedContextMenu_icon {
+        width: 16px;
+        height: 16px;
+        display: block;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            display: block;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+        }
+    }
+
+    .mx_MessageContextMenu_iconCollapse::before {
+        mask-image: url('$(res)/img/element-icons/message/chevron-up.svg');
+    }
+
+    .mx_MessageContextMenu_iconReport::before {
+        mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
+    }
+
+    .mx_MessageContextMenu_iconLink::before {
+        mask-image: url('$(res)/img/element-icons/message/link.svg');
+    }
+
+    .mx_MessageContextMenu_iconPermalink::before {
+        mask-image: url('$(res)/img/element-icons/message/share.svg');
+    }
+
+    .mx_MessageContextMenu_iconUnhidePreview::before {
+        mask-image: url('$(res)/img/feather-customised/eye.svg');
+    }
+
+    .mx_MessageContextMenu_iconForward::before {
+        mask-image: url('$(res)/img/element-icons/message/corner-up-right.svg');
+    }
+
+    .mx_MessageContextMenu_iconCancel::before {
+        mask-image: url('$(res)/img/cancel.svg');
+    }
+
+    .mx_MessageContextMenu_iconRedact::before {
+        mask-image: url('$(res)/img/feather-customised/trash.custom.svg');
+    }
+
+    .mx_MessageContextMenu_iconResend::before {
+        mask-image: url('$(res)/img/element-icons/message/repeat.svg');
+    }
+
+    .mx_MessageContextMenu_iconSource::before {
+        mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
+    }
+
+    .mx_MessageContextMenu_iconQuote::before {
+        mask-image: url('$(res)/img/format/quote.svg');
+    }
+
+    .mx_MessageContextMenu_iconPin::before {
+        mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
+    }
+
+    .mx_MessageContextMenu_iconUnpin::before {
+        mask-image: url('$(res)/img/element-icons/room/pin.svg');
+    }
+}
diff --git a/res/img/element-icons/message/chevron-up.svg b/res/img/element-icons/message/chevron-up.svg
new file mode 100644
index 0000000000..4eb5ecc33e
--- /dev/null
+++ b/res/img/element-icons/message/chevron-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
\ No newline at end of file
diff --git a/res/img/element-icons/message/corner-up-right.svg b/res/img/element-icons/message/corner-up-right.svg
new file mode 100644
index 0000000000..0b8f961b7b
--- /dev/null
+++ b/res/img/element-icons/message/corner-up-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-right"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>
\ No newline at end of file
diff --git a/res/img/element-icons/message/link.svg b/res/img/element-icons/message/link.svg
new file mode 100644
index 0000000000..c89dd41c23
--- /dev/null
+++ b/res/img/element-icons/message/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
\ No newline at end of file
diff --git a/res/img/element-icons/message/repeat.svg b/res/img/element-icons/message/repeat.svg
new file mode 100644
index 0000000000..c7657b08ed
--- /dev/null
+++ b/res/img/element-icons/message/repeat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
\ No newline at end of file
diff --git a/res/img/element-icons/message/share.svg b/res/img/element-icons/message/share.svg
new file mode 100644
index 0000000000..df38c14d63
--- /dev/null
+++ b/res/img/element-icons/message/share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
\ No newline at end of file
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index f0ee2cb259..c3f634231b 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -265,6 +265,7 @@ export default class MessageContextMenu extends React.Component {
             if (unsentReactionsCount !== 0) {
                 resendReactionsButton = (
                     <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconResend"
                         label={ _t('Resend %(unsentCount)s reaction(s)', {unsentCount: unsentReactionsCount}) }
                         onClick={this.onResendReactionsClick}
                     />
@@ -275,6 +276,7 @@ export default class MessageContextMenu extends React.Component {
         if (isSent && this.state.canRedact) {
             redactButton = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconRedact"
                     label={_t("Remove")}
                     onClick={this.onRedactClick}
                 />
@@ -284,6 +286,7 @@ export default class MessageContextMenu extends React.Component {
         if (isContentActionable(mxEvent)) {
             forwardButton = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconForward"
                     label={_t("Forward Message")}
                     onClick={this.onForwardClick}
                 />
@@ -292,6 +295,7 @@ export default class MessageContextMenu extends React.Component {
             if (this.state.canPin) {
                 pinButton = (
                     <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconPin"
                         label={ this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
                         onClick={this.onPinClick}
                     />
@@ -301,6 +305,7 @@ export default class MessageContextMenu extends React.Component {
 
         const viewSourceButton = (
             <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconSource"
                 label={_t("View Source")}
                 onClick={this.onViewSourceClick}
             />
@@ -310,6 +315,7 @@ export default class MessageContextMenu extends React.Component {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
                     <IconizedContextMenuOption
+                        iconClassName="mx_MessageContextMenu_iconUnhidePreview"
                         label={_t("Unhide Preview")}
                         onClick={this.onUnhidePreviewClick}
                     />
@@ -324,6 +330,7 @@ export default class MessageContextMenu extends React.Component {
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         const permalinkButton = (
             <IconizedContextMenuOption
+                iconClassName="mx_MessageContextMenu_iconPermalink"
                 onClick={this.onPermalinkClick}
                 label= { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
                     ? _t('Share Permalink') : _t('Share Message') }
@@ -337,6 +344,7 @@ export default class MessageContextMenu extends React.Component {
         if (this.props.eventTileOps) { // this event is rendered using TextualBody
             quoteButton = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconQuote"
                     label={_t("Quote")}
                     onClick={this.onQuoteClick}
                 />
@@ -350,6 +358,7 @@ export default class MessageContextMenu extends React.Component {
         ) {
             externalURLButton = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconLink"
                     onClick={this.closeMenu}
                     label={ _t('Source URL') }
                     element="a"
@@ -363,6 +372,7 @@ export default class MessageContextMenu extends React.Component {
         if (this.props.collapseReplyThread) {
             collapseReplyThread = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconCollapse"
                     label={_t("Collapse Reply Thread")}
                     onClick={this.onCollapseReplyThreadClick}
                 />
@@ -373,6 +383,7 @@ export default class MessageContextMenu extends React.Component {
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
                 <IconizedContextMenuOption
+                    iconClassName="mx_MessageContextMenu_iconReport"
                     label={_t("Report Content")}
                     onClick={this.onReportEventClick}
                 />

From 74f61795eb47dce50a1ae4b0a7b20d0d637557a1 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 23 Feb 2021 19:06:01 +0100
Subject: [PATCH 03/11] add _MessageContextMenu.scss license header

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../views/context_menus/_MessageContextMenu.scss | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
index d4f5913064..fdce390b17 100644
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -1,3 +1,19 @@
+/*
+Copyright 2021 Michael Weimann <mail@michael-weimann.eu>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 .mx_MessageContextMenu {
 
     .mx_IconizedContextMenu_icon {

From 8f6904ec1bc51efb678ae8e3609cfb843715a048 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Wed, 24 Feb 2021 18:52:50 +0100
Subject: [PATCH 04/11] tweak the message menu cancel icon size

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 res/css/views/context_menus/_MessageContextMenu.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
index fdce390b17..c22518387a 100644
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -58,7 +58,12 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconCancel::before {
+        height: 12px;
+        left: 2px;
         mask-image: url('$(res)/img/cancel.svg');
+        position: relative;
+        top: 2px;
+        width: 12px;
     }
 
     .mx_MessageContextMenu_iconRedact::before {

From ffca23344ac7e329e89168e74d4ed6998a579d99 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 25 May 2021 12:41:34 +0200
Subject: [PATCH 05/11] tweak context menu order

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../views/context_menus/MessageContextMenu.js | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index c3f634231b..ffb974f7f6 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -392,7 +392,7 @@ export default class MessageContextMenu extends React.Component {
 
         if (forwardButton || quoteButton || collapseReplyThread) {
             optionLists.push((
-                <IconizedContextMenuOptionList>
+                <IconizedContextMenuOptionList key={'group1'}>
                     {quoteButton}
                     {forwardButton}
                     {collapseReplyThread}
@@ -402,7 +402,7 @@ export default class MessageContextMenu extends React.Component {
 
         if (resendReactionsButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList>
+                <IconizedContextMenuOptionList key={'group2'}>
                     {resendReactionsButton}
                 </IconizedContextMenuOptionList>
             ));
@@ -410,25 +410,16 @@ export default class MessageContextMenu extends React.Component {
 
         if (externalURLButton || permalinkButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList>
+                <IconizedContextMenuOptionList key={'group3'}>
                     {externalURLButton}
                     {permalinkButton}
                 </IconizedContextMenuOptionList>
             ));
         }
 
-        if (pinButton || unhidePreviewButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList>
-                    {pinButton}
-                    {unhidePreviewButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
         if (reportEventButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList>
+                <IconizedContextMenuOptionList key={'group4'}>
                     {reportEventButton}
                 </IconizedContextMenuOptionList>
             ));
@@ -436,15 +427,24 @@ export default class MessageContextMenu extends React.Component {
 
         if (viewSourceButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList>
+                <IconizedContextMenuOptionList key={'group5'}>
                     {viewSourceButton}
                 </IconizedContextMenuOptionList>
             ));
         }
 
+        if (pinButton || unhidePreviewButton) {
+            optionLists.push((
+                <IconizedContextMenuOptionList key={'group6'}>
+                    {pinButton}
+                    {unhidePreviewButton}
+                </IconizedContextMenuOptionList>
+            ));
+        }
+
         if (redactButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList red>
+                <IconizedContextMenuOptionList key={'group7'} red>
                     {redactButton}
                 </IconizedContextMenuOptionList>
             ));

From 6ea79b297f5d026f4311dec9fe4c8e6cbbbb16e0 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 25 May 2021 13:36:26 +0200
Subject: [PATCH 06/11] tweak message context icons

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../context_menus/_MessageContextMenu.scss    | 19 +++++--------------
 res/img/element-icons/message/fwd.svg         |  3 +++
 res/img/element-icons/warning-badge.svg       |  7 +++----
 3 files changed, 11 insertions(+), 18 deletions(-)
 create mode 100644 res/img/element-icons/message/fwd.svg

diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
index c22518387a..4900488bb8 100644
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -38,7 +38,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconReport::before {
-        mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
+        mask-image: url('$(res)/img/element-icons/warning-badge.svg');
     }
 
     .mx_MessageContextMenu_iconLink::before {
@@ -46,7 +46,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconPermalink::before {
-        mask-image: url('$(res)/img/element-icons/message/share.svg');
+        mask-image: url('$(res)/img/element-icons/room/share.svg');
     }
 
     .mx_MessageContextMenu_iconUnhidePreview::before {
@@ -54,20 +54,11 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconForward::before {
-        mask-image: url('$(res)/img/element-icons/message/corner-up-right.svg');
-    }
-
-    .mx_MessageContextMenu_iconCancel::before {
-        height: 12px;
-        left: 2px;
-        mask-image: url('$(res)/img/cancel.svg');
-        position: relative;
-        top: 2px;
-        width: 12px;
+        mask-image: url('$(res)/img/element-icons/message/fwd.svg');
     }
 
     .mx_MessageContextMenu_iconRedact::before {
-        mask-image: url('$(res)/img/feather-customised/trash.custom.svg');
+        mask-image: url('$(res)/img/element-icons/trashcan.svg');
     }
 
     .mx_MessageContextMenu_iconResend::before {
@@ -79,7 +70,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconQuote::before {
-        mask-image: url('$(res)/img/format/quote.svg');
+        mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg');
     }
 
     .mx_MessageContextMenu_iconPin::before {
diff --git a/res/img/element-icons/message/fwd.svg b/res/img/element-icons/message/fwd.svg
new file mode 100644
index 0000000000..8bcc70d092
--- /dev/null
+++ b/res/img/element-icons/message/fwd.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9454 4.27941C10.653 3.98601 10.6539 3.51114 10.9472 3.21875C11.2406 2.92637 11.7155 2.92719 12.0079 3.22059L15.5312 6.75612C15.8229 7.0488 15.8229 7.52226 15.5312 7.81494L12.0079 11.3505C11.7155 11.6439 11.2407 11.6447 10.9473 11.3523C10.6539 11.06 10.653 10.5851 10.9454 10.2917L13.2292 8H6.36588C4.95064 8 3.75282 9.20272 3.75282 10.75C3.75282 12.2973 4.95064 13.5 6.36588 13.5H7.93524C8.34945 13.5 8.68524 13.8358 8.68524 14.25C8.68524 14.6642 8.34945 15 7.93524 15H6.36588C4.06634 15 2.25282 13.0687 2.25282 10.75C2.25282 8.43128 4.06634 6.5 6.36588 6.5H13.1583L10.9454 4.27941Z" fill="black"/>
+</svg>
diff --git a/res/img/element-icons/warning-badge.svg b/res/img/element-icons/warning-badge.svg
index 1ae4e40ffe..4e2ff75679 100644
--- a/res/img/element-icons/warning-badge.svg
+++ b/res/img/element-icons/warning-badge.svg
@@ -1,5 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="8" cy="8" r="8" fill="#FF4B55"/>
-    <rect x="7" y="3" width="2" height="6" rx="1" fill="white"/>
-    <rect x="7" y="11" width="2" height="2" rx="1" fill="white"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+    <path style="fill:#ff4b55"
+          d="M8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 3c.554 0 1 .446 1 1v4c0 .554-.446 1-1 1s-1-.446-1-1V4c0-.554.446-1 1-1zm0 8c.554 0 1 .446 1 1s-.446 1-1 1-1-.446-1-1 .446-1 1-1z"/>
 </svg>

From c2d51a115b63769ead82182bd41983ef6a324a24 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 25 May 2021 13:40:51 +0200
Subject: [PATCH 07/11] tweak message context labels

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 src/components/views/context_menus/MessageContextMenu.js | 9 ++++-----
 src/i18n/strings/en_EN.json                              | 4 +---
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index ffb974f7f6..e41f56ff2f 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -287,7 +287,7 @@ export default class MessageContextMenu extends React.Component {
             forwardButton = (
                 <IconizedContextMenuOption
                     iconClassName="mx_MessageContextMenu_iconForward"
-                    label={_t("Forward Message")}
+                    label={_t("Forward")}
                     onClick={this.onForwardClick}
                 />
             );
@@ -296,7 +296,7 @@ export default class MessageContextMenu extends React.Component {
                 pinButton = (
                     <IconizedContextMenuOption
                         iconClassName="mx_MessageContextMenu_iconPin"
-                        label={ this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
+                        label={ this._isPinned() ? _t('Unpin') : _t('Pin') }
                         onClick={this.onPinClick}
                     />
                 );
@@ -332,8 +332,7 @@ export default class MessageContextMenu extends React.Component {
             <IconizedContextMenuOption
                 iconClassName="mx_MessageContextMenu_iconPermalink"
                 onClick={this.onPermalinkClick}
-                label= { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
-                    ? _t('Share Permalink') : _t('Share Message') }
+                label= {_t('Share')}
                 element="a"
                 href={permalink}
                 target="_blank"
@@ -352,7 +351,7 @@ export default class MessageContextMenu extends React.Component {
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
-        if (
+        if (true ||
             typeof (mxEvent.event.content.external_url) === "string" &&
             isUrlPermitted(mxEvent.event.content.external_url)
         ) {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bc62868a0f..faff21c2dd 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2525,12 +2525,10 @@
     "Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",
     "Unable to reject invite": "Unable to reject invite",
     "Resend %(unsentCount)s reaction(s)": "Resend %(unsentCount)s reaction(s)",
-    "Forward Message": "Forward Message",
+    "Forward Message": "Forward",
     "Unpin Message": "Unpin Message",
     "Pin Message": "Pin Message",
     "Unhide Preview": "Unhide Preview",
-    "Share Permalink": "Share Permalink",
-    "Share Message": "Share Message",
     "Source URL": "Source URL",
     "Collapse Reply Thread": "Collapse Reply Thread",
     "Clear status": "Clear status",

From 9a1be63baacd86aaad9f77ca0ee5bea43e7e7980 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 22 Jun 2021 19:51:11 +0200
Subject: [PATCH 08/11] reorder message context menu items

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../views/context_menus/MessageContextMenu.js | 67 +++++--------------
 src/i18n/strings/en_EN.json                   |  2 +-
 2 files changed, 16 insertions(+), 53 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index e41f56ff2f..cd7dd91e4a 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -389,61 +389,24 @@ export default class MessageContextMenu extends React.Component {
             );
         }
 
-        if (forwardButton || quoteButton || collapseReplyThread) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group1'}>
-                    {quoteButton}
-                    {forwardButton}
-                    {collapseReplyThread}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
-        if (resendReactionsButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group2'}>
-                    {resendReactionsButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
-        if (externalURLButton || permalinkButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group3'}>
-                    {externalURLButton}
-                    {permalinkButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
-        if (reportEventButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group4'}>
-                    {reportEventButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
-        if (viewSourceButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group5'}>
-                    {viewSourceButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
-
-        if (pinButton || unhidePreviewButton) {
-            optionLists.push((
-                <IconizedContextMenuOptionList key={'group6'}>
-                    {pinButton}
-                    {unhidePreviewButton}
-                </IconizedContextMenuOptionList>
-            ));
-        }
+        optionLists.push((
+            <IconizedContextMenuOptionList key={'group1'}>
+                {quoteButton}
+                {forwardButton}
+                {pinButton}
+                {permalinkButton}
+                {reportEventButton}
+                {externalURLButton}
+                {viewSourceButton}
+                {unhidePreviewButton}
+                {resendReactionsButton}
+                {collapseReplyThread}
+            </IconizedContextMenuOptionList>
+        ));
 
         if (redactButton) {
             optionLists.push((
-                <IconizedContextMenuOptionList key={'group7'} red>
+                <IconizedContextMenuOptionList key={'group2'} red>
                     {redactButton}
                 </IconizedContextMenuOptionList>
             ));
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index faff21c2dd..f95caeff71 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2252,7 +2252,7 @@
     "Sending": "Sending",
     "Sent": "Sent",
     "Open link": "Open link",
-    "Forward message": "Forward message",
+    "Forward": "Forward",
     "Message preview": "Message preview",
     "Search for rooms or people": "Search for rooms or people",
     "Confirm abort of host creation": "Confirm abort of host creation",

From 086042f078754d30ac047c389fb169868f663de8 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 22 Jun 2021 20:11:12 +0200
Subject: [PATCH 09/11] update message context texts and icons

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../context_menus/_MessageContextMenu.scss    |  7 ++--
 res/img/element-icons/warning-badge.svg       | 34 ++++++++++++++--
 .../views/context_menus/MessageContextMenu.js | 39 +++++++++----------
 src/i18n/strings/en_EN.json                   | 12 +++---
 4 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.scss
index 4900488bb8..338841cce4 100644
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@@ -1,4 +1,5 @@
 /*
+Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2021 Michael Weimann <mail@michael-weimann.eu>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -42,7 +43,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconLink::before {
-        mask-image: url('$(res)/img/element-icons/message/link.svg');
+        mask-image: url('$(res)/img/element-icons/link.svg');
     }
 
     .mx_MessageContextMenu_iconPermalink::before {
@@ -50,7 +51,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconUnhidePreview::before {
-        mask-image: url('$(res)/img/feather-customised/eye.svg');
+        mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
     }
 
     .mx_MessageContextMenu_iconForward::before {
@@ -62,7 +63,7 @@ limitations under the License.
     }
 
     .mx_MessageContextMenu_iconResend::before {
-        mask-image: url('$(res)/img/element-icons/message/repeat.svg');
+        mask-image: url('$(res)/img/element-icons/retry.svg');
     }
 
     .mx_MessageContextMenu_iconSource::before {
diff --git a/res/img/element-icons/warning-badge.svg b/res/img/element-icons/warning-badge.svg
index 4e2ff75679..1c8da9aa8e 100644
--- a/res/img/element-icons/warning-badge.svg
+++ b/res/img/element-icons/warning-badge.svg
@@ -1,4 +1,32 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
-    <path style="fill:#ff4b55"
-          d="M8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 3c.554 0 1 .446 1 1v4c0 .554-.446 1-1 1s-1-.446-1-1V4c0-.554.446-1 1-1zm0 8c.554 0 1 .446 1 1s-.446 1-1 1-1-.446-1-1 .446-1 1-1z"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg8"
+   version="1.1"
+   fill="none"
+   viewBox="0 0 24 24"
+   height="24"
+   width="24">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <path
+     id="path2"
+     d="M 12 2 C 6.47715 2 2 6.47715 2 12 C 2 17.5228 6.47715 22 12 22 C 17.5228 22 22 17.5228 22 12 C 22 6.47715 17.5228 2 12 2 z M 11.880859 5.5039062 C 12.720859 5.4439063 13.470547 6.0746875 13.560547 6.9296875 L 13.560547 7.1699219 L 13.080078 13.169922 C 13.035078 13.724922 12.570625 14.144531 12.015625 14.144531 L 11.925781 14.144531 C 11.400781 14.099531 10.996172 13.694922 10.951172 13.169922 L 10.470703 7.1699219 C 10.395703 6.3149219 11.025859 5.5639064 11.880859 5.5039062 z M 12 15.763672 C 12.729 15.763672 13.320312 16.354884 13.320312 17.083984 C 13.320313 17.812984 12.729 18.404297 12 18.404297 C 11.271 18.404297 10.679688 17.812984 10.679688 17.083984 C 10.679688 16.354884 11.271 15.763672 12 15.763672 z "
+     style="fill:#ff4b55;fill-opacity:1" />
 </svg>
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index cd7dd91e4a..b61d8b50f0 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -22,13 +22,13 @@ import { EventStatus } from 'matrix-js-sdk/src/models/event';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
-import {_t} from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import Resend from '../../../Resend';
 import SettingsStore from '../../../settings/SettingsStore';
 import { isUrlPermitted } from '../../../HtmlUtils';
 import { isContentActionable } from '../../../utils/EventUtils';
-import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
+import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from './IconizedContextMenu';
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ReadPinsEventId } from "../right_panel/PinnedMessagesCard";
@@ -306,7 +306,7 @@ export default class MessageContextMenu extends React.Component {
         const viewSourceButton = (
             <IconizedContextMenuOption
                 iconClassName="mx_MessageContextMenu_iconSource"
-                label={_t("View Source")}
+                label={_t("View source")}
                 onClick={this.onViewSourceClick}
             />
         );
@@ -316,7 +316,7 @@ export default class MessageContextMenu extends React.Component {
                 unhidePreviewButton = (
                     <IconizedContextMenuOption
                         iconClassName="mx_MessageContextMenu_iconUnhidePreview"
-                        label={_t("Unhide Preview")}
+                        label={_t("Show preview")}
                         onClick={this.onUnhidePreviewClick}
                     />
                 );
@@ -351,8 +351,7 @@ export default class MessageContextMenu extends React.Component {
         }
 
         // Bridges can provide a 'external_url' to link back to the source.
-        if (true ||
-            typeof (mxEvent.event.content.external_url) === "string" &&
+        if (typeof (mxEvent.event.content.external_url) === "string" &&
             isUrlPermitted(mxEvent.event.content.external_url)
         ) {
             externalURLButton = (
@@ -372,7 +371,7 @@ export default class MessageContextMenu extends React.Component {
             collapseReplyThread = (
                 <IconizedContextMenuOption
                     iconClassName="mx_MessageContextMenu_iconCollapse"
-                    label={_t("Collapse Reply Thread")}
+                    label={_t("Collapse reply thread")}
                     onClick={this.onCollapseReplyThreadClick}
                 />
             );
@@ -383,7 +382,7 @@ export default class MessageContextMenu extends React.Component {
             reportEventButton = (
                 <IconizedContextMenuOption
                     iconClassName="mx_MessageContextMenu_iconReport"
-                    label={_t("Report Content")}
+                    label={_t("Report")}
                     onClick={this.onReportEventClick}
                 />
             );
@@ -391,23 +390,23 @@ export default class MessageContextMenu extends React.Component {
 
         optionLists.push((
             <IconizedContextMenuOptionList key={'group1'}>
-                {quoteButton}
-                {forwardButton}
-                {pinButton}
-                {permalinkButton}
-                {reportEventButton}
-                {externalURLButton}
-                {viewSourceButton}
-                {unhidePreviewButton}
-                {resendReactionsButton}
-                {collapseReplyThread}
+                { quoteButton }
+                { forwardButton }
+                { pinButton }
+                { permalinkButton }
+                { reportEventButton }
+                { externalURLButton }
+                { unhidePreviewButton }
+                { viewSourceButton }
+                { resendReactionsButton }
+                { collapseReplyThread }
             </IconizedContextMenuOptionList>
         ));
 
         if (redactButton) {
             optionLists.push((
                 <IconizedContextMenuOptionList key={'group2'} red>
-                    {redactButton}
+                    { redactButton }
                 </IconizedContextMenuOptionList>
             ));
         }
@@ -418,7 +417,7 @@ export default class MessageContextMenu extends React.Component {
                 className="mx_MessageContextMenu"
                 compact={true}
             >
-                {optionLists}
+                { optionLists }
             </IconizedContextMenu>
         );
     }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f95caeff71..7e1237f1cf 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2252,7 +2252,7 @@
     "Sending": "Sending",
     "Sent": "Sent",
     "Open link": "Open link",
-    "Forward": "Forward",
+    "Forward message": "Forward message",
     "Message preview": "Message preview",
     "Search for rooms or people": "Search for rooms or people",
     "Confirm abort of host creation": "Confirm abort of host creation",
@@ -2525,12 +2525,12 @@
     "Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",
     "Unable to reject invite": "Unable to reject invite",
     "Resend %(unsentCount)s reaction(s)": "Resend %(unsentCount)s reaction(s)",
-    "Forward Message": "Forward",
-    "Unpin Message": "Unpin Message",
-    "Pin Message": "Pin Message",
-    "Unhide Preview": "Unhide Preview",
+    "Forward": "Forward",
+    "View source": "View source",
+    "Show preview": "Show preview",
     "Source URL": "Source URL",
-    "Collapse Reply Thread": "Collapse Reply Thread",
+    "Collapse reply thread": "Collapse reply thread",
+    "Report": "Report",
     "Clear status": "Clear status",
     "Update status": "Update status",
     "Set status": "Set status",

From e685f1239d6bdc588d7d244119d9a9361a756111 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Thu, 24 Jun 2021 22:06:12 +0200
Subject: [PATCH 10/11] use null vars for context menu lists

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 .../views/context_menus/MessageContextMenu.js       | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index b61d8b50f0..1d871b484d 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -257,7 +257,7 @@ export default class MessageContextMenu extends React.Component {
         let externalURLButton;
         let quoteButton;
         let collapseReplyThread;
-        const optionLists = [];
+        let redactItemList;
 
         // status is SENT before remote-echo, null after
         const isSent = !eventStatus || eventStatus === EventStatus.SENT;
@@ -388,7 +388,7 @@ export default class MessageContextMenu extends React.Component {
             );
         }
 
-        optionLists.push((
+        const commonItemsList = (
             <IconizedContextMenuOptionList key={'group1'}>
                 { quoteButton }
                 { forwardButton }
@@ -401,14 +401,14 @@ export default class MessageContextMenu extends React.Component {
                 { resendReactionsButton }
                 { collapseReplyThread }
             </IconizedContextMenuOptionList>
-        ));
+        );
 
         if (redactButton) {
-            optionLists.push((
+            redactItemList = (
                 <IconizedContextMenuOptionList key={'group2'} red>
                     { redactButton }
                 </IconizedContextMenuOptionList>
-            ));
+            );
         }
 
         return (
@@ -417,7 +417,8 @@ export default class MessageContextMenu extends React.Component {
                 className="mx_MessageContextMenu"
                 compact={true}
             >
-                { optionLists }
+                { commonItemsList }
+                { redactItemList }
             </IconizedContextMenu>
         );
     }

From d3bc7fe80633ad6b76db415e8a8e4ef85316d9ec Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Sat, 26 Jun 2021 09:51:40 +0200
Subject: [PATCH 11/11] remove list keys

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 src/components/views/context_menus/MessageContextMenu.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index 1d871b484d..5d1aad0600 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -389,7 +389,7 @@ export default class MessageContextMenu extends React.Component {
         }
 
         const commonItemsList = (
-            <IconizedContextMenuOptionList key={'group1'}>
+            <IconizedContextMenuOptionList>
                 { quoteButton }
                 { forwardButton }
                 { pinButton }
@@ -405,7 +405,7 @@ export default class MessageContextMenu extends React.Component {
 
         if (redactButton) {
             redactItemList = (
-                <IconizedContextMenuOptionList key={'group2'} red>
+                <IconizedContextMenuOptionList red>
                     { redactButton }
                 </IconizedContextMenuOptionList>
             );