Fix e2e shield being invisible in white mode for encrypted room (#30408)

* fix: e2e icon for encrypted room

* test(e2e): add screenshot for grey shield in encrypted room

playwright/e2e/crypto/crypto.spec.ts

@@ -158,6 +158,8 @@ test.describe("Cryptography", function () {
             await page.getByRole("textbox", { name: "Send a message…" }).press("Enter");
             await checkDMRoom(page);
             const bobRoomId = await bobJoin(page, bob);
+            await expect(page.locator(".mx_MessageComposer_e2eIcon")).toMatchScreenshot("composer-e2e-icon-normal.png");
+
             await testMessages(page, bob, bobRoomId);
             await verify(app, bob);
 

res/css/views/rooms/_E2EIcon.pcss

@@ -52,7 +52,13 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_E2EIcon_normal::after {
     mask-image: url("$(res)/img/e2e/normal.svg");
-    background-color: white;
+    background-color: var(--cpd-color-icon-tertiary);
+}
+
+.mx_E2EIcon_verified {
+    .mx_E2EIcon_normal::after {
+        background-color: white;
+    }
 }
 
 .mx_E2EIcon_verified::after {