From aa2dc8e57404ac1b5fdef1caa04c93607eb7f6c1 Mon Sep 17 00:00:00 2001
From: Banbuii <103992002+Banbuii@users.noreply.github.com>
Date: Mon, 7 Jul 2025 13:35:03 +0200
Subject: [PATCH] Fix transparent verification checkmark in dark mode (#30235)

* Fix transparent verification checkmark in dark mode

Fixes Issue https://github.com/element-hq/element-web/issues/28285

* Add white background to E2E Warning Icon

Also adapted the testcases to the new background.
---
 res/css/views/rooms/_E2EIcon.pcss                    |  7 +++++++
 src/components/views/rooms/E2EIcon.tsx               | 12 +++++++++++-
 .../structures/__snapshots__/RoomView-test.tsx.snap  |  6 +++++-
 .../UntrustedDeviceDialog-test.tsx.snap              | 12 ++++++++++--
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_E2EIcon.pcss b/res/css/views/rooms/_E2EIcon.pcss
index f3aaf8a883..a8e3a34095 100644
--- a/res/css/views/rooms/_E2EIcon.pcss
+++ b/res/css/views/rooms/_E2EIcon.pcss
@@ -59,3 +59,10 @@ Please see LICENSE files in the repository root for full details.
     mask-image: url("$(res)/img/e2e/verified.svg");
     background-color: $e2e-verified-color;
 }
+
+// When using the "normal" icon as a background for verified or warning icon, 
+// it should be slightly smaller than the foreground icon
+.mx_E2EIcon_verified, .mx_E2EIcon_warning .mx_E2EIcon_normal::after {
+    mask-size: 90%;
+    background-color: white;
+}
diff --git a/src/components/views/rooms/E2EIcon.tsx b/src/components/views/rooms/E2EIcon.tsx
index e4f19762ff..7cc76066ee 100644
--- a/src/components/views/rooms/E2EIcon.tsx
+++ b/src/components/views/rooms/E2EIcon.tsx
@@ -76,7 +76,17 @@ const E2EIcon: React.FC<Props> = ({
     if (onClick) {
         content = <AccessibleButton onClick={onClick} className={classes} style={style} />;
     } else {
-        content = <div className={classes} style={style} />;
+        // Verified and warning icon have a transparent cutout, so add a white background.
+        // The normal icon already has the correct shape and size, so reuse that.
+        if (status === E2EStatus.Verified || status === E2EStatus.Warning) {
+            content = (
+                <div className={classes} style={style}>
+                    <div className="mx_E2EIcon_normal" />
+                </div>
+            );
+        } else {
+            content = <div className={classes} style={style} />;
+        }
     }
 
     if (!e2eTitle || hideTooltip) {
diff --git a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
index d33ff73307..1196ce2202 100644
--- a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -1809,7 +1809,11 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                   <div
                     aria-labelledby="«r3e»"
                     class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
-                  />
+                  >
+                    <div
+                      class="mx_E2EIcon_normal"
+                    />
+                  </div>
                 </span>
               </div>
               <div
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap
index 2fd5fdd249..b77858899d 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap
@@ -23,7 +23,11 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of a
         <div
           class="mx_E2EIcon mx_E2EIcon_warning"
           style="width: 24px; height: 24px;"
-        />
+        >
+          <div
+            class="mx_E2EIcon_normal"
+          />
+        </div>
         Not Trusted
       </h1>
     </div>
@@ -97,7 +101,11 @@ exports[`<UntrustedDeviceDialog /> should display the dialog for the device of t
         <div
           class="mx_E2EIcon mx_E2EIcon_warning"
           style="width: 24px; height: 24px;"
-        />
+        >
+          <div
+            class="mx_E2EIcon_normal"
+          />
+        </div>
         Not Trusted
       </h1>
     </div>