Fix e2e warning icon should be white (#30539)

* fix: e2e warning icon should be white

* tests: add e2e warning screenshot test

playwright/e2e/crypto/event-shields.spec.ts

@@ -58,12 +58,10 @@ test.describe("Cryptography", function () {
             await app.client.network.setupRoute();
         });
 
-        test("should show the correct shield on e2e events", async ({
-            page,
-            app,
-            bot: bob,
-            homeserver,
-        }, workerInfo) => {
+        test(
+            "should show the correct shield on e2e events",
+            { tag: "@screenshot" },
+            async ({ page, app, bot: bob, homeserver }, workerInfo) => {
                 // Bob has a second, not cross-signed, device
                 const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
 
@@ -102,6 +100,7 @@ test.describe("Cryptography", function () {
 
                 await expect(last).toContainText("test unencrypted");
                 await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+                await expect(lastE2eIcon).toMatchScreenshot("event-shield-warning.png");
                 await lastE2eIcon.focus();
                 await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText("Not encrypted");
 
@@ -159,7 +158,8 @@ test.describe("Cryptography", function () {
                 await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
                     "Encrypted by a device not verified by its owner.",
                 );
-        });
+            },
+        );
 
         test("Should show a grey padlock for a key restored from backup", async ({
             page,

res/css/views/rooms/_E2EIcon.pcss

@@ -55,7 +55,8 @@ Please see LICENSE files in the repository root for full details.
     background-color: var(--cpd-color-icon-tertiary);
 }
 
-.mx_E2EIcon_verified {
+.mx_E2EIcon_verified,
+.mx_E2EIcon_warning {
     .mx_E2EIcon_normal::after {
         background-color: white;
     }