change not_sent e2e lock to match colour of text

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/img/e2e-not_sent.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+<title>48BF5D32-306C-4B20-88EB-24B1F743CAC9</title>
+<desc>Created with sketchtool.</desc>
+<defs></defs>
+<g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="typing-indicator" transform="translate(-301.000000, -172.000000)" fill="#f44">
+        <path d="M309.666667,175.666667 C309.666667,173.633333 308.033333,172 306,172 C303.966667,172 302.333333,173.633333 302.333333,175.666667 L302.333333,176.666667 L301,176.666667 L301,184 L306,184 L311,184 L311,176.666667 L309.666667,176.666667 L309.666667,175.666667 Z M306,176.666667 L303.666667,176.666667 L303.666667,175.666667 C303.666667,174.366667 304.7,173.333333 306,173.333333 C307.3,173.333333 308.333333,174.366667 308.333333,175.666667 L308.333333,176.666667 L306,176.666667 L306,176.666667 Z" id="verified_icon"></path>
+    </g>
+</g>
+</svg>

src/components/views/rooms/EventTile.js

@@ -443,25 +443,27 @@ module.exports = withMatrixClient(React.createClass({
         const ev = this.props.mxEvent;
         const props = {onClick: this.onCryptoClicked};
 
+        // event could not be decrypted
         if (ev.getContent().msgtype === 'm.bad.encrypted') {
             return <E2ePadlockUndecryptable {...props} />;
-        } else if (ev.isEncrypted()) {
-            if (this.state.verified) {
-                return <E2ePadlockVerified {...props} />;
-            } else {
-                return <E2ePadlockUnverified {...props} />;
-            }
-        } else if (this.props.matrixClient.isRoomEncrypted(ev.getRoomId())) {
+        }
+
+        // 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.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 || ev.status === EventStatus.NOT_SENT) {
-                // XXX: if the event is being encrypted (ie eventSendStatus === encrypting),
-                // it might be nice to show something other than the open padlock?
-                return <E2ePadlockPending {...props} />;
-            } else {
-                // if the event is not encrypted, but it's an e2e room, show the open padlock
-                return <E2ePadlockUnencrypted {...props} />;
+            if (ev.status === EventStatus.ENCRYPTING) {
+                return <E2ePadlockEncrypting {...props} />;
             }
+            if (ev.status === EventStatus.NOT_SENT) {
+                return <E2ePadlockNotSent {...props} />;
+            }
+            // if the event is not encrypted, but it's an e2e room, show the open padlock
+            return <E2ePadlockUnencrypted {...props} />;
         }
 
         // no padlock needed
@@ -736,8 +738,12 @@ function E2ePadlockUndecryptable(props) {
     );
 }
 
-function E2ePadlockPending(props) {
-    return <E2ePadlock alt={_t('Encrypting')} src="img/e2e-pending.svg" width="10" height="12" {...props} />;
+function E2ePadlockEncrypting(props) {
+    return <E2ePadlock alt={_t("Encrypting")} src="img/e2e-encrypting.svg" width="10" height="12" {...props} />;
+}
+
+function E2ePadlockNotSent(props) {
+    return <E2ePadlock alt={_t("Encrypted, not sent")} src="img/e2e-not_sent.svg" width="10" height="12" {...props} />;
 }
 
 function E2ePadlockVerified(props) {