diff --git a/playwright/e2e/right-panel/right-panel.spec.ts b/playwright/e2e/right-panel/right-panel.spec.ts index 5ebf793c3cb..6a6aba8fd57 100644 --- a/playwright/e2e/right-panel/right-panel.spec.ts +++ b/playwright/e2e/right-panel/right-panel.spec.ts @@ -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(); diff --git a/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png b/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png index fc6fab4e7b3..c5ca8fdc023 100644 Binary files a/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png and b/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png differ diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png index fcee2c1d8c6..ca8e0971c80 100644 Binary files a/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png index 0cb456d72ac..8b906b346e3 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png differ diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss index 5735d74e14b..68b39cae613 100644 --- a/res/css/structures/_ToastContainer.pcss +++ b/res/css/structures/_ToastContainer.pcss @@ -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, diff --git a/res/css/structures/_UploadBar.pcss b/res/css/structures/_UploadBar.pcss index 689713954fc..2c34ce7f7e2 100644 --- a/res/css/structures/_UploadBar.pcss +++ b/res/css/structures/_UploadBar.pcss @@ -7,53 +7,49 @@ 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; - .mx_ProgressBar { - width: calc(100% - 40px); /* cheating at a right margin */ + 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_ThreadView { - .mx_UploadBar { - padding-left: 0; + .mx_UploadBar_filename { + grid-area: filename; + color: $muted-fg-color; + position: relative; + font-size: $font-15px; + vertical-align: middle; } -} -.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; + .mx_UploadBar_cancel { + grid-area: cancel; + height: 16px; + width: 16px; + color: $muted-fg-color; + align-self: center; + } - &::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_ProgressBar { + grid-area: progress; + width: 100%; } } -.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"); +.mx_ThreadView { + .mx_UploadBar { + padding-left: 0; + } } diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss index 42754a56a22..ddefc84d8fe 100644 --- a/res/css/structures/_UserMenu.pcss +++ b/res/css/structures/_UserMenu.pcss @@ -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"); - } } diff --git a/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss b/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss index 1921ef24570..e3ce9db7dc9 100644 --- a/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss +++ b/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss @@ -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; } } } diff --git a/res/css/views/dialogs/_FeedbackDialog.pcss b/res/css/views/dialogs/_FeedbackDialog.pcss index a9e7d97920c..88cfdf33a94 100644 --- a/res/css/views/dialogs/_FeedbackDialog.pcss +++ b/res/css/views/dialogs/_FeedbackDialog.pcss @@ -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"); - } } } diff --git a/res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss b/res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss index d4596dd5010..f4ca40c66eb 100644 --- a/res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss +++ b/res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss @@ -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; } } diff --git a/res/css/views/elements/_CopyableText.pcss b/res/css/views/elements/_CopyableText.pcss index 2764fea46c3..6219055085a 100644 --- a/res/css/views/elements/_CopyableText.pcss +++ b/res/css/views/elements/_CopyableText.pcss @@ -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; } } } diff --git a/res/css/views/elements/_InviteReason.pcss b/res/css/views/elements/_InviteReason.pcss index b007a90c6c2..57cdb823510 100644 --- a/res/css/views/elements/_InviteReason.pcss +++ b/res/css/views/elements/_InviteReason.pcss @@ -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; } } } diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index d8a05fd6ce9..cc9656ddf9d 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -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; diff --git a/res/css/views/rooms/_RoomInfoLine.pcss b/res/css/views/rooms/_RoomInfoLine.pcss index 74ef6c77e14..a9650f27b56 100644 --- a/res/css/views/rooms/_RoomInfoLine.pcss +++ b/res/css/views/rooms/_RoomInfoLine.pcss @@ -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 { diff --git a/res/img/feather-customised/bug.svg b/res/img/feather-customised/bug.svg index 8939f8be111..ea2e4222aa5 100644 --- a/res/img/feather-customised/bug.svg +++ b/res/img/feather-customised/bug.svg @@ -1,3 +1,3 @@ - + diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index ca90eb2e550..8c00393d415 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -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; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index dfdb5f6c757..fcab227283f 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -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); diff --git a/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx b/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx index a2fef4e1c92..2642f01560f 100644 --- a/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx +++ b/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx @@ -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={ + {_t("encryption|new_recovery_method_detected|title")} } diff --git a/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx b/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx index 7c3abf37b15..8feac6f0435 100644 --- a/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx +++ b/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx @@ -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{_t("encryption|recovery_method_removed|title")} + + + {_t("encryption|recovery_method_removed|title")} + ); return ( diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 37640513849..8a9ffdd115b 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -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 { ToastStore.sharedInstance().addOrReplaceToast({ key: "verifreq_" + request.transactionId, title: _t("encryption|verification_requested_toast_title"), - icon: "verification", + icon: , props: { request }, component: VerificationRequestToast, priority: 90, diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx index 649cd1dc594..a84af5a5044 100644 --- a/src/components/structures/ToastContainer.tsx +++ b/src/components/structures/ToastContainer.tsx @@ -53,8 +53,7 @@ export default class ToastContainer extends React.Component 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 toast = (
+ {icon} {titleElement}
{content}
diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx index 6dbbd4997d7..4fbe35f3fdf 100644 --- a/src/components/structures/UploadBar.tsx +++ b/src/components/structures/UploadBar.tsx @@ -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 { const uploadSize = fileSize(this.state.currentTotal!); return (
+
{uploadText} ({uploadSize})
- + + +
); diff --git a/src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx b/src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx index 3851460bdd7..6d1bb38956f 100644 --- a/src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx +++ b/src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx @@ -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 = ({ let warning: JSX.Element | undefined; if (warningMessage) { - warning =
{warningMessage}
; + warning = ( +
+ + {warningMessage} +
+ ); } return ( diff --git a/src/components/views/dialogs/FeedbackDialog.tsx b/src/components/views/dialogs/FeedbackDialog.tsx index 5e1efba38f2..1775e9667a1 100644 --- a/src/components/views/dialogs/FeedbackDialog.tsx +++ b/src/components/views/dialogs/FeedbackDialog.tsx @@ -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 = (props: IProps) => { if (hasFeedback) { feedbackSection = (
+

{_t("feedback|comment_label")}

{_t("feedback|platform_username")}

@@ -111,7 +114,8 @@ const FeedbackDialog: React.FC = (props: IProps) => { title={_t("common|feedback")} description={ -
+
+

{_t("common|report_a_bug")}

{_t( diff --git a/src/components/views/elements/CopyableText.tsx b/src/components/views/elements/CopyableText.tsx index 9c2472a202d..8deaad1d4fe 100644 --- a/src/components/views/elements/CopyableText.tsx +++ b/src/components/views/elements/CopyableText.tsx @@ -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 { className?: string; } -export const CopyTextButton: React.FC> = ({ getTextToCopy, className }) => { +export const CopyTextButton: React.FC> = ({ + getTextToCopy, + className, + children, +}) => { const [tooltip, setTooltip] = useState(undefined); const onCopyClickInternal = async (e: ButtonEvent): Promise => { @@ -45,7 +50,9 @@ export const CopyTextButton: React.FC { if (!open) onHideTooltip(); }} - /> + > + {children} + ); }; @@ -57,7 +64,9 @@ const CopyableText: React.FC = ({ children, getTextToCopy, border = true return (

{children} - + + +
); }; diff --git a/src/components/views/elements/InviteReason.tsx b/src/components/views/elements/InviteReason.tsx index fd44b5a4185..eaa65c74082 100644 --- a/src/components/views/elements/InviteReason.tsx +++ b/src/components/views/elements/InviteReason.tsx @@ -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 { {this.props.htmlReason ? sanitizedHtmlNode(this.props.htmlReason) : this.props.reason}
+ {_t("common|view_message")}
diff --git a/src/components/views/messages/CodeBlock.tsx b/src/components/views/messages/CodeBlock.tsx index cb21ffb5e04..0a3a80fb896 100644 --- a/src/components/views/messages/CodeBlock.tsx +++ b/src/components/views/messages/CodeBlock.tsx @@ -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 ( - + + {expanded ? : } + ); }; @@ -138,7 +135,9 @@ const CodeBlock: React.FC = ({ preNode }) => { className={classNames("mx_EventTile_button mx_EventTile_copyButton", { mx_EventTile_buttonBottom: !!expandCollapseButton, })} - /> + > + +
); }; diff --git a/src/components/views/rooms/RoomInfoLine.tsx b/src/components/views/rooms/RoomInfoLine.tsx index dd5a113ecbd..687c41da341 100644 --- a/src/components/views/rooms/RoomInfoLine.tsx +++ b/src/components/views/rooms/RoomInfoLine.tsx @@ -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 = ({ room }) => { const isVideoRoom = calcIsVideoRoom(room); - let iconClass: string; + let icon: JSX.Element; let roomType: string; if (isVideoRoom) { - iconClass = "mx_RoomInfoLine_video"; + icon = ; roomType = _t("common|video_room"); } else if (joinRule === JoinRule.Public) { - iconClass = "mx_RoomInfoLine_public"; + icon = ; roomType = room.isSpaceRoom() ? _t("common|public_space") : _t("common|public_room"); } else { - iconClass = "mx_RoomInfoLine_private"; + icon = ; roomType = room.isSpaceRoom() ? _t("common|private_space") : _t("common|private_room"); } @@ -75,7 +76,8 @@ const RoomInfoLine: FC = ({ room }) => { } return ( -
+
+ {icon} {roomType} {members}
diff --git a/src/stores/ToastStore.ts b/src/stores/ToastStore.ts index dd09c610b82..41a78ed460c 100644 --- a/src/stores/ToastStore.ts +++ b/src/stores/ToastStore.ts @@ -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 { // 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; diff --git a/src/toasts/BulkUnverifiedSessionsToast.ts b/src/toasts/BulkUnverifiedSessionsToast.tsx similarity index 90% rename from src/toasts/BulkUnverifiedSessionsToast.ts rename to src/toasts/BulkUnverifiedSessionsToast.tsx index 9df70cfb9d7..7f658dc3ab2 100644 --- a/src/toasts/BulkUnverifiedSessionsToast.ts +++ b/src/toasts/BulkUnverifiedSessionsToast.tsx @@ -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): void => { ToastStore.sharedInstance().addOrReplaceToast({ key: TOAST_KEY, title: _t("encryption|verification|unverified_sessions_toast_title"), - icon: "verification_warning", + icon: , props: { description: _t("encryption|verification|unverified_sessions_toast_description"), primaryLabel: _t("action|review"), diff --git a/src/toasts/SetupEncryptionToast.ts b/src/toasts/SetupEncryptionToast.tsx similarity index 97% rename from src/toasts/SetupEncryptionToast.ts rename to src/toasts/SetupEncryptionToast.tsx index 965d8e17fc4..ddf9dd69a72 100644 --- a/src/toasts/SetupEncryptionToast.ts +++ b/src/toasts/SetupEncryptionToast.tsx @@ -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["icon"] => { return undefined; case Kind.VERIFY_THIS_SESSION: case Kind.KEY_STORAGE_OUT_OF_SYNC: - return "verification_warning"; + return ; case Kind.TURN_ON_KEY_STORAGE: - return "key_storage"; + return ; } }; diff --git a/src/toasts/UnverifiedSessionToast.tsx b/src/toasts/UnverifiedSessionToast.tsx index 76d961233c2..4a7f7d2be4b 100644 --- a/src/toasts/UnverifiedSessionToast.tsx +++ b/src/toasts/UnverifiedSessionToast.tsx @@ -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 => { ToastStore.sharedInstance().addOrReplaceToast({ key: toastKey(deviceId), title: _t("encryption|verification|unverified_session_toast_title"), - icon: "verification_warning", + icon: , props: { description: device.display_name, detail: , diff --git a/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap b/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap index 530bba11ee3..2221bd135cc 100644 --- a/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap +++ b/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap @@ -24,6 +24,17 @@ exports[` when key backup is disabled 1`] = ` + + + New Recovery Method @@ -96,6 +107,17 @@ exports[` when key backup is enabled 1`] = ` + + + New Recovery Method diff --git a/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap index 81d58a18f06..1cc41fd9f33 100644 --- a/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap +++ b/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap @@ -62,7 +62,22 @@ exports[` when a beacon is live and has locations renders beac class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
diff --git a/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap index 3b7b73b7ed5..3d5922fcbe7 100644 --- a/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap +++ b/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap @@ -102,7 +102,22 @@ exports[` renders sidebar correctly with beacons 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + + diff --git a/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap b/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap index b3c27d5b96f..eab675f3692 100644 --- a/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap +++ b/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap @@ -33,7 +33,22 @@ exports[` renders share buttons when there is a location class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + + `; diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap index 04e36322e0d..1a51e40cca4 100644 --- a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap +++ b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap @@ -39,7 +39,22 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
+

Report a bug

diff --git a/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap b/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap index 94bdb71047d..ee3ebf88b54 100644 --- a/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap +++ b/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap @@ -16,7 +16,22 @@ exports[` should render a single device - signed by owner 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
  • @@ -29,7 +44,22 @@ exports[` should render a single device - signed by owner 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
  • @@ -74,7 +104,22 @@ exports[` should render a single device - signed by owner 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
  • @@ -87,7 +132,22 @@ exports[` should render a single device - signed by owner 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
    • @@ -120,7 +180,22 @@ exports[` should render a single device - unsigned 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
  • @@ -133,7 +208,22 @@ exports[` should render a single device - unsigned 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
  • @@ -178,7 +268,22 @@ exports[` should render a single device - unsigned 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
  • @@ -191,7 +296,22 @@ exports[` should render a single device - unsigned 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
    • @@ -224,7 +344,22 @@ exports[` should render a single device - verified by cross-signing 1`] class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
  • @@ -237,7 +372,22 @@ exports[` should render a single device - verified by cross-signing 1`] class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
  • @@ -284,7 +434,22 @@ exports[` should render a single device - verified by cross-signing 1`] class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
  • @@ -297,7 +462,22 @@ exports[` should render a single device - verified by cross-signing 1`] class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
    • @@ -330,7 +510,22 @@ exports[` should render a single user 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +
  • diff --git a/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap index 2a3fc12f699..40d88d54bd1 100644 --- a/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap +++ b/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap @@ -64,7 +64,22 @@ exports[` renders formatted m.text correctly linkification is not class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton" role="button" tabindex="0" - /> + > + + + + + @@ -268,7 +283,22 @@ exports[` renders formatted m.text correctly pills do not appear class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton" role="button" tabindex="0" - /> + > + + + + + @@ -438,14 +468,41 @@ num_sqrt = num ** + class="mx_EventTile_button" + > + + + +
    + > + + + + +
    diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap index 7b2bcb1c92b..14c06a6abc9 100644 --- a/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap +++ b/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap @@ -108,7 +108,22 @@ exports[` with crypto enabled renders 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +

    @@ -395,7 +410,22 @@ exports[` with crypto enabled should render a deactivate button for class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +

    diff --git a/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap b/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap index 51c368b0e2a..7374a493678 100644 --- a/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap +++ b/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap @@ -57,7 +57,22 @@ exports[` renders custom user identifiers in the header 1` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + +

    diff --git a/test/unit-tests/components/views/rooms/RoomInfoLine-test.tsx b/test/unit-tests/components/views/rooms/RoomInfoLine-test.tsx new file mode 100644 index 00000000000..434f78dfc49 --- /dev/null +++ b/test/unit-tests/components/views/rooms/RoomInfoLine-test.tsx @@ -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(); + expect(getByText("Public room")).toBeVisible(); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/test/unit-tests/components/views/rooms/__snapshots__/RoomInfoLine-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/RoomInfoLine-test.tsx.snap new file mode 100644 index 00000000000..643c3b3bf0f --- /dev/null +++ b/test/unit-tests/components/views/rooms/__snapshots__/RoomInfoLine-test.tsx.snap @@ -0,0 +1,22 @@ +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing + +exports[`RoomInfoLine renders for public room 1`] = ` + +
    + + + + Public room +
    +     +`; diff --git a/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap index cbefee378be..813e759967e 100644 --- a/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap +++ b/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap @@ -47,7 +47,22 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = ` class="mx_AccessibleButton mx_CopyableText_copyButton" role="button" tabindex="0" - /> + > + + + + + diff --git a/test/unit-tests/toasts/SetupEncryptionToast-test.tsx b/test/unit-tests/toasts/SetupEncryptionToast-test.tsx index fa2b3896593..8a63a6307bc 100644 --- a/test/unit-tests/toasts/SetupEncryptionToast-test.tsx +++ b/test/unit-tests/toasts/SetupEncryptionToast-test.tsx @@ -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; diff --git a/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap b/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap index a1ddb2b88c5..ab34e13fdae 100644 --- a/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap +++ b/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap @@ -8,8 +8,20 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect role="alert" >
    + + +