Match e2e icons on events to expectations

Fixes https://github.com/vector-im/riot-web/issues/11547

Steps taken:
* Convert `E2ePadlock` to a class-style component so the hover state can be tracked (tooltips).
* Convert the image mask to a background image to keep the `!` in the shield.
* Update copy.

res/css/views/rooms/_EventTile.scss

@@ -347,27 +347,28 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 }
 
 .mx_EventTile_e2eIcon {
-    display: block;
     position: absolute;
-    top: 8px;
+    top: 6px;
     left: 46px;
     width: 15px;
     height: 15px;
     cursor: pointer;
-    mask-size: 14px;
-    mask-repeat: no-repeat;
-    mask-position: 0;
+    display: block;
+    bottom: 0;
+    right: 0;
     opacity: 0.2;
+    background-repeat: no-repeat;
+    background-size: contain;
 }
 
 .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
-    mask-image: url('$(res)/img/e2e/warning.svg');
-    background-color: $warning-color;
+    background-image: url('$(res)/img/e2e/warning.svg');
+    opacity: 1;
 }
 
 .mx_EventTile_e2eIcon_unencrypted {
-    mask-image: url('$(res)/img/e2e/warning.svg');
-    background-color: $composer-e2e-icon-color;
+    background-image: url('$(res)/img/e2e/warning.svg');
+    opacity: 1;
 }
 
 .mx_EventTile_e2eIcon_hidden {

src/components/views/rooms/EventTile.js

@@ -494,6 +494,9 @@ module.exports = createReactClass({
             if (ev.status === EventStatus.NOT_SENT) {
                 return;
             }
+            if (ev.isState()) {
+                return; // we expect this to be unencrypted
+            }
             // if the event is not encrypted, but it's an e2e room, show the open padlock
             return <E2ePadlockUnencrypted {...props} />;
         }
@@ -887,7 +890,7 @@ module.exports.haveTileForEvent = function(e) {
 
 function E2ePadlockUndecryptable(props) {
     return (
-        <E2ePadlock title={_t("Undecryptable")} icon="undecryptable" {...props} />
+        <E2ePadlock title={_t("This message cannot be decrypted")} icon="undecryptable" {...props} />
     );
 }
 
@@ -899,19 +902,62 @@ function E2ePadlockUnverified(props) {
 
 function E2ePadlockUnencrypted(props) {
     return (
-        <E2ePadlock title={_t("Unencrypted message")} icon="unencrypted" {...props} />
+        <E2ePadlock title={_t("Unencrypted")} icon="unencrypted" {...props} />
     );
 }
 
-function E2ePadlock(props) {
-    if (SettingsStore.getValue("alwaysShowEncryptionIcons")) {
-        return (<div
-                    className={`mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${props.icon}`}
-                    title={props.title} onClick={props.onClick} />);
-    } else {
-        return (<div
-                    className={`mx_EventTile_e2eIcon mx_EventTile_e2eIcon_hidden mx_EventTile_e2eIcon_${props.icon}`}
-                    onClick={props.onClick} />);
+class E2ePadlock extends React.Component {
+    static propTypes = {
+        icon: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
+        onClick: PropTypes.func,
+    };
+
+    constructor() {
+        super();
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    onClick = (e) => {
+        if (this.props.onClick) this.props.onClick(e);
+    };
+
+    onHoverStart = () => {
+        this.setState({hover: true});
+    };
+
+    onHoverEnd = () => {
+        this.setState({hover: false});
+    };
+
+    render() {
+        let tooltip = null;
+        if (this.state.hover) {
+            const Tooltip = sdk.getComponent("elements.Tooltip");
+            tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} dir="auto" />;
+        }
+        if (SettingsStore.getValue("alwaysShowEncryptionIcons")) {
+            return (
+                <div
+                    className={`mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${this.props.icon}`}
+                    onClick={this.onClick}
+                    onMouseEnter={this.onHoverStart}
+                    onMouseLeave={this.onHoverEnd}
+                >{tooltip}</div>
+            );
+        } else {
+            return (
+                <div
+                    className={`mx_EventTile_e2eIcon mx_EventTile_e2eIcon_hidden mx_EventTile_e2eIcon_${this.props.icon}`}
+                    onClick={this.onClick}
+                    onMouseEnter={this.onHoverStart}
+                    onMouseLeave={this.onHoverEnd}
+                >{tooltip}</div>
+            );
+        }
     }
 }
 

src/i18n/strings/en_EN.json

@@ -834,9 +834,9 @@
     "If your other devices do not have the key for this message you will not be able to decrypt them.": "If your other devices do not have the key for this message you will not be able to decrypt them.",
     "Key request sent.": "Key request sent.",
     "<requestLink>Re-request encryption keys</requestLink> from your other devices.": "<requestLink>Re-request encryption keys</requestLink> from your other devices.",
-    "Undecryptable": "Undecryptable",
+    "This message cannot be decrypted": "This message cannot be decrypted",
     "Encrypted by an unverified device": "Encrypted by an unverified device",
-    "Unencrypted message": "Unencrypted message",
+    "Unencrypted": "Unencrypted",
     "Please select the destination room for this message": "Please select the destination room for this message",
     "Scroll to bottom of page": "Scroll to bottom of page",
     "device id: ": "device id: ",