From d3ab11928b4eb6cd65917e0807f6be458874f90d Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Tue, 20 Dec 2022 15:07:28 +1300
Subject: [PATCH] Use compound colours for verification badges (#9794)

* update e2e colour variables to compound colours

* use e2e colour vars for e2e icons
---
 res/css/structures/_ToastContainer.pcss         | 2 +-
 res/css/views/messages/_common_CryptoEvent.pcss | 2 +-
 res/css/views/right_panel/_RoomSummaryCard.pcss | 4 ++--
 res/css/views/rooms/_DecryptionFailureBar.pcss  | 2 +-
 res/css/views/rooms/_E2EIcon.pcss               | 4 ++--
 res/css/views/rooms/_EventTile.pcss             | 2 +-
 res/themes/legacy-light/css/_legacy-light.pcss  | 4 ++--
 res/themes/light/css/_light.pcss                | 4 ++--
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss
index a5d4a629e9f..9a1e3b5e198 100644
--- a/res/css/structures/_ToastContainer.pcss
+++ b/res/css/structures/_ToastContainer.pcss
@@ -77,7 +77,7 @@ limitations under the License.
 
                 &::after {
                     mask-image: url("$(res)/img/e2e/warning.svg");
-                    background-color: $alert;
+                    background-color: $e2e-warning-color;
                 }
             }
 
diff --git a/res/css/views/messages/_common_CryptoEvent.pcss b/res/css/views/messages/_common_CryptoEvent.pcss
index 681c117b22b..41d9e378fc4 100644
--- a/res/css/views/messages/_common_CryptoEvent.pcss
+++ b/res/css/views/messages/_common_CryptoEvent.pcss
@@ -38,7 +38,7 @@ limitations under the License.
 
     &.mx_cryptoEvent_icon_warning::after {
         mask-image: url("$(res)/img/e2e/warning.svg");
-        background-color: $alert;
+        background-color: $e2e-warning-color;
     }
 
     .mx_cryptoEvent_state,
diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss
index 69ccb98d70c..9e5f2ce4e8d 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.pcss
+++ b/res/css/views/right_panel/_RoomSummaryCard.pcss
@@ -75,14 +75,14 @@ limitations under the License.
             }
 
             .mx_RoomSummaryCard_e2ee_verified {
-                background-color: #0dbd8b;
+                background-color: #$e2e-verified-color;
                 &::before {
                     mask-image: url("$(res)/img/e2e/verified.svg");
                 }
             }
 
             .mx_RoomSummaryCard_e2ee_warning {
-                background-color: #ff5b55;
+                background-color: $e2e-warning-color;
                 &::before {
                     mask-image: url("$(res)/img/e2e/warning.svg");
                 }
diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss
index 06a51d2664b..1369d599e3a 100644
--- a/res/css/views/rooms/_DecryptionFailureBar.pcss
+++ b/res/css/views/rooms/_DecryptionFailureBar.pcss
@@ -29,7 +29,7 @@ limitations under the License.
     width: 24px;
     height: 24px;
     mask-image: url("$(res)/img/e2e/decryption-failure.svg");
-    background-color: $alert;
+    background-color: $e2e-warning-color;
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: contain;
diff --git a/res/css/views/rooms/_E2EIcon.pcss b/res/css/views/rooms/_E2EIcon.pcss
index 5ae6de07f5b..2d23585f544 100644
--- a/res/css/views/rooms/_E2EIcon.pcss
+++ b/res/css/views/rooms/_E2EIcon.pcss
@@ -66,7 +66,7 @@ limitations under the License.
 
 .mx_E2EIcon_warning::after {
     mask-image: url("$(res)/img/e2e/warning.svg");
-    background-color: $alert;
+    background-color: $e2e-warning-color;
 }
 
 .mx_E2EIcon_normal::after {
@@ -76,5 +76,5 @@ limitations under the License.
 
 .mx_E2EIcon_verified::after {
     mask-image: url("$(res)/img/e2e/verified.svg");
-    background-color: $accent;
+    background-color: $e2e-verified-color;
 }
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 932e1d7c234..9932fcfd9f3 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -678,7 +678,7 @@ $left-gutter: 64px;
 
     &.mx_EventTile_e2eIcon_warning::after {
         mask-image: url("$(res)/img/e2e/warning.svg");
-        background-color: $alert;
+        background-color: $e2e-warning-color;
     }
 
     &.mx_EventTile_e2eIcon_normal::after {
diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss
index 32ad2a86a01..d5d7b4efc2c 100644
--- a/res/themes/legacy-light/css/_legacy-light.pcss
+++ b/res/themes/legacy-light/css/_legacy-light.pcss
@@ -215,10 +215,10 @@ $event-timestamp-color: #acacac;
 $copy-button-url: "$(res)/img/element-icons/copy.svg";
 
 /* e2e */
-$e2e-verified-color: #76cfa5; /* N.B. *NOT* the same as $accent */
+$e2e-verified-color: #0dbd8b;
 $e2e-unknown-color: #e8bf37;
 $e2e-unverified-color: #e8bf37;
-$e2e-warning-color: #ba6363;
+$e2e-warning-color: #ff5b55;
 $e2e-verified-color-light: rgba($e2e-verified-color, 0.06);
 $e2e-warning-color-light: rgba($e2e-warning-color, 0.06);
 
diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss
index e7bfa1e3280..a88bacaac92 100644
--- a/res/themes/light/css/_light.pcss
+++ b/res/themes/light/css/_light.pcss
@@ -183,10 +183,10 @@ $roomtile-default-badge-bg-color: $muted-fg-color;
 
 /* e2e */
 /* ******************** */
-$e2e-verified-color: #76cfa5; /* N.B. *NOT* the same as $accent */
+$e2e-verified-color: #0dbd8b;
 $e2e-unknown-color: #e8bf37;
 $e2e-unverified-color: #e8bf37;
-$e2e-warning-color: #ba6363;
+$e2e-warning-color: #ff5b55;
 $e2e-verified-color-light: rgba($e2e-verified-color, 0.06);
 $e2e-warning-color-light: rgba($e2e-warning-color, 0.06);
 /* ******************** */