Change DecryptionFailureBody to use text, in a color that contrasts w…

…ith message bubbles

res/css/views/messages/_DecryptionFailureBody.scss

@@ -15,10 +15,6 @@ limitations under the License.
 */
 
 .mx_DecryptionFailureBody {
-    $height: $font-14px;
-    height: $height;
-    min-width: calc($height * 8);
-    border-radius: calc($height / 2);
-    margin-top: $spacing-4;
-    background: $quinary-content;
+    color: $secondary-content;
+    font-style: italic;
 }

res/css/views/rooms/_EventTile.scss

@@ -462,7 +462,7 @@ $left-gutter: 64px;
 .mx_EventTile_e2eIcon_decryption_failure {
     &::after {
         mask-image: url('$(res)/img/e2e/decryption-failure.svg');
-        background-color: $alert;
+        background-color: $secondary-content;
     }
     opacity: 1;
 }

src/components/views/messages/DecryptionFailureBody.tsx

@@ -16,16 +16,15 @@ limitations under the License.
 
 import React from 'react';
 
-import TooltipTarget from '../elements/TooltipTarget';
 import { _t } from '../../../languageHandler';
 import { IBodyProps } from "./IBodyProps";
 
 export default class DecryptionFailureBody extends React.Component<IBodyProps, {}> {
     render() {
         return (
-            <TooltipTarget label={_t("This message cannot be decrypted")}>
-                <div className="mx_DecryptionFailureBody mx_EventTile_content" />
-            </TooltipTarget>
+            <div className="mx_DecryptionFailureBody mx_EventTile_content">
+                { _t('Unable to decrypt message') }
+            </div>
         );
     }
 }

src/components/views/rooms/EventTile.tsx

@@ -855,6 +855,11 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
     private renderE2EPadlock() {
         const ev = this.props.mxEvent;
 
+        // event could not be decrypted
+        if (ev.isDecryptionFailure()) {
+            return <E2ePadlockDecryptionFailure />;
+        }
+
         // event is encrypted and not redacted, display padlock corresponding to whether or not it is verified
         if (ev.isEncrypted() && !ev.isRedacted()) {
             if (this.state.verified === E2EState.Normal) {
@@ -1550,6 +1555,12 @@ function E2ePadlockUnauthenticated(props) {
     );
 }
 
+function E2ePadlockDecryptionFailure(props) {
+    return (
+        <E2ePadlock title={_t("This message could not be decrypted")} icon={E2ePadlockIcon.DecryptionFailure} {...props} />
+    );
+}
+
 enum E2ePadlockIcon {
     Normal = "normal",
     Warning = "warning",

src/i18n/strings/en_EN.json

@@ -1670,6 +1670,7 @@
     "Unencrypted": "Unencrypted",
     "Encrypted by a deleted session": "Encrypted by a deleted session",
     "The authenticity of this encrypted message can't be guaranteed on this device.": "The authenticity of this encrypted message can't be guaranteed on this device.",
+    "This message could not be decrypted": "This message could not be decrypted",
     "Sending your message...": "Sending your message...",
     "Encrypting your message...": "Encrypting your message...",
     "Your message was sent": "Your message was sent",
@@ -2074,7 +2075,7 @@
     "Last month": "Last month",
     "The beginning of the room": "The beginning of the room",
     "Jump to date": "Jump to date",
-    "This message cannot be decrypted": "This message cannot be decrypted",
+    "Unable to decrypt message": "Unable to decrypt message",
     "Downloading": "Downloading",
     "Decrypting": "Decrypting",
     "Download": "Download",