Switch to Compound icons in more places (#31560)

* Switch to Compound icons in ServerPicker Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to Compound ask-to-join icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to Compound invite icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to Compound pin icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to Compound Spinner Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix ServerPicker icon rendering Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace search-inset.svg with Compound Message icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-12-17 11:17:11 +00:00
parent 48c360f688
commit e696f92bd3
88 changed files with 460 additions and 230 deletions
--- a/src/components/structures/LargeLoader.tsx
+++ b/src/components/structures/LargeLoader.tsx
@@ -20,7 +20,7 @@ interface LargeLoaderProps {
 export const LargeLoader: React.FC<LargeLoaderProps> = ({ text }) => {
    return (
        <div className="mx_LargeLoader">
-            <Spinner w={45} h={45} />
+            <Spinner size={45} />
            <div className="mx_LargeLoader_text">{text}</div>
        </div>
    );
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -150,7 +150,7 @@ const Tile: React.FC<ITileProps> = ({
                tabIndex={isActive ? 0 : -1}
                title={_t("space|joining_space")}
            >
-                <Spinner w={24} h={24} />
+                <Spinner size={24} />
            </AccessibleButton>
        );
    } else if (joinedRoom || room.join_rule === JoinRule.Knock) {
--- a/src/components/structures/auth/ForgotPassword.tsx
+++ b/src/components/structures/auth/ForgotPassword.tsx
@@ -373,7 +373,7 @@ export default class ForgotPassword extends React.Component<Props, State> {

    public renderSetPassword(): JSX.Element {
        const submitButtonChild =
-            this.state.phase === Phase.ResettingPassword ? <Spinner w={16} h={16} /> : _t("auth|reset_password_action");
+            this.state.phase === Phase.ResettingPassword ? <Spinner size={16} /> : _t("auth|reset_password_action");

        return (
            <>
--- a/src/components/structures/auth/forgot-password/EnterEmail.tsx
+++ b/src/components/structures/auth/forgot-password/EnterEmail.tsx
@@ -38,7 +38,7 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({
    onLoginClick,
    onSubmitForm,
 }) => {
-    const submitButtonChild = loading ? <Spinner w={16} h={16} /> : _t("auth|forgot_password_send_email");
+    const submitButtonChild = loading ? <Spinner size={16} /> : _t("auth|forgot_password_send_email");

    const emailFieldRef = useRef<Field>(null);

--- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx
@@ -460,7 +460,7 @@ export class EmailIdentityAuthEntry extends React.Component<
                                    a: (text: string) => (
                                        <Fragment>
                                            <AccessibleButton kind="link_inline" onClick={null} disabled>
-                                                {text} <Spinner w={14} h={14} />
+                                                {text} <Spinner size={14} />
                                            </AccessibleButton>
                                        </Fragment>
                                    ),
@@ -875,7 +875,7 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
                {errorSection}
                <div className="mx_InteractiveAuthEntryComponents_sso_buttons">
                    {this.props.busy ? (
-                        <Spinner w={24} h={24} />
+                        <Spinner size={24} />
                    ) : (
                        <>
                            {cancelButton}
--- a/src/components/views/context_menus/RoomGeneralContextMenu.tsx
+++ b/src/components/views/context_menus/RoomGeneralContextMenu.tsx
@@ -17,6 +17,7 @@ import {
    MarkAsReadIcon,
    MarkAsUnreadIcon,
    LeaveIcon,
+    UserAddIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@@ -43,7 +44,6 @@ import { shouldShowComponent } from "../../../customisations/helpers/UIComponent
 import { UIComponent } from "../../../settings/UIFeature";
 import { DeveloperToolsOption } from "./DeveloperToolsOption";
 import { useSettingValue } from "../../../hooks/useSettings";
-import { Icon as InviteIcon } from "../../../../res/img/element-icons/room/invite.svg";

 export interface RoomGeneralContextMenuProps extends IContextMenuProps {
    room: Room;
@@ -190,7 +190,7 @@ export const RoomGeneralContextMenu: React.FC<RoomGeneralContextMenuProps> = ({
                    onPostInviteClick,
                )}
                label={_t("action|invite")}
-                icon={<InviteIcon />}
+                icon={<UserAddIcon />}
            />
        );
    }
--- a/src/components/views/context_menus/SpaceContextMenu.tsx
+++ b/src/components/views/context_menus/SpaceContextMenu.tsx
@@ -15,6 +15,7 @@ import {
    LeaveIcon,
    SearchIcon,
    PreferencesIcon,
+    UserAddIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { type IProps as IContextMenuProps } from "../../structures/ContextMenu";
@@ -40,7 +41,6 @@ import { shouldShowComponent } from "../../../customisations/helpers/UIComponent
 import { UIComponent } from "../../../settings/UIFeature";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { Icon as InviteIcon } from "../../../../res/img/element-icons/room/invite.svg";

 interface IProps extends IContextMenuProps {
    space?: Room;
@@ -69,7 +69,7 @@ const SpaceContextMenu: React.FC<IProps> = ({ space, hideHeader, onFinished, ...
            <IconizedContextMenuOption
                data-testid="invite-option"
                className="mx_SpacePanel_contextMenu_inviteButton"
-                icon={<InviteIcon />}
+                icon={<UserAddIcon />}
                label={_t("action|invite")}
                onClick={onInviteClick}
            />
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -391,7 +391,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                </div>
                {isExporting ? (
                    <div data-testid="export-progress" className="mx_ExportDialog_progress">
-                        <Spinner w={24} h={24} />
+                        <Spinner size={24} />
                        <p>{exportProgressText}</p>
                        <DialogButtons
                            primaryButton={_t("action|cancel")}
--- a/src/components/views/dialogs/ServerOfflineDialog.tsx
+++ b/src/components/views/dialogs/ServerOfflineDialog.tsx
@@ -52,7 +52,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
            const entries = c.transactions
                .filter((t) => t.status === TransactionStatus.Error || t.didPreviouslyFail)
                .map((t, j) => {
-                    let button = <Spinner w={19} h={19} />;
+                    let button = <Spinner size={19} />;
                    if (t.status === TransactionStatus.Error) {
                        button = (
                            <AccessibleButton kind="link" onClick={() => t.run()}>
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -1279,7 +1279,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                        aria-label={_t("action|search")}
                        aria-describedby="mx_SpotlightDialog_keyboardPrompt"
                    />
-                    {(publicRoomsLoading || peopleLoading || profileLoading) && <Spinner w={24} h={24} />}
+                    {(publicRoomsLoading || peopleLoading || profileLoading) && <Spinner size={24} />}
                </div>

                <div
--- a/src/components/views/elements/InlineSpinner.tsx
+++ b/src/components/views/elements/InlineSpinner.tsx
@@ -6,13 +6,12 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
+import { InlineSpinner as BaseInlineSpinner } from "@vector-im/compound-web";

 import { _t } from "../../../languageHandler";

 interface IProps {
-    w?: number;
-    h?: number;
-    children?: React.ReactNode;
+    size?: number;
 }

 export default class InlineSpinner extends React.PureComponent<IProps> {
@@ -23,15 +22,14 @@ export default class InlineSpinner extends React.PureComponent<IProps> {

    public render(): React.ReactNode {
        return (
-            <div className="mx_InlineSpinner">
-                <div
-                    className="mx_InlineSpinner_icon mx_Spinner_icon"
-                    style={{ width: this.props.w, height: this.props.h }}
+            <span className="mx_InlineSpinner">
+                <BaseInlineSpinner
+                    size={this.props.size}
                    aria-label={_t("common|loading")}
-                >
-                    {this.props.children}
-                </div>
-            </div>
+                    role="progressbar"
+                    data-testid="spinner"
+                />
+            </span>
        );
    }
 }
--- a/src/components/views/elements/JoinRuleDropdown.tsx
+++ b/src/components/views/elements/JoinRuleDropdown.tsx
@@ -8,11 +8,15 @@ 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 {
+    GroupIcon,
+    LockSolidIcon,
+    PublicIcon,
+    AskToJoinIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";

 import Dropdown from "./Dropdown";
 import { type NonEmptyArray } from "../../../@types/common";
-import { Icon as AskToJoinIcon } from "../../../../res/img/element-icons/ask-to-join.svg";

 interface IProps {
    value: JoinRule;
--- a/src/components/views/elements/MiniAvatarUploader.tsx
+++ b/src/components/views/elements/MiniAvatarUploader.tsx
@@ -87,11 +87,7 @@ const MiniAvatarUploader: React.FC<IProps> = ({
                {children}

                <div className="mx_MiniAvatarUploader_indicator">
-                    {busy ? (
-                        <Spinner w={20} h={20} />
-                    ) : (
-                        <TakePhotoSolidIcon className="mx_MiniAvatarUploader_cameraIcon" />
-                    )}
+                    {busy ? <Spinner size={20} /> : <TakePhotoSolidIcon className="mx_MiniAvatarUploader_cameraIcon" />}
                </div>
            </AccessibleButton>
        </React.Fragment>
--- a/src/components/views/elements/ReplyChain.tsx
+++ b/src/components/views/elements/ReplyChain.tsx
@@ -246,7 +246,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
                </p>
            );
        } else if (this.state.loading) {
-            header = <Spinner w={16} h={16} />;
+            header = <Spinner size={16} />;
        }

        const { isQuoteExpanded } = this.props;
--- a/src/components/views/elements/Spinner.tsx
+++ b/src/components/views/elements/Spinner.tsx
@@ -7,24 +7,23 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
+import { InlineSpinner } from "@vector-im/compound-web";

 import { _t } from "../../../languageHandler";

 interface IProps {
-    w?: number;
-    h?: number;
+    size?: number;
    message?: string;
    onFinished: any; // XXX: Spinner pretends to be a dialog so it must accept an onFinished, but it never calls it
 }

 export default class Spinner extends React.PureComponent<IProps> {
    public static defaultProps: Partial<IProps> = {
-        w: 32,
-        h: 32,
+        size: 32,
    };

    public render(): React.ReactNode {
-        const { w, h, message } = this.props;
+        const { size, message } = this.props;
        return (
            <div className="mx_Spinner">
                {message && (
@@ -32,13 +31,7 @@ export default class Spinner extends React.PureComponent<IProps> {
                        <div className="mx_Spinner_Msg">{message}</div>&nbsp;
                    </React.Fragment>
                )}
-                <div
-                    className="mx_Spinner_icon"
-                    style={{ width: w, height: h }}
-                    aria-label={_t("common|loading")}
-                    role="progressbar"
-                    data-testid="spinner"
-                />
+                <InlineSpinner size={size} aria-label={_t("common|loading")} role="progressbar" data-testid="spinner" />
            </div>
        );
    }
--- a/src/components/views/location/MapFallback.tsx
+++ b/src/components/views/location/MapFallback.tsx
@@ -22,7 +22,7 @@ const MapFallback: React.FC<Props> = ({ className, isLoading, children, ...rest
    return (
        <div className={classNames("mx_MapFallback", className)} {...rest}>
            <MapFallbackImage className="mx_MapFallback_bg" />
-            {isLoading ? <Spinner h={32} w={32} /> : <LocationMarkerIcon className="mx_MapFallback_icon" />}
+            {isLoading ? <Spinner size={32} /> : <LocationMarkerIcon className="mx_MapFallback_icon" />}
            {children}
        </div>
    );
--- a/src/components/views/messages/DownloadActionButton.tsx
+++ b/src/components/views/messages/DownloadActionButton.tsx
@@ -43,7 +43,7 @@ export default function DownloadActionButton({ mxEvent, mediaEventHelperGet }: I

    if (!canDownload) return null;

-    const spinner = loading ? <Spinner w={18} h={18} /> : undefined;
+    const spinner = loading ? <Spinner size={18} /> : undefined;
    const classes = classNames({
        mx_MessageActionBar_iconButton: true,
        mx_MessageActionBar_downloadButton: true,
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -628,7 +628,7 @@ export class MImageBodyInner extends React.Component<IProps, IState> {
                return <Blurhash className="mx_Blurhash" hash={blurhash} width={width} height={height} />;
            }
        }
-        return <Spinner w={32} h={32} />;
+        return <Spinner size={32} />;
    }

    // Overridden by MStickerBody
--- a/src/components/views/messages/MPollBody.tsx
+++ b/src/components/views/messages/MPollBody.tsx
@@ -365,7 +365,7 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
                </div>
                <div data-testid="totalVotes" className="mx_MPollBody_totalVotes">
                    {totalText}
-                    {isFetchingResponses && <Spinner w={16} h={16} />}
+                    {isFetchingResponses && <Spinner size={16} />}
                </div>
            </fieldset>
        );
--- a/src/components/views/rooms/LegacyRoomListHeader.tsx
+++ b/src/components/views/rooms/LegacyRoomListHeader.tsx
@@ -9,7 +9,12 @@ Please see LICENSE files in the repository root for full details.
 import { ClientEvent, EventType, type Room, RoomEvent, RoomType } from "matrix-js-sdk/src/matrix";
 import React, { type JSX, useContext, useEffect, useState } from "react";
 import { Tooltip } from "@vector-im/compound-web";
-import { PlusIcon, UserAddSolidIcon, SearchIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import {
+    PlusIcon,
+    UserAddSolidIcon,
+    SearchIcon,
+    UserAddIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";

 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
@@ -52,7 +57,6 @@ import IconizedContextMenu, {
 import SpaceContextMenu from "../context_menus/SpaceContextMenu";
 import InlineSpinner from "../elements/InlineSpinner";
 import { HomeButtonContextMenu } from "../spaces/SpacePanel";
-import { Icon as InviteIcon } from "../../../../res/img/element-icons/room/invite.svg";
 import { Icon as HashVideoIcon } from "../../../../res/img/element-icons/roomlist/hash-video.svg";

 const contextMenuBelow = (elementRect: DOMRect): MenuProps => {
@@ -181,7 +185,7 @@ const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
            inviteOption = (
                <IconizedContextMenuOption
                    label={_t("action|invite")}
-                    icon={<InviteIcon />}
+                    icon={<UserAddIcon />}
                    onClick={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
--- a/src/components/views/rooms/RoomPreviewBar.tsx
+++ b/src/components/views/rooms/RoomPreviewBar.tsx
@@ -15,6 +15,7 @@ import {
    RoomViewLifecycle,
 } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
 import { Button } from "@vector-im/compound-web";
+import { AskToJoinIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
@@ -29,7 +30,6 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import { ModuleRunner } from "../../../modules/ModuleRunner";
-import { Icon as AskToJoinIcon } from "../../../../res/img/element-icons/ask-to-join.svg";
 import Field from "../elements/Field";
 import { ModuleApi } from "../../../modules/Api.ts";

@@ -371,7 +371,7 @@ class RoomPreviewBar extends React.Component<IProps, IState> {
                if (this.props.previewLoading) {
                    footer = (
                        <div>
-                            <Spinner w={20} h={20} />
+                            <Spinner size={20} />
                            {_t("room|loading_preview")}
                        </div>
                    );
--- a/src/components/views/settings/devices/DeviceDetailHeading.tsx
+++ b/src/components/views/settings/devices/DeviceDetailHeading.tsx
@@ -103,7 +103,7 @@ const DeviceNameEditor: React.FC<Props & { stopEditing: () => void }> = ({ devic
                >
                    {_t("action|cancel")}
                </AccessibleButton>
-                {isLoading && <Spinner w={16} h={16} />}
+                {isLoading && <Spinner size={16} />}
            </div>
        </form>
    );
--- a/src/components/views/settings/devices/DeviceDetails.tsx
+++ b/src/components/views/settings/devices/DeviceDetails.tsx
@@ -195,7 +195,7 @@ const DeviceDetails: React.FC<Props> = ({
                    >
                        <span className="mx_DeviceDetails_signOutButtonContent">
                            {_t("settings|sessions|sign_out")}
-                            {isSigningOut && <Spinner w={16} h={16} />}
+                            {isSigningOut && <Spinner size={16} />}
                        </span>
                    </AccessibleButton>
                )}
--- a/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -195,7 +195,7 @@ const DeviceListItem: React.FC<{
 }) => {
    const tileContent = (
        <>
-            {isSigningOut && <Spinner w={16} h={16} />}
+            {isSigningOut && <Spinner size={16} />}
            <DeviceExpandDetailsButton isExpanded={isExpanded} onClick={onDeviceExpandToggle} />
        </>
    );
@@ -325,7 +325,7 @@ export const FilteredDeviceList = ({
                            onClick={() => onSignOutDevices(selectedDeviceIds)}
                            className="mx_FilteredDeviceList_headerButton"
                        >
-                            {isSigningOut && <Spinner w={16} h={16} />}
+                            {isSigningOut && <Spinner size={16} />}
                            {_t("action|sign_out")}
                        </AccessibleButton>
                        <AccessibleButton
--- a/src/components/views/spaces/SpacePublicShare.tsx
+++ b/src/components/views/spaces/SpacePublicShare.tsx
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useState } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { sleep } from "matrix-js-sdk/src/utils";
-import { LinkIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { LinkIcon, UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import { copyPlaintext } from "../../../utils/strings";
@@ -18,7 +18,6 @@ import { showRoomInviteDialog } from "../../../RoomInvite";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
-import { Icon as InviteIcon } from "../../../../res/img/element-icons/room/invite.svg";
 import SpacePillButton from "../../structures/SpacePillButton.tsx";

 interface IProps {
@@ -51,7 +50,7 @@ const SpacePublicShare: React.FC<IProps> = ({ space, onFinished }) => {
            {space.canInvite(MatrixClientPeg.safeGet().getSafeUserId()) &&
            shouldShowComponent(UIComponent.InviteUsers) ? (
                <SpacePillButton
-                    icon={<InviteIcon />}
+                    icon={<UserAddIcon />}
                    title={_t("space|invite")}
                    description={_t("space|invite_description")}
                    onClick={() => {