From 5c7e59b13200ab9dd652fca2f2e323d2dc982742 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 23 Jun 2020 21:17:39 -0600
Subject: [PATCH] Use theme-capable icons in the user menu

They're still inconsistent weights, but at least they are the right color on non-light-theme clients.
---
 res/css/structures/_UserMenuButton.scss      | 66 +++++++++++++++++++-
 src/components/structures/UserMenuButton.tsx | 16 ++---
 2 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/res/css/structures/_UserMenuButton.scss b/res/css/structures/_UserMenuButton.scss
index 1fbbbb5fd8..768d643add 100644
--- a/res/css/structures/_UserMenuButton.scss
+++ b/res/css/structures/_UserMenuButton.scss
@@ -15,7 +15,26 @@ limitations under the License.
 */
 
 .mx_UserMenuButton {
-    // No special styles on the button itself
+    > span {
+        width: 16px;
+        height: 16px;
+        position: relative;
+        display: block;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+            mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
+        }
+    }
 }
 
 .mx_UserMenuButton_contextMenu {
@@ -79,4 +98,49 @@ limitations under the License.
             justify-content: center;
         }
     }
+
+    .mx_IconizedContextMenu_icon {
+        position: relative;
+        width: 16px;
+        height: 16px;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+        }
+    }
+
+    .mx_UserMenuButton_iconHome::before {
+        mask-image: url('$(res)/img/feather-customised/home.svg');
+    }
+
+    .mx_UserMenuButton_iconBell::before {
+        mask-image: url('$(res)/img/feather-customised/notifications.svg');
+    }
+
+    .mx_UserMenuButton_iconLock::before {
+        mask-image: url('$(res)/img/feather-customised/lock.svg');
+    }
+
+    .mx_UserMenuButton_iconSettings::before {
+        mask-image: url('$(res)/img/feather-customised/settings.svg');
+    }
+
+    .mx_UserMenuButton_iconArchive::before {
+        mask-image: url('$(res)/img/feather-customised/archive.svg');
+    }
+
+    .mx_UserMenuButton_iconMessage::before {
+        mask-image: url('$(res)/img/feather-customised/message-circle.svg');
+    }
+
+    .mx_UserMenuButton_iconSignOut::before {
+        mask-image: url('$(res)/img/feather-customised/sign-out.svg');
+    }
 }
diff --git a/src/components/structures/UserMenuButton.tsx b/src/components/structures/UserMenuButton.tsx
index 04b1b03368..f193a84648 100644
--- a/src/components/structures/UserMenuButton.tsx
+++ b/src/components/structures/UserMenuButton.tsx
@@ -190,7 +190,7 @@ export default class UserMenuButton extends React.Component<IProps, IState> {
                 homeButton = (
                     <li>
                         <AccessibleButton onClick={this.onHomeClick}>
-                            <img src={require("../../../res/img/feather-customised/home.svg")} width={16} />
+                            <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconHome" />
                             <span>{_t("Home")}</span>
                         </AccessibleButton>
                     </li>
@@ -233,31 +233,31 @@ export default class UserMenuButton extends React.Component<IProps, IState> {
                                 {homeButton}
                                 <li>
                                     <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}>
-                                        <img src={require("../../../res/img/feather-customised/notifications.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconBell" />
                                         <span>{_t("Notification settings")}</span>
                                     </AccessibleButton>
                                 </li>
                                 <li>
                                     <AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}>
-                                        <img src={require("../../../res/img/feather-customised/lock.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconLock" />
                                         <span>{_t("Security & privacy")}</span>
                                     </AccessibleButton>
                                 </li>
                                 <li>
                                     <AccessibleButton onClick={(e) => this.onSettingsOpen(e, null)}>
-                                        <img src={require("../../../res/img/feather-customised/settings.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconSettings" />
                                         <span>{_t("All settings")}</span>
                                     </AccessibleButton>
                                 </li>
                                 <li>
                                     <AccessibleButton onClick={this.onShowArchived}>
-                                        <img src={require("../../../res/img/feather-customised/archive.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconArchive" />
                                         <span>{_t("Archived rooms")}</span>
                                     </AccessibleButton>
                                 </li>
                                 <li>
                                     <AccessibleButton onClick={this.onProvideFeedback}>
-                                        <img src={require("../../../res/img/feather-customised/message-circle.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconMessage" />
                                         <span>{_t("Feedback")}</span>
                                     </AccessibleButton>
                                 </li>
@@ -267,7 +267,7 @@ export default class UserMenuButton extends React.Component<IProps, IState> {
                             <ul>
                                 <li>
                                     <AccessibleButton onClick={this.onSignOutClick}>
-                                        <img src={require("../../../res/img/feather-customised/sign-out.svg")} width={16} />
+                                        <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconSignOut" />
                                         <span>{_t("Sign out")}</span>
                                     </AccessibleButton>
                                 </li>
@@ -287,7 +287,7 @@ export default class UserMenuButton extends React.Component<IProps, IState> {
                     label={_t("Account settings")}
                     isExpanded={this.state.menuDisplayed}
                 >
-                    <img src={require("../../../res/img/feather-customised/more-horizontal.svg")} alt="..." width={14} />
+                    <span>{/* masked image in CSS */}</span>
                 </ContextMenuButton>
                 {contextMenu}
             </React.Fragment>