Redacted events bg: black lozenge -> torn paper

src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss

@@ -133,10 +133,17 @@ limitations under the License.
 .mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody {
     display: block;
     width: 100%;
-    max-width: 300px;
-    height: 24px;
-    border-radius: 4px;
-    background-color: black;
+    height: 73px;
+    background-image: $event-redacted-img;
+    background-repeat: no-repeat;
+}
+
+.mx_EventTile.mx_EventTile_redacted .mx_EventTile_line {
+    /*
+       Prevent changing colour of the background because
+       $event-redacted-img matches $primary-bg-color
+    */
+    background-color: initial !important;
 }
 
 .mx_EventTile_highlight,

src/skins/vector/css/themes/_base.scss

@@ -93,6 +93,9 @@ $event-encrypting-color: #abddbc;
 $event-sending-color: #ddd;
 $event-notsent-color: #f44;
 
+// event redaction
+$event-redacted-img: url('../../img/redacted.jpg');
+
 // event timestamp
 $event-timestamp-color: #acacac;
 

src/skins/vector/css/themes/_dark.scss

@@ -93,6 +93,9 @@ $event-encrypting-color: rgba(171, 221, 188, 0.4);
 $event-sending-color: #888;
 $event-notsent-color: #f44;
 
+// event redaction
+$event-redacted-img: url('../../img/redacted-dark.jpg');
+
 // event timestamp
 $event-timestamp-color: #acacac;