From 50b348c68e41cd34b3a7f2e631e358c4f1f0ca74 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 26 Oct 2017 18:59:05 +0100
Subject: [PATCH] try for slightly prettier redaction

---
 .../views/rooms/_EventTile.scss               | 23 +++++++++----------
 .../views/rooms/_MessageComposer.scss         |  2 +-
 src/skins/vector/css/themes/_base.scss        |  3 ++-
 src/skins/vector/css/themes/_dark.scss        |  3 ++-
 .../vector/themes/status/css/_status.scss     |  3 ++-
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index bb0ca9594b..cfc46e85ab 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -156,18 +156,17 @@ limitations under the License.
 .mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody {
     display: block;
     width: 100%;
-    height: 36px;
-    background-image: $event-redacted-img;
-    background-repeat: no-repeat;
-    background-size: contain;
-}
-
-.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;
+    height: 22px;
+    width: 250px;
+    border-radius: 11px;
+    background: repeating-linear-gradient(
+        -45deg,
+        $event-redacted-fg-color,
+        $event-redacted-fg-color 3px,
+        transparent 3px,
+        transparent 6px
+    );
+    box-shadow: 0px 0px 3px $event-redacted-border-color inset;
 }
 
 .mx_EventTile_highlight,
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
index c1af9e367f..4a84d161bb 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -60,7 +60,7 @@ limitations under the License.
     display: flex;
     align-items: center;
     justify-content: center;
-}}
+}
 
 .mx_MessageComposer_input_wrapper {
     flex: 1;
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index b53cd905b0..6df64cb8e7 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -113,7 +113,8 @@ $event-sending-color: #ddd;
 $event-notsent-color: #f44;
 
 // event redaction
-$event-redacted-img: url('../../img/redacted.jpg');
+$event-redacted-fg-color: #e2e2e2;
+$event-redacted-border-color: #cccccc;
 
 // event timestamp
 $event-timestamp-color: #acacac;
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 8e6a65fefb..73f1bafa1c 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -104,7 +104,8 @@ $event-sending-color: #888;
 $event-notsent-color: #f44;
 
 // event redaction
-$event-redacted-img: url('../../img/redacted-dark.jpg');
+$event-redacted-fg-color: #606060;
+$event-redacted-border-color: #000000;
 
 // event timestamp
 $event-timestamp-color: #acacac;
diff --git a/src/skins/vector/themes/status/css/_status.scss b/src/skins/vector/themes/status/css/_status.scss
index 922ac03b9e..e8bfae2f47 100644
--- a/src/skins/vector/themes/status/css/_status.scss
+++ b/src/skins/vector/themes/status/css/_status.scss
@@ -155,7 +155,8 @@ $event-sending-color: #ddd;
 $event-notsent-color: #f44;
 
 // event redaction
-$event-redacted-img: url('../../img/redacted.jpg');
+$event-redacted-fg-color: #e2e2e2;
+$event-redacted-border-color: #cccccc;
 
 // event timestamp
 $event-timestamp-color: #acacac;