From ce5e56aaace7a0c669749ce28fda68a9f78298e1 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 1 Feb 2019 17:32:46 +0100
Subject: [PATCH] update icons in member info device section

---
 res/css/views/rooms/_MemberDeviceInfo.scss    | 19 +++++++++++
 res/img/feather-icons/e2e/blacklisted.svg     |  6 ++++
 res/img/feather-icons/e2e/verified.svg        |  3 ++
 .../views/rooms/MemberDeviceInfo.js           | 32 ++++++-------------
 4 files changed, 37 insertions(+), 23 deletions(-)
 create mode 100644 res/img/feather-icons/e2e/blacklisted.svg
 create mode 100644 res/img/feather-icons/e2e/verified.svg

diff --git a/res/css/views/rooms/_MemberDeviceInfo.scss b/res/css/views/rooms/_MemberDeviceInfo.scss
index 6ccc4c7ae3..f780c50410 100644
--- a/res/css/views/rooms/_MemberDeviceInfo.scss
+++ b/res/css/views/rooms/_MemberDeviceInfo.scss
@@ -20,6 +20,25 @@ limitations under the License.
     align-items: start;
 }
 
+.mx_MemberDeviceInfo_icon {
+    margin-top: 4px;
+    width: 12px;
+    height: 12px;
+    mask-repeat: no-repeat;
+}
+.mx_MemberDeviceInfo_icon_blacklisted {
+    mask-image: url('$(res)/img/feather-icons/e2e/blacklisted.svg');
+    background-color: $warning-color;
+}
+.mx_MemberDeviceInfo_icon_verified {
+    mask-image: url('$(res)/img/feather-icons/e2e/verified.svg');
+    background-color: $accent-color;
+}
+.mx_MemberDeviceInfo_icon_unverified {
+    mask-image: url('$(res)/img/feather-icons/e2e/warning.svg');
+    background-color: $warning-color;
+}
+
 .mx_MemberDeviceInfo > .mx_DeviceVerifyButtons {
     display: flex;
     flex-direction: column;
diff --git a/res/img/feather-icons/e2e/blacklisted.svg b/res/img/feather-icons/e2e/blacklisted.svg
new file mode 100644
index 0000000000..63897c2227
--- /dev/null
+++ b/res/img/feather-icons/e2e/blacklisted.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
+    <defs>
+        <path id="a" d="M5 10A5 5 0 1 0 5 0a5 5 0 0 0 0 10zM2.5 3.5h5a1.5 1.5 0 0 1 0 3h-5a1.5 1.5 0 0 1 0-3z"/>
+    </defs>
+    <use fill="#F56679" fill-rule="evenodd" stroke="#F56679" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" transform="translate(1 1)" xlink:href="#a"/>
+</svg>
diff --git a/res/img/feather-icons/e2e/verified.svg b/res/img/feather-icons/e2e/verified.svg
new file mode 100644
index 0000000000..f143f854e6
--- /dev/null
+++ b/res/img/feather-icons/e2e/verified.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="12" viewBox="0 0 11 12">
+    <path fill="#7AC9A1" fill-rule="evenodd" stroke="#7AC9A1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M5.5 11S10 9 10 6V2.5L5.5 1 1 2.5V6c0 3 4.5 5 4.5 5z"/>
+</svg>
diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js
index b9c276f0d1..67f99e4d1d 100644
--- a/src/components/views/rooms/MemberDeviceInfo.js
+++ b/src/components/views/rooms/MemberDeviceInfo.js
@@ -18,32 +18,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import classNames from 'classnames';
 
 export default class MemberDeviceInfo extends React.Component {
     render() {
-        let indicator = null;
         const DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons');
-
-        if (this.props.device.isBlocked()) {
-            indicator = (
-                    <div className="mx_MemberDeviceInfo_blacklisted">
-                    <img src={require("../../../../res/img/e2e-blocked.svg")} width="12" height="12" style={{ marginLeft: "-1px" }} alt={_t("Blacklisted")} />
-                    </div>
-            );
-        } else if (this.props.device.isVerified()) {
-            indicator = (
-                    <div className="mx_MemberDeviceInfo_verified">
-                    <img src={require("../../../../res/img/e2e-verified.svg")} width="10" height="12" alt={_t("Verified")} />
-                    </div>
-            );
-        } else {
-            indicator = (
-                    <div className="mx_MemberDeviceInfo_unverified">
-                    <img src={require("../../../../res/img/e2e-warning.svg")} width="15" height="12" style={{ marginLeft: "-2px" }} alt={_t("Unverified")} />
-                    </div>
-            );
-        }
-
+        const iconClasses = classNames({
+            mx_MemberDeviceInfo_icon: true,
+            mx_MemberDeviceInfo_icon_blacklisted: this.props.device.isBlocked(),
+            mx_MemberDeviceInfo_icon_verified: this.props.device.isVerified(),
+            mx_MemberDeviceInfo_icon_unverified: this.props.device.isUnverified(),
+        });
+        const indicator = (<div className={iconClasses} />);
         const deviceName = this.props.device.ambiguous ?
             (this.props.device.getDisplayName() ? this.props.device.getDisplayName() : "") + " (" + this.props.device.deviceId + ")" :
             this.props.device.getDisplayName();
@@ -52,10 +38,10 @@ export default class MemberDeviceInfo extends React.Component {
         return (
             <div className="mx_MemberDeviceInfo"
                     title={_t("device id: ") + this.props.device.deviceId} >
+                { indicator }
                 <div className="mx_MemberDeviceInfo_deviceInfo">
                     <div className="mx_MemberDeviceInfo_deviceId">
                         { deviceName }
-                        { indicator }
                     </div>
                 </div>
                 <DeviceVerifyButtons userId={this.props.userId} device={this.props.device} />