Use compound colours for verification badges (#9794)

* update e2e colour variables to compound colours

* use e2e colour vars for e2e icons

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;

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;
 }

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 {