From 88ad780b6b24e5231f72c1600c69befd8ed31bbf Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 1 Feb 2019 16:43:12 +0100
Subject: [PATCH] update message e2e icons

also remove encrypted icon as header/composer already indicate encryption
---
 res/css/views/rooms/_EventTile.scss     | 17 +++++++-
 res/img/feather-icons/e2e/warning.svg   |  6 +++
 src/components/views/rooms/EventTile.js | 52 +++++++------------------
 3 files changed, 36 insertions(+), 39 deletions(-)
 create mode 100644 res/img/feather-icons/e2e/warning.svg

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index c920d6e390..7c9a6babea 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -281,9 +281,24 @@ limitations under the License.
 .mx_EventTile_e2eIcon {
     display: block;
     position: absolute;
-    top: 9px;
+    top: 8px;
     left: 46px;
+    width: 15px;
+    height: 15px;
     cursor: pointer;
+    mask-size: 14px;
+    mask-repeat: no-repeat;
+    mask-position: 0;
+}
+
+.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
+    mask-image: url('$(res)/img/feather-icons/e2e/warning.svg');
+    background-color: $warning-color;
+}
+
+.mx_EventTile_e2eIcon_unencrypted {
+    mask-image: url('$(res)/img/feather-icons/e2e/warning.svg');
+    background-color: $composer-e2e-icon-color;
 }
 
 .mx_EventTile_e2eIcon_hidden {
diff --git a/res/img/feather-icons/e2e/warning.svg b/res/img/feather-icons/e2e/warning.svg
new file mode 100644
index 0000000000..e6c246dba9
--- /dev/null
+++ b/res/img/feather-icons/e2e/warning.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 10zM5 .5A1.5 1.5 0 0 1 6.5 2v3a1.5 1.5 0 0 1-3 0V2A1.5 1.5 0 0 1 5 .5zm0 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 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/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index acb122ad4e..e4a6695ff5 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -459,17 +459,21 @@ module.exports = withMatrixClient(React.createClass({
 
         // event is encrypted, display padlock corresponding to whether or not it is verified
         if (ev.isEncrypted()) {
-            return this.state.verified ? <E2ePadlockVerified {...props} /> : <E2ePadlockUnverified {...props} />;
+            if (this.state.verified) {
+                return; // no icon for verified
+            } else {
+                return (<E2ePadlockUnverified {...props} />);
+            }
         }
 
         if (this.props.matrixClient.isRoomEncrypted(ev.getRoomId())) {
             // else if room is encrypted
             // and event is being encrypted or is not_sent (Unknown Devices/Network Error)
             if (ev.status === EventStatus.ENCRYPTING) {
-                return <E2ePadlockEncrypting {...props} />;
+                return;
             }
             if (ev.status === EventStatus.NOT_SENT) {
-                return <E2ePadlockNotSent {...props} />;
+                return;
             }
             // if the event is not encrypted, but it's an e2e room, show the open padlock
             return <E2ePadlockUnencrypted {...props} />;
@@ -767,57 +771,29 @@ module.exports.haveTileForEvent = function(e) {
 
 function E2ePadlockUndecryptable(props) {
     return (
-        <E2ePadlock alt={_t("Undecryptable")}
-            src={require("../../../../res/img/e2e-blocked.svg")} width="12" height="12"
-            style={{ marginLeft: "-1px" }} {...props} />
-    );
-}
-
-function E2ePadlockEncrypting(props) {
-    return (
-        <E2ePadlock alt={_t("Encrypting")}
-            src={require("../../../../res/img/e2e-encrypting.svg")} width="10" height="12"
-            {...props} />
-    );
-}
-
-function E2ePadlockNotSent(props) {
-    return (
-        <E2ePadlock alt={_t("Encrypted, not sent")}
-            src={require("../../../../res/img/e2e-not_sent.svg")} width="10" height="12"
-            {...props} />
-    );
-}
-
-function E2ePadlockVerified(props) {
-    return (
-        <E2ePadlock alt={_t("Encrypted by a verified device")}
-            src={require("../../../../res/img/e2e-verified.svg")} width="10" height="12"
-            {...props} />
+        <E2ePadlock title={_t("Undecryptable")} icon="undecryptable" />
     );
 }
 
 function E2ePadlockUnverified(props) {
     return (
-        <E2ePadlock alt={_t("Encrypted by an unverified device")}
-            src={require("../../../../res/img/e2e-warning.svg")} width="15" height="12"
-            style={{ marginLeft: "-2px" }} {...props} />
+        <E2ePadlock title={_t("Encrypted by an unverified device")} icon="unverified" />
     );
 }
 
 function E2ePadlockUnencrypted(props) {
     return (
-        <E2ePadlock alt={_t("Unencrypted message")}
-            src={require("../../../../res/img/e2e-unencrypted.svg")} width="12" height="12"
-            {...props} />
+        <E2ePadlock title={_t("Unencrypted message")} icon="unencrypted" />
     );
 }
 
 function E2ePadlock(props) {
     if (SettingsStore.getValue("alwaysShowEncryptionIcons")) {
-        return <img className="mx_EventTile_e2eIcon" {...props} />;
+        return <div
+            className={`mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${props.icon}`}
+            title={props.title} onClick={props.onClick} />;
     } else {
-        return <img className="mx_EventTile_e2eIcon mx_EventTile_e2eIcon_hidden" {...props} />;
+        return <div className="mx_EventTile_e2eIcon mx_EventTile_e2eIcon_hidden" onClick={props.onClick} />;
     }
 }