nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix transparent verification checkmark in dark mode (#30235)

Browse Source 
* 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.
This commit is contained in:
Banbuii
2025-07-07 13:35:03 +02:00
committed by GitHub
parent 0f7e394487
commit aa2dc8e574
4 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
res/css/views/rooms/_E2EIcon.pcss
View File

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

12
src/components/views/rooms/E2EIcon.tsx
View File

@@ -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) {

6
test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
View File

@@ -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

12
test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap
View File

@@ -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>