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

* 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>
2025-12-15 12:00:35 +00:00
parent c7134e8532
commit 4a3cf3e69d
47 changed files with 638 additions and 263 deletions
--- 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={
                <span className="mx_KeyBackupFailedDialog_title">
+                    <ErrorIcon />
                    {_t("encryption|new_recovery_method_detected|title")}
                </span>
            }
--- 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<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 (
--- 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<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,
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@@ -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>
--- 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<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>
        );
--- 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<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 (
--- 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<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(
--- 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<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>
    );
 };
--- 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<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>
--- 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 (
-        <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>
    );
 };
--- 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<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>
--- 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<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;
--- a/src/toasts/BulkUnverifiedSessionsToast.tsx
+++ 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<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"),
--- a/src/toasts/SetupEncryptionToast.tsx
+++ 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<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)" />;
    }
 };

--- 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<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} />,