Add white background to E2E Warning Icon

Also adapted the testcases to the new background.

Author: Banbuii

res/css/views/rooms/_E2EIcon.pcss

@@ -60,7 +60,9 @@ Please see LICENSE files in the repository root for full details.
     background-color: $e2e-verified-color;
 }
 
-.mx_E2EIcon_verified .mx_E2EIcon_normal::after {
+// 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;
 }

src/components/views/rooms/E2EIcon.tsx

@@ -76,8 +76,14 @@ const E2EIcon: React.FC<Props> = ({
     if (onClick) {
         content = <AccessibleButton onClick={onClick} className={classes} style={style} />;
     } else {
-        if (status === E2EStatus.Verified) {
-            content = <div className={classes} style={style}><div className="mx_E2EIcon_normal" /></div>;
+        // 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} />;
         }

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>