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

Switch to rendering svg icons rather than masking them (#31531)

Browse Source 
* Switch to rendering svg icons rather than masking them in left panel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused stylesheet

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them for ExternalLink

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them for TabbedView

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them for JoinRuleDropdown

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in ManageRestrictedJoinRuleDialog

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in LeaveSpaceDialog

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in ReplyPreview

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in SearchBox

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in RoomStatusBar

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix advanced.svg

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix bad merge conflict resolution

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in Toasts

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in RoomInfoLine

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in UploadBar

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused class

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in ConfirmSpaceUserActionDialog

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in FeedbackDialog

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in KeyBackupFailedDialog

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in CopyableText

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in EventTile

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch to rendering svg icons rather than masking them in InviteReason

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-15 12:00:35 +00:00
committed by GitHub
parent c7134e8532
commit 4a3cf3e69d
47 changed files with 638 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
playwright/e2e/right-panel/right-panel.spec.ts
View File

@@ -207,7 +207,7 @@ test.describe("RightPanel", () => {
// \d represents the number of the space members
await page
.locator(".mx_RoomInfoLine_private")
.locator(".mx_RoomInfoLine")
.getByRole("button", { name: /\d member/ })
.click();
await expect(page.locator(".mx_MemberListView")).toBeVisible();

BIN
playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

34
res/css/structures/_ToastContainer.pcss
View File

@@ -41,42 +41,10 @@ Please see LICENSE files in the repository root for full details.
padding: var(--cpd-space-3x);
&.mx_Toast_hasIcon {
&::before,
&::after {
content: "";
svg {
width: 22px;
height: 22px;
grid-column: 1;
grid-row: 1;
mask-size: 100%;
mask-position: center;
mask-repeat: no-repeat;
background-size: 100%;
background-repeat: no-repeat;
}
&.mx_Toast_icon_verification::after {
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
background-color: $primary-content;
}
&.mx_Toast_icon_verification_warning {
/* white infill for the hollow svg mask */
&::before {
background-color: #ffffff;
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
mask-size: 80%;
}
&::after {
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-color: $e2e-warning-color;
}
}
&.mx_Toast_icon_key_storage::after {
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
background-color: $primary-content;
}
.mx_Toast_title,

74
res/css/structures/_UploadBar.pcss
View File

@@ -7,12 +7,44 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_UploadBar {
padding-left: 65px; /* line up with the shield area in the composer */
padding-top: 5px;
/* line up with the shield area in the composer */
padding: 5px 21px 0;
position: relative;
display: grid;
grid-template:
"icon filename cancel" auto
"progress progress progress" auto
/ min-content auto min-content;
gap: var(--cpd-space-1-5x);
& > svg {
grid-area: icon;
height: 18px;
width: 18px;
color: $muted-fg-color;
align-self: center;
}
.mx_UploadBar_filename {
grid-area: filename;
color: $muted-fg-color;
position: relative;
font-size: $font-15px;
vertical-align: middle;
}
.mx_UploadBar_cancel {
grid-area: cancel;
height: 16px;
width: 16px;
color: $muted-fg-color;
align-self: center;
}
.mx_ProgressBar {
width: calc(100% - 40px); /* cheating at a right margin */
grid-area: progress;
width: 100%;
}
}
@@ -21,39 +53,3 @@ Please see LICENSE files in the repository root for full details.
padding-left: 0;
}
}
.mx_UploadBar_filename {
color: $muted-fg-color;
position: relative;
padding-right: 38px; /* 32px for cancel icon, 6px for padding */
padding-left: 22px; /* 18px for icon, 4px for padding */
font-size: $font-15px;
vertical-align: middle;
&::before {
content: "";
height: 18px;
width: 18px;
position: absolute;
top: 0;
left: 0;
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url("@vector-im/compound-design-tokens/icons/share.svg");
}
}
.mx_UploadBar_cancel {
position: absolute;
top: 0;
right: 0;
height: 16px;
width: 16px;
margin-right: 16px; /* align over rightmost button in composer */
margin-top: 5px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}

4
res/css/structures/_UserMenu.pcss
View File

@@ -119,8 +119,4 @@ Please see LICENSE files in the repository root for full details.
.mx_IconizedContextMenu_icon svg {
color: $icon-button-color;
}
.mx_UserMenu_iconMessage::before {
mask-image: url("$(res)/img/element-icons/feedback.svg");
}
}

17
res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss
View File

@@ -32,27 +32,20 @@ Please see LICENSE files in the repository root for full details.
}
.mx_ConfirmSpaceUserActionDialog_warning {
position: relative;
border-radius: 8px;
padding: 12px 8px 12px 42px;
padding: 12px 8px;
background-color: $header-panel-bg-color;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
&::before {
content: "";
position: absolute;
left: 10px;
top: calc(50% - 8px); /* vertical centering */
svg {
height: 16px;
width: 16px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
vertical-align: -4px;
margin-right: var(--cpd-space-1-5x);
color: $secondary-content;
}
}
}

30
res/css/views/dialogs/_FeedbackDialog.pcss
View File

@@ -55,33 +55,17 @@ Please see LICENSE files in the repository root for full details.
text-decoration: underline;
}
&::before,
&::after {
content: "";
& > svg {
position: absolute;
width: 40px;
height: 40px;
left: 16px;
top: 12px;
}
&::before {
padding: var(--cpd-space-2x);
width: 24px;
height: 24px;
background-color: $icon-button-color;
color: $avatar-initial-color;
border-radius: 8px;
}
&::after {
background: $avatar-initial-color; /* TODO */
mask-position: center;
mask-size: 24px;
mask-repeat: no-repeat;
}
}
.mx_FeedbackDialog_reportBug {
&::after {
mask-image: url("$(res)/img/feather-customised/bug.svg");
}
}
.mx_FeedbackDialog_rateApp {
@@ -125,9 +109,5 @@ Please see LICENSE files in the repository root for full details.
font-size: 24px;
border-color: var(--cpd-color-bg-action-primary-rest);
}
&::after {
mask-image: url("$(res)/img/element-icons/feedback.svg");
}
}
}

16
res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss
View File

@@ -10,20 +10,12 @@ Please see LICENSE files in the repository root for full details.
}
.mx_KeyBackupFailedDialog_title {
position: relative;
padding-left: 45px;
padding-bottom: 10px;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
mask-repeat: no-repeat;
background-color: $primary-content;
content: "";
position: absolute;
top: -6px;
right: 0;
bottom: 0;
left: 0;
svg {
margin-right: var(--cpd-space-2x);
vertical-align: -2px;
color: $primary-content;
}
}

10
res/css/views/elements/_CopyableText.pcss
View File

@@ -39,17 +39,11 @@ Please see LICENSE files in the repository root for full details.
top: 0.15em;
background-color: $background;
&::before {
content: "";
mask-image: url($copy-button-url);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: contain;
background-color: $message-action-bar-fg-color;
svg {
width: 1em;
height: 1em;
color: $message-action-bar-fg-color;
display: block;
background-repeat: no-repeat;
}
}
}

12
res/css/views/elements/_InviteReason.pcss
View File

@@ -23,14 +23,12 @@ Please see LICENSE files in the repository root for full details.
cursor: pointer;
color: $secondary-content;
&::before {
content: "";
margin-right: 8px;
background-color: $secondary-content;
mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
svg {
width: 16px;
height: 16px;
color: $secondary-content;
display: inline-block;
width: 18px;
height: 14px;
margin-right: 8px;
}
}
}

37
res/css/views/rooms/_EventTile.pcss
View File

@@ -918,30 +918,21 @@ $left-gutter: 64px;
position: absolute;
top: $spacing-8;
right: $spacing-8;
width: 19px;
height: 19px;
width: 16px;
height: 16px;
visibility: hidden;
background-color: $message-action-bar-fg-color;
&.mx_EventTile_buttonBottom {
top: 33px;
}
&.mx_EventTile_collapseButton,
&.mx_EventTile_expandButton {
mask-size: 75%;
svg {
width: inherit;
height: inherit;
display: block;
color: $message-action-bar-fg-color;
}
}
.mx_EventTile_copyButton {
height: 17px;
mask-image: url($copy-button-url);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: contain;
right: 9px;
width: 17px;
}
}
}
@@ -962,20 +953,6 @@ $left-gutter: 64px;
cursor: pointer;
}
.mx_EventTile_collapseButton,
.mx_EventTile_expandButton {
mask-position: center;
mask-repeat: no-repeat;
}
.mx_EventTile_collapseButton {
mask-image: url("@vector-im/compound-design-tokens/icons/collapse.svg");
}
.mx_EventTile_expandButton {
mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
}
.mx_EventTile_tileError {
color: red;
text-align: center;

29
res/css/views/rooms/_RoomInfoLine.pcss
View File

@@ -10,33 +10,10 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content;
display: inline-block;
&::before {
content: "";
display: inline-block;
height: 1.2em;
mask-position: center;
mask-repeat: no-repeat;
background-color: $tertiary-content;
vertical-align: text-bottom;
svg {
margin-right: 6px;
}
&.mx_RoomInfoLine_public::before {
width: 12px;
mask-size: 12px;
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
}
&.mx_RoomInfoLine_private::before {
width: 10px;
mask-size: 10px;
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
}
&.mx_RoomInfoLine_video::before {
width: 16px;
mask-size: 16px;
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
vertical-align: -2px;
color: $tertiary-content;
}
.mx_RoomInfoLine_members {

2
res/img/feather-customised/bug.svg
View File

@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C9.23858 2 7 4.23858 7 7L17 7C17 4.23858 14.7614 2 12 2ZM2.29289 7.70711C1.90237 7.31658 1.90237 6.68342 2.29289 6.29289C2.68342 5.90237 3.31658 5.90237 3.70711 6.29289L6.41421 9H17.5858L20.2929 6.29289C20.6834 5.90237 21.3166 5.90237 21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L19 10.4142V13H22C22.5523 13 23 13.4477 23 14C23 14.5523 22.5523 15 22 15H19C19 15.7795 18.8726 16.5292 18.6375 17.2295C18.6614 17.2493 18.6847 17.2705 18.7071 17.2929L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L17.6791 19.0933C16.5924 20.5983 14.9222 21.6542 13 21.9291L13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V21.9291C9.07785 21.6542 7.40759 20.5983 6.32091 19.0933L3.70711 21.7071C3.31658 22.0976 2.68342 22.0976 2.29289 21.7071C1.90237 21.3166 1.90237 20.6834 2.29289 20.2929L5.29289 17.2929C5.31533 17.2705 5.33857 17.2493 5.36252 17.2295C5.1274 16.5292 5 15.7795 5 15H2C1.44772 15 1 14.5523 1 14C1 13.4477 1.44772 13 2 13H5V10.4142L2.29289 7.70711Z" fill="#FF5B55"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C9.23858 2 7 4.23858 7 7L17 7C17 4.23858 14.7614 2 12 2ZM2.29289 7.70711C1.90237 7.31658 1.90237 6.68342 2.29289 6.29289C2.68342 5.90237 3.31658 5.90237 3.70711 6.29289L6.41421 9H17.5858L20.2929 6.29289C20.6834 5.90237 21.3166 5.90237 21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L19 10.4142V13H22C22.5523 13 23 13.4477 23 14C23 14.5523 22.5523 15 22 15H19C19 15.7795 18.8726 16.5292 18.6375 17.2295C18.6614 17.2493 18.6847 17.2705 18.7071 17.2929L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L17.6791 19.0933C16.5924 20.5983 14.9222 21.6542 13 21.9291L13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V21.9291C9.07785 21.6542 7.40759 20.5983 6.32091 19.0933L3.70711 21.7071C3.31658 22.0976 2.68342 22.0976 2.29289 21.7071C1.90237 21.3166 1.90237 20.6834 2.29289 20.2929L5.29289 17.2929C5.31533 17.2705 5.33857 17.2493 5.36252 17.2295C5.1274 16.5292 5 15.7795 5 15H2C1.44772 15 1 14.5523 1 14C1 13.4477 1.44772 13 2 13H5V10.4142L2.29289 7.70711Z" fill="currentColor"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

2
res/themes/legacy-light/css/_legacy-light.pcss
View File

@@ -241,8 +241,6 @@ $event-highlight-bg-color: $yellow-background;
/* event timestamp */
$event-timestamp-color: #acacac;
$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";
/* e2e */
$e2e-verified-color: #0dbd8b;
$e2e-warning-color: #ff5b55;

5
res/themes/light/css/_light.pcss
View File

@@ -347,11 +347,6 @@ $focus-brightness: 105%;
/* ******************** */
/* Icon URLs */
/* ******************** */
$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg";
/* ******************** */
/* Location sharing */
/* ******************** */
$location-marker-color: var(--cpd-color-icon-on-solid-primary);

2
src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx
View File

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, useEffect, useState } from "react";
import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import dis from "../../../../dispatcher/dispatcher";
import { _t } from "../../../../languageHandler";
@@ -60,6 +61,7 @@ export default function NewRecoveryMethodDialog({ onFinished }: NewRecoveryMetho
onFinished={onFinished}
title={
<span className="mx_KeyBackupFailedDialog_title">
<ErrorIcon />
{_t("encryption|new_recovery_method_detected|title")}
</span>
}

6
src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx
View File

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import dis from "../../../../dispatcher/dispatcher";
import { _t } from "../../../../languageHandler";
@@ -39,7 +40,10 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent<IPr
public render(): React.ReactNode {
const title = (
<span className="mx_KeyBackupFailedDialog_title">{_t("encryption|recovery_method_removed|title")}</span>
<span className="mx_KeyBackupFailedDialog_title">
<ErrorIcon />
{_t("encryption|recovery_method_removed|title")}
</span>
);
return (

3
src/components/structures/MatrixChat.tsx
View File

@@ -29,6 +29,7 @@ import { TooltipProvider } from "@vector-im/compound-web";
import "what-input";
import sanitizeHtml from "sanitize-html";
import { I18nContext } from "@element-hq/web-shared-components";
import { LockSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import PosthogTrackers from "../../PosthogTrackers";
import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
@@ -1771,7 +1772,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
ToastStore.sharedInstance().addOrReplaceToast({
key: "verifreq_" + request.transactionId,
title: _t("encryption|verification_requested_toast_title"),
icon: "verification",
icon: <LockSolidIcon color="var(--cpd-color-text-primary)" />,
props: { request },
component: VerificationRequestToast,
priority: 90,

4
src/components/structures/ToastContainer.tsx
View File

@@ -53,8 +53,7 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
const { title, icon, key, component, className, bodyClassName, props } = topToast;
const bodyClasses = classNames("mx_Toast_body", bodyClassName);
const toastClasses = classNames("mx_Toast_toast", className, {
mx_Toast_hasIcon: icon,
[`mx_Toast_icon_${icon}`]: icon,
mx_Toast_hasIcon: !!icon,
});
const toastProps = Object.assign({}, props, {
key,
@@ -81,6 +80,7 @@ export default class ToastContainer extends React.Component<EmptyObject, IState>
toast = (
<div className={toastClasses}>
{icon}
{titleElement}
<div className={bodyClasses}>{content}</div>
</div>

6
src/components/structures/UploadBar.tsx
View File

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { type Room, type IEventRelation } from "matrix-js-sdk/src/matrix";
import { CloseIcon, ShareIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import ContentMessages from "../../ContentMessages";
import dis from "../../dispatcher/dispatcher";
@@ -114,10 +115,13 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
const uploadSize = fileSize(this.state.currentTotal!);
return (
<div className="mx_UploadBar">
<ShareIcon />
<div className="mx_UploadBar_filename">
{uploadText} ({uploadSize})
</div>
<AccessibleButton onClick={this.onCancelClick} className="mx_UploadBar_cancel" />
<AccessibleButton onClick={this.onCancelClick} className="mx_UploadBar_cancel">
<CloseIcon />
</AccessibleButton>
<ProgressBar value={this.state.currentLoaded!} max={this.state.currentTotal!} />
</div>
);

8
src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx
View File

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React, { type JSX, type ComponentProps, useMemo, useState } from "react";
import { type Room } from "matrix-js-sdk/src/matrix";
import { InfoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import ConfirmUserActionDialog from "./ConfirmUserActionDialog";
import SpaceStore from "../../../stores/spaces/SpaceStore";
@@ -47,7 +48,12 @@ const ConfirmSpaceUserActionDialog: React.FC<IProps> = ({
let warning: JSX.Element | undefined;
if (warningMessage) {
warning = <div className="mx_ConfirmSpaceUserActionDialog_warning">{warningMessage}</div>;
warning = (
<div className="mx_ConfirmSpaceUserActionDialog_warning">
<InfoSolidIcon />
{warningMessage}
</div>
);
}
return (

6
src/components/views/dialogs/FeedbackDialog.tsx
View File

@@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, useEffect, useRef, useState } from "react";
import { ChatSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import QuestionDialog from "./QuestionDialog";
import { _t } from "../../../languageHandler";
@@ -19,6 +20,7 @@ import { submitFeedback } from "../../../rageshake/submit-rageshake";
import { useStateToggle } from "../../../hooks/useStateToggle";
import StyledCheckbox from "../elements/StyledCheckbox";
import ExternalLink from "../elements/ExternalLink";
import { Icon as BugIcon } from "../../../../res/img/feather-customised/bug.svg";
interface IProps {
feature?: string;
@@ -58,6 +60,7 @@ const FeedbackDialog: React.FC<IProps> = (props: IProps) => {
if (hasFeedback) {
feedbackSection = (
<div className="mx_FeedbackDialog_section mx_FeedbackDialog_rateApp">
<ChatSolidIcon />
<h3>{_t("feedback|comment_label")}</h3>
<p>{_t("feedback|platform_username")}</p>
@@ -111,7 +114,8 @@ const FeedbackDialog: React.FC<IProps> = (props: IProps) => {
title={_t("common|feedback")}
description={
<React.Fragment>
<div className="mx_FeedbackDialog_section mx_FeedbackDialog_reportBug">
<div className="mx_FeedbackDialog_section">
<BugIcon />
<h3>{_t("common|report_a_bug")}</h3>
<p>
{_t(

15
src/components/views/elements/CopyableText.tsx
View File

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React, { useState } from "react";
import classNames from "classnames";
import { CopyIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../../../languageHandler";
import { copyPlaintext } from "../../../utils/strings";
@@ -21,7 +22,11 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
className?: string;
}
export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className">> = ({ getTextToCopy, className }) => {
export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className" | "children">> = ({
getTextToCopy,
className,
children,
}) => {
const [tooltip, setTooltip] = useState<string | undefined>(undefined);
const onCopyClickInternal = async (e: ButtonEvent): Promise<void> => {
@@ -45,7 +50,9 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
onTooltipOpenChange={(open) => {
if (!open) onHideTooltip();
}}
/>
>
{children}
</AccessibleButton>
);
};
@@ -57,7 +64,9 @@ const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true
return (
<div className={combinedClassName} {...props}>
{children}
<CopyTextButton getTextToCopy={getTextToCopy} className="mx_CopyableText_copyButton" />
<CopyTextButton getTextToCopy={getTextToCopy} className="mx_CopyableText_copyButton">
<CopyIcon />
</CopyTextButton>
</div>
);
};

2
src/components/views/elements/InviteReason.tsx
View File

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import classNames from "classnames";
import React from "react";
import { VisibilityOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { sanitizedHtmlNode } from "../../../HtmlUtils";
import { _t } from "../../../languageHandler";
@@ -50,6 +51,7 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
{this.props.htmlReason ? sanitizedHtmlNode(this.props.htmlReason) : this.props.reason}
</div>
<AccessibleButton kind="link_inline" className="mx_InviteReason_view" onClick={this.onViewClick}>
<VisibilityOnIcon />
{_t("common|view_message")}
</AccessibleButton>
</div>

15
src/components/views/messages/CodeBlock.tsx
View File

@@ -9,6 +9,7 @@ import React, { type JSX, useState } from "react";
import classNames from "classnames";
import { type DOMNode, Element as ParserElement, domToReact } from "html-react-parser";
import { textContent, getInnerHTML } from "domutils";
import { CollapseIcon, CopyIcon, ExpandIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { useSettingValue } from "../../../hooks/useSettings.ts";
import { CopyTextButton } from "../elements/CopyableText.tsx";
@@ -25,13 +26,9 @@ const ExpandCollapseButton: React.FC<{
onClick(): void;
}> = ({ expanded, onClick }) => {
return (
<span
className={classNames("mx_EventTile_button", {
mx_EventTile_expandButton: !expanded,
mx_EventTile_collapseButton: expanded,
})}
onClick={onClick}
/>
<span className="mx_EventTile_button" onClick={onClick}>
{expanded ? <CollapseIcon /> : <ExpandIcon />}
</span>
);
};
@@ -138,7 +135,9 @@ const CodeBlock: React.FC<Props> = ({ preNode }) => {
className={classNames("mx_EventTile_button mx_EventTile_copyButton", {
mx_EventTile_buttonBottom: !!expandCollapseButton,
})}
/>
>
<CopyIcon />
</CopyTextButton>
</div>
);
};

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

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React, { type JSX, type FC } from "react";
import { type Room, JoinRule, type MatrixClient } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { LockSolidIcon, VideoCallSolidIcon, PublicIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../../../languageHandler";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
@@ -39,16 +40,16 @@ const RoomInfoLine: FC<IProps> = ({ room }) => {
const isVideoRoom = calcIsVideoRoom(room);
let iconClass: string;
let icon: JSX.Element;
let roomType: string;
if (isVideoRoom) {
iconClass = "mx_RoomInfoLine_video";
icon = <VideoCallSolidIcon />;
roomType = _t("common|video_room");
} else if (joinRule === JoinRule.Public) {
iconClass = "mx_RoomInfoLine_public";
icon = <PublicIcon />;
roomType = room.isSpaceRoom() ? _t("common|public_space") : _t("common|public_room");
} else {
iconClass = "mx_RoomInfoLine_private";
icon = <LockSolidIcon />;
roomType = room.isSpaceRoom() ? _t("common|private_space") : _t("common|private_room");
}
@@ -75,7 +76,8 @@ const RoomInfoLine: FC<IProps> = ({ room }) => {
}
return (
<div className={`mx_RoomInfoLine ${iconClass}`}>
<div className="mx_RoomInfoLine">
{icon}
{roomType}
{members}
</div>

3
src/stores/ToastStore.ts
View File

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import EventEmitter from "events";
import { logger } from "matrix-js-sdk/src/logger";
import { type JSX } from "react";
import type React from "react";
import { type ComponentClass } from "../@types/common";
@@ -17,7 +18,7 @@ export interface IToast<C extends ComponentClass> {
// higher priority number will be shown on top of lower priority
priority: number;
title?: string;
icon?: "verification" | "verification_warning" | "key_storage";
icon?: JSX.Element;
component: C;
className?: string;
bodyClassName?: string;

5
src/toasts/BulkUnverifiedSessionsToast.ts → src/toasts/BulkUnverifiedSessionsToast.tsx
View File

@@ -6,6 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../languageHandler";
import dis from "../dispatcher/dispatcher";
import DeviceListener from "../DeviceListener";
@@ -33,7 +36,7 @@ export const showToast = (deviceIds: Set<string>): void => {
ToastStore.sharedInstance().addOrReplaceToast({
key: TOAST_KEY,
title: _t("encryption|verification|unverified_sessions_toast_title"),
icon: "verification_warning",
icon: <ErrorSolidIcon color="var(--cpd-color-icon-critical-primary)" />,
props: {
description: _t("encryption|verification|unverified_sessions_toast_description"),
primaryLabel: _t("action|review"),

8
src/toasts/SetupEncryptionToast.ts → src/toasts/SetupEncryptionToast.tsx
View File

@@ -7,11 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key";
import React from "react";
import { KeyIcon, ErrorSolidIcon, SettingsSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { type ComponentType } from "react";
import { type Interaction as InteractionEvent } from "@matrix-org/analytics-events/types/typescript/Interaction";
import type React from "react";
import Modal from "../Modal";
import { _t } from "../languageHandler";
import DeviceListener from "../DeviceListener";
@@ -52,9 +52,9 @@ const getIcon = (kind: Kind): IToast<any>["icon"] => {
return undefined;
case Kind.VERIFY_THIS_SESSION:
case Kind.KEY_STORAGE_OUT_OF_SYNC:
return "verification_warning";
return <ErrorSolidIcon color="var(--cpd-color-icon-critical-primary)" />;
case Kind.TURN_ON_KEY_STORAGE:
return "key_storage";
return <SettingsSolidIcon color="var(--cpd-color-text-primary)" />;
}
};

3
src/toasts/UnverifiedSessionToast.tsx
View File

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { _t } from "../languageHandler";
import dis from "../dispatcher/dispatcher";
@@ -47,7 +48,7 @@ export const showToast = async (deviceId: string): Promise<void> => {
ToastStore.sharedInstance().addOrReplaceToast({
key: toastKey(deviceId),
title: _t("encryption|verification|unverified_session_toast_title"),
icon: "verification_warning",
icon: <ErrorSolidIcon color="var(--cpd-color-icon-critical-primary)" />,
props: {
description: device.display_name,
detail: <DeviceMetaData device={extendedDevice} />,

22
test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap
View File

@@ -24,6 +24,17 @@ exports[`<NewRecoveryMethodDialog /> when key backup is disabled 1`] = `
<span
class="mx_KeyBackupFailedDialog_title"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
/>
</svg>
New Recovery Method
</span>
</h1>
@@ -96,6 +107,17 @@ exports[`<NewRecoveryMethodDialog /> when key backup is enabled 1`] = `
<span
class="mx_KeyBackupFailedDialog_title"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
/>
</svg>
New Recovery Method
</span>
</h1>

17
test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
View File

@@ -62,7 +62,22 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</div>
</div>

17
test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
View File

@@ -102,7 +102,22 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</div>
</div>

17
test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
View File

@@ -33,7 +33,22 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</DocumentFragment>
`;

17
test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
View File

@@ -39,7 +39,22 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
<div
class="mx_DevTools_label_bottom"

3
test/unit-tests/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap
View File

@@ -30,8 +30,9 @@ exports[`FeedbackDialog should respect feedback config 1`] = `
id="mx_Dialog_content"
>
<div
class="mx_FeedbackDialog_section mx_FeedbackDialog_reportBug"
class="mx_FeedbackDialog_section"
>
<div />
<h3>
Report a bug
</h3>

221
test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
View File

@@ -16,7 +16,22 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
<li>
@@ -29,7 +44,22 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
<li>
@@ -74,7 +104,22 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
<li>
@@ -87,7 +132,22 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
</ul>
@@ -120,7 +180,22 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
<li>
@@ -133,7 +208,22 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
<li>
@@ -178,7 +268,22 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
<li>
@@ -191,7 +296,22 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
</ul>
@@ -224,7 +344,22 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
<li>
@@ -237,7 +372,22 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
<li>
@@ -284,7 +434,22 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
<li>
@@ -297,7 +462,22 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
</ul>
@@ -330,7 +510,22 @@ exports[`<Users /> should render a single user 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</li>
<li>

67
test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View File

@@ -64,7 +64,22 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
@@ -268,7 +283,22 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
@@ -438,14 +468,41 @@ num_sqrt = num **
</div>
</pre>
<span
class="mx_EventTile_button mx_EventTile_expandButton"
/>
class="mx_EventTile_button"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 3.997a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 20 3h-8a1 1 0 1 0 0 2h5.586L5 17.586V12a1 1 0 1 0-2 0v8.003a1 1 0 0 0 .29.702l.005.004c.18.18.43.291.705.291h8a1 1 0 1 0 0-2H6.414L19 6.414V12a1 1 0 1 0 2 0z"
/>
</svg>
</span>
<div
aria-label="Copy"
class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>

34
test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
View File

@@ -108,7 +108,22 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</p>
</div>
@@ -395,7 +410,22 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</p>
</div>

17
test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
View File

@@ -57,7 +57,22 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</p>
</div>

36
test/unit-tests/components/views/rooms/RoomInfoLine-test.tsx Normal file
View File

@@ -0,0 +1,36 @@
/*
Copyright 2025 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { render } from "jest-matrix-react";
import React from "react";
import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import RoomInfoLine from "../../../../../src/components/views/rooms/RoomInfoLine.tsx";
import { stubClient } from "../../../../test-utils";
describe("RoomInfoLine", () => {
it("renders for public room", () => {
const cli = stubClient();
const room = new Room("!roomId", cli, cli.getUserId()!);
room.currentState.setStateEvents([
new MatrixEvent({
sender: cli.getUserId()!,
room_id: room.roomId,
state_key: "",
event_id: "$eventId",
type: "m.room.join_rules",
content: {
join_rule: "public",
},
}),
]);
const { asFragment, getByText } = render(<RoomInfoLine room={room} />);
expect(getByText("Public room")).toBeVisible();
expect(asFragment()).toMatchSnapshot();
});
});

22
test/unit-tests/components/views/rooms/__snapshots__/RoomInfoLine-test.tsx.snap Normal file
View File

@@ -0,0 +1,22 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`RoomInfoLine renders for public room 1`] = `
<DocumentFragment>
<div
class="mx_RoomInfoLine"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m-1-2.05V18q-.825 0-1.412-.587A1.93 1.93 0 0 1 9 16v-1l-4.8-4.8q-.075.45-.138.9Q4 11.55 4 12q0 3.025 1.987 5.3T11 19.95m6.9-2.55q.5-.55.9-1.187.4-.638.662-1.326.263-.687.4-1.412Q20 12.75 20 12a7.85 7.85 0 0 0-1.363-4.475A7.7 7.7 0 0 0 15 4.6V5q0 .824-.588 1.412A1.93 1.93 0 0 1 13 7h-2v2q0 .424-.287.713A.97.97 0 0 1 10 10H8v2h6q.424 0 .713.287.287.288.287.713v3h1q.65 0 1.175.387.525.388.725 1.013"
/>
</svg>
Public room
</div>
</DocumentFragment>
`;

17
test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
View File

@@ -47,7 +47,22 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</div>
</div>

8
test/unit-tests/toasts/SetupEncryptionToast-test.tsx
View File

@@ -55,6 +55,14 @@ describe("SetupEncryptionToast", () => {
});
});
describe("Verify this session", () => {
it("should render the toast", async () => {
act(() => showToast(Kind.VERIFY_THIS_SESSION));
expect(await screen.findByRole("heading", { name: "Verify this session" })).toBeInTheDocument();
});
});
describe("Key storage out of sync", () => {
let client: Mocked<MatrixClient>;

14
test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
View File

@@ -8,8 +8,20 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
role="alert"
>
<div
class="mx_Toast_toast mx_Toast_hasIcon mx_Toast_icon_verification_warning"
class="mx_Toast_toast mx_Toast_hasIcon"
>
<svg
color="var(--cpd-color-icon-critical-primary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
/>
</svg>
<div
class="mx_Toast_title"
>