Make it obvious that this is a notification and not the actual message

resources/qml/delegates/Encrypted.qml

@@ -4,45 +4,71 @@
 
 import ".."
 import QtQuick 2.15
-import QtQuick.Controls 2.1
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 import im.nheko 1.0
 
-Column {
+Rectangle {
     id: r
 
     required property int encryptionError
     required property string eventId
 
+    radius: height / 4
     width: parent ? parent.width : undefined
+    height: contents.implicitHeight + Nheko.paddingMedium * 2
+    color: Nheko.colors.alternateBase
 
-    MatrixText {
-        text: {
-            switch (encryptionError) {
-            case Olm.MissingSession:
-                return qsTr("There is no key to unlock this message. We requested the key automatically, but you can try requesting it again if you are impatient.");
-            case Olm.MissingSessionIndex:
-                return qsTr("This message couldn't be decrypted, because we only have a key for newer messages. You can try requesting access to this message.");
-            case Olm.DbError:
-                return qsTr("There was an internal error reading the decryption key from the database.");
-            case Olm.DecryptionFailed:
-                return qsTr("There was an error decrypting this message.");
-            case Olm.ParsingFailed:
-                return qsTr("The message couldn't be parsed.");
-            case Olm.ReplayAttack:
-                return qsTr("The encryption key was reused! Someone is possibly trying to insert false messages into this chat!");
-            default:
-                return qsTr("Unknown decryption error");
+    RowLayout {
+        id: contents
+
+        anchors.fill: parent
+        anchors.margins: Nheko.paddingMedium
+        spacing: Nheko.paddingMedium
+
+        Image {
+            source: "image://colorimage/:/icons/icons/ui/shield-filled-cross.svg?" + Nheko.theme.error
+            Layout.alignment: Qt.AlignVCenter
+            width: 24
+            height: width
+        }
+
+        Column {
+            spacing: Nheko.paddingSmall
+            Layout.fillWidth: true
+
+            MatrixText {
+                text: {
+                    switch (encryptionError) {
+                    case Olm.MissingSession:
+                        return qsTr("There is no key to unlock this message. We requested the key automatically, but you can try requesting it again if you are impatient.");
+                    case Olm.MissingSessionIndex:
+                        return qsTr("This message couldn't be decrypted, because we only have a key for newer messages. You can try requesting access to this message.");
+                    case Olm.DbError:
+                        return qsTr("There was an internal error reading the decryption key from the database.");
+                    case Olm.DecryptionFailed:
+                        return qsTr("There was an error decrypting this message.");
+                    case Olm.ParsingFailed:
+                        return qsTr("The message couldn't be parsed.");
+                    case Olm.ReplayAttack:
+                        return qsTr("The encryption key was reused! Someone is possibly trying to insert false messages into this chat!");
+                    default:
+                        return qsTr("Unknown decryption error");
+                    }
+                }
+                color: Nheko.colors.buttonText
+                width: parent ? parent.width : undefined
             }
+
+            Button {
+                palette: Nheko.colors
+                visible: encryptionError == Olm.MissingSession || encryptionError == Olm.MissingSessionIndex
+                text: qsTr("Request key")
+                onClicked: room.requestKeyForEvent(eventId)
+            }
+
         }
-        color: Nheko.colors.buttonText
-        width: r ? r.width : undefined
-    }
 
-    Button {
-        palette: Nheko.colors
-        visible: encryptionError == Olm.MissingSession || encryptionError == Olm.MissingSessionIndex
-        text: qsTr("Request key")
-        onClicked: room.requestKeyForEvent(eventId)
     }
 
 }