From 519ebdb67ae49719ebf9952aa92dd1846bd19c41 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 20 Jul 2020 14:05:07 +0100
Subject: [PATCH 1/2] Update crypto event icon to match rest of app styling

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/messages/_common_CryptoEvent.scss | 13 +++++++++----
 res/css/views/rooms/_E2EIcon.scss               |  2 +-
 res/css/views/rooms/_EventTile.scss             |  2 +-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
index 637d25d7a1..c3d6431b24 100644
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_cryptoEvent {
-
     display: grid;
     grid-template-columns: 24px minmax(0, 1fr) min-content;
 
@@ -25,9 +24,15 @@ limitations under the License.
         width: 16px;
         height: 16px;
         content: "";
-        background-image: url("$(res)/img/e2e/normal.svg");
-        background-repeat: no-repeat;
-        background-size: 100%;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        mask-image: url('$(res)/img/e2e/normal.svg');
+        background-color: $composer-e2e-icon-color;
         margin-top: 4px;
     }
 
diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.scss
index ac47e3aedf..a3473dedec 100644
--- a/res/css/views/rooms/_E2EIcon.scss
+++ b/res/css/views/rooms/_E2EIcon.scss
@@ -42,7 +42,7 @@ limitations under the License.
 // white infill for the transparency
 .mx_E2EIcon::before {
     background-color: #ffffff;
-    mask: url('$(res)/img/e2e/normal.svg');
+    mask-image: url('$(res)/img/e2e/normal.svg');
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: 90%;
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 844ba1981e..2a2191b799 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -355,7 +355,7 @@ $left-gutter: 64px;
 
     &::before {
         background-color: #ffffff;
-        mask: url('$(res)/img/e2e/normal.svg');
+        mask-image: url('$(res)/img/e2e/normal.svg');
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 90%;

From dfed3342b6988ce36e962d29779a63c23c718ac0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 20 Jul 2020 14:09:16 +0100
Subject: [PATCH 2/2] Fix white infill and verified/warning icons too

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/messages/_common_CryptoEvent.scss | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.scss
index c3d6431b24..09c78ae5b4 100644
--- a/res/css/views/messages/_common_CryptoEvent.scss
+++ b/res/css/views/messages/_common_CryptoEvent.scss
@@ -18,6 +18,7 @@ limitations under the License.
     display: grid;
     grid-template-columns: 24px minmax(0, 1fr) min-content;
 
+    &.mx_cryptoEvent_icon::before,
     &.mx_cryptoEvent_icon::after {
         grid-column: 1;
         grid-row: 1 / 3;
@@ -36,12 +37,23 @@ limitations under the License.
         margin-top: 4px;
     }
 
+    // white infill for the transparency
+    &.mx_cryptoEvent_icon::before {
+        background-color: #ffffff;
+        mask-image: url('$(res)/img/e2e/normal.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 90%;
+    }
+
     &.mx_cryptoEvent_icon_verified::after {
-        background-image: url("$(res)/img/e2e/verified.svg");
+        mask-image: url("$(res)/img/e2e/verified.svg");
+        background-color: $accent-color;
     }
 
     &.mx_cryptoEvent_icon_warning::after {
-        background-image: url("$(res)/img/e2e/warning.svg");
+        mask-image: url("$(res)/img/e2e/warning.svg");
+        background-color: $notice-primary-color;
     }
 
     .mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {