From 6ffc5e093dafb44915378036f81a69adebc0a1bf Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 29 Jan 2019 16:56:07 +0100
Subject: [PATCH] add icons to top left menu options

---
 res/css/structures/_ContextualMenu.scss       |  4 ---
 res/css/views/context_menus/_TopLeftMenu.scss | 25 ++++++++++++++++++-
 res/img/feather-icons/sign-out.svg            |  5 ++++
 .../views/context_menus/TopLeftMenu.js        |  4 +--
 4 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 res/img/feather-icons/sign-out.svg

diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.scss
index a01cd896a8..001c405e15 100644
--- a/res/css/structures/_ContextualMenu.scss
+++ b/res/css/structures/_ContextualMenu.scss
@@ -43,10 +43,6 @@ limitations under the License.
     right: 8px;
 }
 
-.mx_ContextualMenu_noChevron {
-    border-radius: unset !important;
-}
-
 .mx_ContextualMenu_chevron_right {
     position: absolute;
     right: -8px;
diff --git a/res/css/views/context_menus/_TopLeftMenu.scss b/res/css/views/context_menus/_TopLeftMenu.scss
index fb2c972fe3..18463da824 100644
--- a/res/css/views/context_menus/_TopLeftMenu.scss
+++ b/res/css/views/context_menus/_TopLeftMenu.scss
@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_TopLeftMenu {
     min-width: 180px;
+    border-radius: 4px;
 
     .mx_TopLeftMenu_section:not(:last-child) {
         border-bottom: 1px solid $menu-border-color;
@@ -26,10 +27,32 @@ limitations under the License.
         margin: 5px 0;
         padding: 0;
 
+        li.mx_TopLeftMenu_icon_settings::after {
+            mask-image: url('$(res)/img/feather-icons/settings.svg');
+        }
+
+        li.mx_TopLeftMenu_icon_signout::after {
+            mask-image: url('$(res)/img/feather-icons/sign-out.svg');
+        }
+
+        li::after {
+            mask-repeat: no-repeat;
+            mask-position: 0 center;
+            mask-size: 16px;
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            content: "";
+            top: 5px;
+            left: 14px;
+            background-color: $primary-fg-color;
+        }
+
         li {
+            position: relative;
             cursor: pointer;
             white-space: nowrap;
-            padding: 5px 20px;
+            padding: 5px 20px 5px 43px;
         }
 
         li:hover {
diff --git a/res/img/feather-icons/sign-out.svg b/res/img/feather-icons/sign-out.svg
new file mode 100644
index 0000000000..06ab9903ec
--- /dev/null
+++ b/res/img/feather-icons/sign-out.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
+        <path d="M5.667 15H2.556C1.696 15 1 14.304 1 13.444V2.556C1 1.696 1.696 1 2.556 1h3.11M11.111 11.889L15 8l-3.889-3.889M15 8H5.667"/>
+    </g>
+</svg>
diff --git a/src/components/views/context_menus/TopLeftMenu.js b/src/components/views/context_menus/TopLeftMenu.js
index b8e82a92e4..87b277215b 100644
--- a/src/components/views/context_menus/TopLeftMenu.js
+++ b/src/components/views/context_menus/TopLeftMenu.js
@@ -30,10 +30,10 @@ export class TopLeftMenu extends React.Component {
     render() {
         return <div className="mx_TopLeftMenu">
             <ul className="mx_TopLeftMenu_section">
-                <li onClick={this.openSettings}>{_t("Settings")}</li>
+                <li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>{_t("Settings")}</li>
             </ul>
             <ul className="mx_TopLeftMenu_section">
-                <li onClick={this.signOut}>{_t("Sign out")}</li>
+                <li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>{_t("Sign out")}</li>
             </ul>
         </div>;
     }