From db10fcd2b7e936c892f8c24d7fa37edc22d68b6f Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 16 Mar 2020 17:29:35 +0100
Subject: [PATCH] make editable list look like something closer to design

---
 res/css/views/elements/_EditableItemList.scss    | 16 +++++++++++++++-
 .../views/elements/EditableItemList.js           |  3 +--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/res/css/views/elements/_EditableItemList.scss b/res/css/views/elements/_EditableItemList.scss
index 51fa4c4423..ef60f006cc 100644
--- a/res/css/views/elements/_EditableItemList.scss
+++ b/res/css/views/elements/_EditableItemList.scss
@@ -20,14 +20,21 @@ limitations under the License.
 }
 
 .mx_EditableItem {
+    display: flex;
     margin-bottom: 5px;
-    margin-left: 15px;
 }
 
 .mx_EditableItem_delete {
+    order: 3;
     margin-right: 5px;
     cursor: pointer;
     vertical-align: middle;
+    width: 14px;
+    height: 14px;
+    mask-image: url('$(res)/img/feather-customised/cancel.svg');
+    mask-repeat: no-repeat;
+    background-color: $warning-color;
+    mask-size: 100%;
 }
 
 .mx_EditableItem_email {
@@ -36,12 +43,19 @@ limitations under the License.
 
 .mx_EditableItem_promptText {
     margin-right: 10px;
+    order: 2;
 }
 
 .mx_EditableItem_confirmBtn {
     margin-right: 5px;
 }
 
+.mx_EditableItem_item {
+    flex: auto 1 0;
+    order: 1;
+}
+
 .mx_EditableItemList_label {
     margin-bottom: 5px;
 }
+
diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.js
index ae3473ef0d..6e649e777a 100644
--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.js
@@ -78,8 +78,7 @@ export class EditableItem extends React.Component {
 
         return (
             <div className="mx_EditableItem">
-                <img src={require("../../../../res/img/feather-customised/cancel.svg")} width={14} height={14}
-                     onClick={this._onRemove} className="mx_EditableItem_delete" alt={_t("Remove")} />
+                <div onClick={this._onRemove} className="mx_EditableItem_delete" title={_t("Remove")} role="button" />
                 <span className="mx_EditableItem_item">{this.props.value}</span>
             </div>
         );