Switch to rendering svg icons rather than css masking (#31517)

* 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> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-15 09:52:50 +00:00
parent ef63661cb0
commit 1d3421417f
50 changed files with 558 additions and 375 deletions
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import { createRef } from "react";
 import classNames from "classnames";
+import { ExploreIcon, DialPadIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import dis from "../../dispatcher/dispatcher";
 import { _t } from "../../languageHandler";
@@ -347,7 +348,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                    className="mx_LeftPanel_dialPadButton"
                    onClick={this.onDialPad}
                    title={_t("left_panel|open_dial_pad")}
-                />
+                >
+                    <DialPadIcon />
+                </AccessibleButton>
            );
        }

@@ -358,7 +361,9 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                    className="mx_LeftPanel_exploreButton"
                    onClick={this.onExplore}
                    title={_t("action|explore_rooms")}
-                />
+                >
+                    <ExploreIcon />
+                </AccessibleButton>
            );
        }

--- a/src/components/structures/RoomStatusBar.tsx
+++ b/src/components/structures/RoomStatusBar.tsx
@@ -17,7 +17,7 @@ import {
    type SyncState,
    type SyncStateData,
 } from "matrix-js-sdk/src/matrix";
-import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { RestartIcon, WarningIcon, DeleteIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t, _td } from "../../languageHandler";
 import Resend from "../../Resend";
@@ -237,10 +237,12 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {

        let buttonRow = (
            <>
-                <AccessibleButton onClick={this.onCancelAllClick} className="mx_RoomStatusBar_unsentCancelAllBtn">
+                <AccessibleButton onClick={this.onCancelAllClick}>
+                    <DeleteIcon />
                    {_t("room|status_bar|delete_all")}
                </AccessibleButton>
                <AccessibleButton onClick={this.onResendAllClick} className="mx_RoomStatusBar_unsentRetry">
+                    <RestartIcon />
                    {_t("room|status_bar|retry_all")}
                </AccessibleButton>
            </>
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -45,6 +45,7 @@ import { debounce, throttle } from "lodash";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
 import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
 import { type RoomViewProps } from "@element-hq/element-web-module-api";
+import { RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import shouldHideEvent from "../../shouldHideEvent";
 import { _t } from "../../languageHandler";
@@ -330,7 +331,8 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {

    if (room.isError) {
        const buttons = (
-            <AccessibleButton onClick={onRetryClicked} className="mx_RoomStatusBar_unsentRetry">
+            <AccessibleButton onClick={onRetryClicked}>
+                <RestartIcon />
                {_t("action|retry")}
            </AccessibleButton>
        );
--- a/src/components/structures/SearchBox.tsx
+++ b/src/components/structures/SearchBox.tsx
@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { createRef, type HTMLProps } from "react";
 import { throttle } from "lodash";
 import classNames from "classnames";
+import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import AccessibleButton from "../../components/views/elements/AccessibleButton";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
@@ -124,7 +125,9 @@ export default class SearchBox extends React.Component<IProps, IState> {
                    onClick={() => {
                        this.clearSearch("button");
                    }}
-                />
+                >
+                    <CloseIcon />
+                </AccessibleButton>
            ) : undefined;

        // show a shorter placeholder when blurred, if requested
--- a/src/components/structures/TabbedView.tsx
+++ b/src/components/structures/TabbedView.tsx
@@ -26,7 +26,7 @@ export class Tab<T extends string> {
     * Creates a new tab.
     * @param {string} id The tab's ID.
     * @param {string} label The untranslated tab label.
-     * @param {string|JSX.Element} icon An SVG element to use for the tab icon. Can also be a string for legacy icons, in which case it is the class for the tab icon. This should be a simple mask.
+     * @param {string|JSX.Element} icon An SVG element to use for the tab icon.
     * @param {JSX.Element} body The JSX for the tab container.
     * @param {string} screenName The screen name to report to Posthog.
     * @param {string} labelClassName Additional class to add to the tab label.
@@ -34,7 +34,7 @@ export class Tab<T extends string> {
    public constructor(
        public readonly id: T,
        public readonly label: TranslationKey,
-        public readonly icon: string | JSX.Element | null,
+        public readonly icon: JSX.Element | null,
        public readonly body: JSX.Element,
        public readonly screenName?: ScreenName,
        public readonly labelClassName?: string,
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -13,6 +13,7 @@ import { type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from "matrix-js-sdk/src/logger";
 import { uniqBy } from "lodash";
 import { RichList, RichItem, PillInput, Pill } from "@element-hq/web-shared-components";
+import { DialPadIcon, UserProfileSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { Icon as EmailPillAvatarIcon } from "../../../../res/img/icon-email-pill-avatar.svg";
 import { _t, _td } from "../../../languageHandler";
@@ -1400,7 +1401,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
            new Tab(
                TabId.UserDirectory,
                _td("invite|transfer_user_directory_tab"),
-                "mx_InviteDialog_userDirectoryIcon",
+                <UserProfileSolidIcon />,
                usersSection,
            ),
        ];
@@ -1440,9 +1441,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
                <Dialpad hasDial={false} onDigitPress={this.onDigitPress} onDeletePress={this.onDeletePress} />
            </div>
        );
-        tabs.push(
-            new Tab(TabId.DialPad, _td("invite|transfer_dial_pad_tab"), "mx_InviteDialog_dialPadIcon", dialPadSection),
-        );
+        tabs.push(new Tab(TabId.DialPad, _td("invite|transfer_dial_pad_tab"), <DialPadIcon />, dialPadSection));

        const consultConnectSection = (
            <div className="mx_InviteDialog_transferConsultConnect">
--- a/src/components/views/dialogs/LeaveSpaceDialog.tsx
+++ b/src/components/views/dialogs/LeaveSpaceDialog.tsx
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React, { useMemo, useState } from "react";
 import { type Room, JoinRule } from "matrix-js-sdk/src/matrix";
+import { InfoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import DialogButtons from "../elements/DialogButtons";
@@ -88,7 +89,12 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
                    />
                )}

-                {onlyAdminWarning && <div className="mx_LeaveSpaceDialog_section_warning">{onlyAdminWarning}</div>}
+                {onlyAdminWarning && (
+                    <div className="mx_LeaveSpaceDialog_section_warning">
+                        <InfoSolidIcon />
+                        {onlyAdminWarning}
+                    </div>
+                )}
            </div>
            <DialogButtons
                primaryButton={_t("space|leave_dialog_action")}
--- a/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx
+++ b/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useMemo, useState } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { InfoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
@@ -126,6 +127,7 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
    if (newSelected.size < 1) {
        inviteOnlyWarning = (
            <div className="mx_ManageRestrictedJoinRuleDialog_section_info">
+                <InfoSolidIcon />
                {_t("room_settings|security|join_rule_restricted_dialog_empty_warning")}
            </div>
        );
@@ -183,7 +185,8 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
                        <div className="mx_ManageRestrictedJoinRuleDialog_section">
                            <h3>{_t("room_settings|security|join_rule_restricted_dialog_heading_other")}</h3>
                            <div className="mx_ManageRestrictedJoinRuleDialog_section_info">
-                                <div>{_t("room_settings|security|join_rule_restricted_dialog_heading_unknown")}</div>
+                                <InfoSolidIcon />
+                                {_t("room_settings|security|join_rule_restricted_dialog_heading_unknown")}
                            </div>
                            {filteredOtherEntries.map((space) => {
                                return (
--- a/src/components/views/dialogs/RoomSettingsDialog.tsx
+++ b/src/components/views/dialogs/RoomSettingsDialog.tsx
@@ -10,6 +10,14 @@ Please see LICENSE files in the repository root for full details.

 import React from "react";
 import { RoomEvent, type Room, RoomStateEvent, type MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
+import {
+    AdminIcon,
+    GroupIcon,
+    LockSolidIcon,
+    PollsIcon,
+    SettingsSolidIcon,
+    VoiceCallSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";

 import TabbedView, { Tab } from "../../structures/TabbedView";
 import { _t, _td } from "../../../languageHandler";
@@ -31,6 +39,9 @@ import { type NonEmptyArray } from "../../../@types/common";
 import { PollHistoryTab } from "../settings/tabs/room/PollHistoryTab";
 import ErrorBoundary from "../elements/ErrorBoundary";
 import { PeopleRoomSettingsTab } from "../settings/tabs/room/PeopleRoomSettingsTab";
+import { Icon as AdvancedIcon } from "../../../../res/img/element-icons/room/settings/advanced.svg";
+import { Icon as NotificationsIcon } from "../../../../res/img/element-icons/notifications.svg";
+import { Icon as BridgeIcon } from "../../../../res/img/feather-customised/bridge.svg";

 export const enum RoomSettingsTab {
    General = "ROOM_GENERAL_TAB",
@@ -129,7 +140,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
            new Tab(
                RoomSettingsTab.General,
                _td("common|general"),
-                "mx_RoomSettingsDialog_settingsIcon",
+                <SettingsSolidIcon />,
                <GeneralRoomSettingsTab room={this.state.room} />,
                "RoomSettingsGeneral",
            ),
@@ -139,7 +150,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
                new Tab(
                    RoomSettingsTab.People,
                    _td("common|people"),
-                    "mx_RoomSettingsDialog_peopleIcon",
+                    <GroupIcon />,
                    <PeopleRoomSettingsTab room={this.state.room} />,
                ),
            );
@@ -149,7 +160,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
                new Tab(
                    RoomSettingsTab.Voip,
                    _td("settings|voip|title"),
-                    "mx_RoomSettingsDialog_voiceIcon",
+                    <VoiceCallSolidIcon />,
                    <VoipRoomSettingsTab room={this.state.room} />,
                ),
            );
@@ -158,7 +169,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
            new Tab(
                RoomSettingsTab.Security,
                _td("room_settings|security|title"),
-                "mx_RoomSettingsDialog_securityIcon",
+                <LockSolidIcon />,
                <SecurityRoomSettingsTab room={this.state.room} closeSettingsFn={() => this.props.onFinished(true)} />,
                "RoomSettingsSecurityPrivacy",
            ),
@@ -167,7 +178,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
            new Tab(
                RoomSettingsTab.Roles,
                _td("room_settings|permissions|title"),
-                "mx_RoomSettingsDialog_rolesIcon",
+                <AdminIcon />,
                <RolesRoomSettingsTab room={this.state.room} />,
                "RoomSettingsRolesPermissions",
            ),
@@ -176,7 +187,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
            new Tab(
                RoomSettingsTab.Notifications,
                _td("notifications|enable_prompt_toast_title"),
-                "mx_RoomSettingsDialog_notificationsIcon",
+                <NotificationsIcon />,
                <NotificationSettingsTab
                    roomId={this.state.room.roomId}
                    closeSettingsFn={() => this.props.onFinished(true)}
@@ -190,7 +201,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
                new Tab(
                    RoomSettingsTab.Bridges,
                    _td("room_settings|bridges|title"),
-                    "mx_RoomSettingsDialog_bridgesIcon",
+                    <BridgeIcon />,
                    <BridgeSettingsTab room={this.state.room} />,
                    "RoomSettingsBridges",
                ),
@@ -201,7 +212,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
            new Tab(
                RoomSettingsTab.PollHistory,
                _td("right_panel|polls_button"),
-                "mx_RoomSettingsDialog_pollsIcon",
+                <PollsIcon />,
                <PollHistoryTab room={this.state.room} onFinished={() => this.props.onFinished(true)} />,
            ),
        );
@@ -211,7 +222,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
                new Tab(
                    RoomSettingsTab.Advanced,
                    _td("common|advanced"),
-                    "mx_RoomSettingsDialog_warningIcon",
+                    <AdvancedIcon />,
                    <AdvancedRoomSettingsTab
                        room={this.state.room}
                        closeSettingsFn={() => this.props.onFinished(true)}
--- a/src/components/views/dialogs/SpacePreferencesDialog.tsx
+++ b/src/components/views/dialogs/SpacePreferencesDialog.tsx
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React, { type ChangeEvent } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
+import { VisibilityOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t, _td } from "../../../languageHandler";
 import BaseDialog from "../dialogs/BaseDialog";
@@ -63,7 +64,7 @@ const SpacePreferencesDialog: React.FC<IProps> = ({ space, onFinished }) => {
        new Tab(
            SpacePreferenceTab.Appearance,
            _td("common|appearance"),
-            "mx_SpacePreferencesDialog_appearanceIcon",
+            <VisibilityOnIcon />,
            <SpacePreferencesAppearanceTab space={space} />,
        ),
    ];
--- a/src/components/views/dialogs/SpaceSettingsDialog.tsx
+++ b/src/components/views/dialogs/SpaceSettingsDialog.tsx
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React, { useMemo } from "react";
 import { type Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { AdminIcon, SettingsSolidIcon, VisibilityOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t, _td } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
@@ -22,6 +23,7 @@ import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsT
 import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab";
 import { Action } from "../../../dispatcher/actions";
 import { type NonEmptyArray } from "../../../@types/common";
+import { Icon as AdvancedIcon } from "../../../../res/img/element-icons/room/settings/advanced.svg";

 export enum SpaceSettingsTab {
    General = "SPACE_GENERAL_TAB",
@@ -48,26 +50,26 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
            new Tab(
                SpaceSettingsTab.General,
                _td("common|general"),
-                "mx_SpaceSettingsDialog_generalIcon",
+                <SettingsSolidIcon />,
                <SpaceSettingsGeneralTab matrixClient={cli} space={space} />,
            ),
            new Tab(
                SpaceSettingsTab.Visibility,
                _td("room_settings|visibility|title"),
-                "mx_SpaceSettingsDialog_visibilityIcon",
+                <VisibilityOnIcon />,
                <SpaceSettingsVisibilityTab matrixClient={cli} space={space} closeSettingsFn={onFinished} />,
            ),
            new Tab(
                SpaceSettingsTab.Roles,
                _td("room_settings|permissions|title"),
-                "mx_RoomSettingsDialog_rolesIcon",
+                <AdminIcon />,
                <RolesRoomSettingsTab room={space} />,
            ),
            SettingsStore.getValue(UIFeature.AdvancedSettings)
                ? new Tab(
                      SpaceSettingsTab.Advanced,
                      _td("common|advanced"),
-                      "mx_RoomSettingsDialog_warningIcon",
+                      <AdvancedIcon />,
                      <AdvancedRoomSettingsTab room={space} closeSettingsFn={onFinished} />,
                  )
                : null,
--- a/src/components/views/elements/ExternalLink.tsx
+++ b/src/components/views/elements/ExternalLink.tsx
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React, { type DetailedHTMLProps, type AnchorHTMLAttributes } from "react";
 import classNames from "classnames";
+import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";

 interface Props extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {}

@@ -17,7 +18,7 @@ interface Props extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement
 const ExternalLink: React.FC<Props> = ({ children, className, ...rest }) => (
    <a target="_blank" rel="noreferrer noopener" {...rest} className={classNames("mx_ExternalLink", className)}>
        {children}
-        <i className="mx_ExternalLink_icon" />
+        <PopOutIcon className="mx_ExternalLink_icon" />
    </a>
 );

--- a/src/components/views/elements/JoinRuleDropdown.tsx
+++ b/src/components/views/elements/JoinRuleDropdown.tsx
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React, { type ReactElement } from "react";
 import { JoinRule } from "matrix-js-sdk/src/matrix";
+import { GroupIcon, LockSolidIcon, PublicIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import Dropdown from "./Dropdown";
 import { type NonEmptyArray } from "../../../@types/common";
@@ -36,6 +37,7 @@ const JoinRuleDropdown: React.FC<IProps> = ({
 }) => {
    const options = [
        <div key={JoinRule.Invite} className="mx_JoinRuleDropdown_invite">
+            <LockSolidIcon />
            {labelInvite}
        </div>,
    ] as NonEmptyArray<ReactElement & { key: string }>;
@@ -44,6 +46,7 @@ const JoinRuleDropdown: React.FC<IProps> = ({
        options.push(
            (
                <div key={JoinRule.Public} className="mx_JoinRuleDropdown_public">
+                    <PublicIcon />
                    {labelPublic}
                </div>
            ) as ReactElement & { key: string },
@@ -65,6 +68,7 @@ const JoinRuleDropdown: React.FC<IProps> = ({
        options.unshift(
            (
                <div key={JoinRule.Restricted} className="mx_JoinRuleDropdown_restricted">
+                    <GroupIcon />
                    {labelRestricted}
                </div>
            ) as ReactElement & { key: string },
--- a/src/components/views/rooms/ReplyPreview.tsx
+++ b/src/components/views/rooms/ReplyPreview.tsx
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.

 import React, { type JSX } from "react";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import dis from "../../../dispatcher/dispatcher";
 import { _t } from "../../../languageHandler";
@@ -44,7 +45,9 @@ export default class ReplyPreview extends React.Component<IProps> {
                        <AccessibleButton
                            className="mx_ReplyPreview_header_cancel"
                            onClick={() => cancelQuoting(this.context.timelineRenderingType)}
-                        />
+                        >
+                            <CloseIcon />
+                        </AccessibleButton>
                    </div>
                    <ReplyTile mxEvent={this.props.replyToEvent} permalinkCreator={this.props.permalinkCreator} />
                </div>