From f2f813c43c46d1fb7cf0f9214def9863cc4c729a Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 10 Jul 2020 10:20:26 +0200
Subject: [PATCH] make tag panel context menu icons follow text color

---
 .../context_menus/_TagTileContextMenu.scss    | 22 ++++++++++++-------
 .../views/context_menus/TagTileContextMenu.js | 13 ++---------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/res/css/views/context_menus/_TagTileContextMenu.scss b/res/css/views/context_menus/_TagTileContextMenu.scss
index e4ccc030a2..8929c8906e 100644
--- a/res/css/views/context_menus/_TagTileContextMenu.scss
+++ b/res/css/views/context_menus/_TagTileContextMenu.scss
@@ -15,9 +15,8 @@ limitations under the License.
 */
 
 .mx_TagTileContextMenu_item {
-    padding-top: 8px;
+    padding: 8px;
     padding-right: 20px;
-    padding-bottom: 8px;
     cursor: pointer;
     white-space: nowrap;
     display: flex;
@@ -25,15 +24,22 @@ limitations under the License.
     line-height: $font-16px;
 }
 
-.mx_TagTileContextMenu_item object {
-    pointer-events: none;
+.mx_TagTileContextMenu_item::before {
+    content: '';
+    height: 15px;
+    width: 15px;
+    background-color: currentColor;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    margin-right: 8px;
 }
 
+.mx_TagTileContextMenu_viewCommunity::before {
+    mask-image: url('$(res)/img/element-icons/view-community.svg');
+}
 
-.mx_TagTileContextMenu_item_icon {
-    padding-right: 8px;
-    padding-left: 4px;
-    display: inline-block;
+.mx_TagTileContextMenu_hideCommunity::before {
+    mask-image: url('$(res)/img/element-icons/hide.svg');
 }
 
 .mx_TagTileContextMenu_separator {
diff --git a/src/components/views/context_menus/TagTileContextMenu.js b/src/components/views/context_menus/TagTileContextMenu.js
index fc33037390..62df4330c6 100644
--- a/src/components/views/context_menus/TagTileContextMenu.js
+++ b/src/components/views/context_menus/TagTileContextMenu.js
@@ -54,21 +54,12 @@ export default class TagTileContextMenu extends React.Component {
     }
 
     render() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-
         return <div>
-            <MenuItem className="mx_TagTileContextMenu_item" onClick={this._onViewCommunityClick}>
-                <TintableSvg
-                    className="mx_TagTileContextMenu_item_icon"
-                    src={require("../../../../res/img/element-icons/view-community.svg")}
-                    width="15"
-                    height="15"
-                />
+            <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_viewCommunity" onClick={this._onViewCommunityClick}>
                 { _t('View Community') }
             </MenuItem>
             <hr className="mx_TagTileContextMenu_separator" role="separator" />
-            <MenuItem className="mx_TagTileContextMenu_item" onClick={this._onRemoveClick}>
-                <img className="mx_TagTileContextMenu_item_icon" src={require("../../../../res/img/element-icons/hide.svg")} width="15" height="15" alt="" />
+            <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_hideCommunity" onClick={this._onRemoveClick}>
                 { _t('Hide') }
             </MenuItem>
         </div>;