Deduplicate icons using Compound Design Tokens (#150)

* Deduplicate icons using Compound Design Tokens Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-10-14 17:54:15 +01:00 · 2024-10-14 17:54:15 +01:00 · d770e2afcc
commit d770e2afcc
parent 63986f8c42
26 changed files with 82 additions and 93 deletions
--- a/src/components/structures/AutocompleteInput.tsx
+++ b/src/components/structures/AutocompleteInput.tsx
@ -8,13 +8,12 @@ Please see LICENSE files in the repository root for full details.

 import React, { useState, ReactNode, ChangeEvent, KeyboardEvent, useRef, ReactElement } from "react";
 import classNames from "classnames";
+import { SearchIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import Autocompleter from "../../autocomplete/AutocompleteProvider";
 import { Key } from "../../Keyboard";
 import { ICompletion } from "../../autocomplete/Autocompleter";
 import AccessibleButton from "../../components/views/elements/AccessibleButton";
-import { Icon as PillRemoveIcon } from "../../../res/img/icon-pill-remove.svg";
-import { Icon as SearchIcon } from "../../../res/img/element-icons/roomlist/search.svg";
 import useFocus from "../../hooks/useFocus";

 interface AutocompleteInputProps {
@ -119,7 +118,7 @@ export const AutocompleteInput: React.FC<AutocompleteInputProps> = ({
                onClick={onClickInputArea}
                data-testid="autocomplete-editor"
            >
-                <SearchIcon className="mx_AutocompleteInput_search_icon" width={16} height={16} />
+                <SearchIcon className="mx_AutocompleteInput_search_icon" width="18px" height="18px" />
                {selection.map((item) => (
                    <SelectionItem
                        key={item.completionId}
@ -179,7 +178,7 @@ const SelectionItem: React.FC<SelectionItemProps> = ({ item, onClick, render })
                onClick={() => onClick(item)}
                data-testid={`autocomplete-selection-remove-button-${item.completionId}`}
            >
-                <PillRemoveIcon width={8} height={8} />
+                <CloseIcon width="16px" height="16px" />
            </AccessibleButton>
        </span>
    );
--- a/src/components/structures/ErrorMessage.tsx
+++ b/src/components/structures/ErrorMessage.tsx
@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { ReactNode } from "react";
-
-import { Icon as WarningBadgeIcon } from "../../../res/img/compound/error-16px.svg";
+import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 interface ErrorMessageProps {
    message: string | ReactNode | null;
@ -19,7 +18,7 @@ interface ErrorMessageProps {
 * Reserves two lines to display errors to prevent layout shifts when the error pops up.
 */
 export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
-    const icon = message ? <WarningBadgeIcon className="mx_Icon mx_Icon_16" /> : null;
+    const icon = message ? <WarningIcon className="mx_Icon mx_Icon_16" /> : null;

    return (
        <div className="mx_ErrorMessage">
--- a/src/components/structures/auth/ForgotPassword.tsx
+++ b/src/components/structures/auth/ForgotPassword.tsx
@ -11,6 +11,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { sleep } from "matrix-js-sdk/src/utils";
+import { LockSolidIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t, _td } from "../../../languageHandler";
 import Modal from "../../../Modal";
@ -23,8 +24,6 @@ import AuthBody from "../../views/auth/AuthBody";
 import PassphraseConfirmField from "../../views/auth/PassphraseConfirmField";
 import StyledCheckbox from "../../views/elements/StyledCheckbox";
 import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
-import { Icon as CheckboxIcon } from "../../../../res/img/compound/checkbox-32px.svg";
-import { Icon as LockIcon } from "../../../../res/img/compound/padlock-32px.svg";
 import QuestionDialog from "../../views/dialogs/QuestionDialog";
 import { EnterEmail } from "./forgot-password/EnterEmail";
 import { CheckEmail } from "./forgot-password/CheckEmail";
@ -369,7 +368,7 @@ export default class ForgotPassword extends React.Component<Props, State> {

        return (
            <>
-                <LockIcon className="mx_AuthBody_lockIcon" />
+                <LockSolidIcon className="mx_AuthBody_lockIcon" />
                <h1>{_t("auth|reset_password_title")}</h1>
                <form onSubmit={this.onSubmitForm}>
                    <fieldset disabled={this.state.phase === Phase.ResettingPassword}>
@ -417,7 +416,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
    public renderDone(): JSX.Element {
        return (
            <>
-                <CheckboxIcon className="mx_Icon mx_Icon_32 mx_Icon_accent" />
+                <CheckIcon className="mx_Icon mx_Icon_32 mx_Icon_accent" />
                <h1>{_t("auth|reset_password|reset_successful")}</h1>
                {this.state.logoutDevices ? <p>{_t("auth|reset_password|devices_logout_success")}</p> : null}
                <input
--- a/src/components/structures/auth/forgot-password/EnterEmail.tsx
+++ b/src/components/structures/auth/forgot-password/EnterEmail.tsx
@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { ReactNode, useRef } from "react";
+import { EmailSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

-import { Icon as EmailIcon } from "../../../../../res/img/element-icons/Email-icon.svg";
 import { _t, _td } from "../../../../languageHandler";
 import EmailField from "../../../views/auth/EmailField";
 import { ErrorMessage } from "../../ErrorMessage";
@ -54,7 +54,7 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({

    return (
        <>
-            <EmailIcon className="mx_AuthBody_icon" />
+            <EmailSolidIcon className="mx_AuthBody_icon" />
            <h1>{_t("auth|enter_email_heading")}</h1>
            <p className="mx_AuthBody_text">
                {_t("auth|enter_email_explainer", { homeserver }, { b: (t) => <strong>{t}</strong> })}
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@ -13,6 +13,7 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from "matrix-js-sdk/src/logger";
 import { uniqBy } from "lodash";
+import { CloseIcon } 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";
@ -123,13 +124,12 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
        let closeButton;
        if (this.props.onRemove) {
            closeButton = (
-                <AccessibleButton className="mx_InviteDialog_userTile_remove" onClick={this.onRemove}>
-                    <img
-                        src={require("../../../../res/img/icon-pill-remove.svg").default}
-                        alt={_t("action|remove")}
-                        width={8}
-                        height={8}
-                    />
+                <AccessibleButton
+                    className="mx_InviteDialog_userTile_remove"
+                    onClick={this.onRemove}
+                    aria-label={_t("action|remove")}
+                >
+                    <CloseIcon width="16px" height="16px" />
                </AccessibleButton>
            );
        }
--- a/src/components/views/elements/AppPermission.tsx
+++ b/src/components/views/elements/AppPermission.tsx
@ -11,6 +11,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { RoomMember } from "matrix-js-sdk/src/matrix";
 import { Tooltip } from "@vector-im/compound-web";
+import { HelpIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
@ -21,7 +22,6 @@ import BaseAvatar from "../avatars/BaseAvatar";
 import Heading from "../typography/Heading";
 import AccessibleButton from "./AccessibleButton";
 import { parseUrl } from "../../../utils/UrlUtils";
-import { Icon as HelpIcon } from "../../../../res/img/feather-customised/help-circle.svg";

 interface IProps {
    url: string;
--- a/src/components/views/messages/DecryptionFailureBody.tsx
+++ b/src/components/views/messages/DecryptionFailureBody.tsx
@ -10,11 +10,11 @@ import classNames from "classnames";
 import React, { forwardRef, ForwardRefExoticComponent, useContext } from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { DecryptionFailureCode } from "matrix-js-sdk/src/crypto-api";
+import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import { IBodyProps } from "./IBodyProps";
 import { LocalDeviceVerificationStateContext } from "../../../contexts/LocalDeviceVerificationStateContext";
-import { Icon as WarningBadgeIcon } from "../../../../res/img/compound/error-16px.svg";

 function getErrorMessage(mxEvent: MatrixEvent, isVerified: boolean | undefined): string | React.JSX.Element {
    switch (mxEvent.decryptionFailureReason) {
@ -41,7 +41,7 @@ function getErrorMessage(mxEvent: MatrixEvent, isVerified: boolean | undefined):
        case DecryptionFailureCode.SENDER_IDENTITY_PREVIOUSLY_VERIFIED:
            return (
                <span>
-                    <WarningBadgeIcon className="mx_Icon mx_Icon_16" />
+                    <WarningIcon className="mx_Icon mx_Icon_16" />
                    {_t("timeline|decryption_failure|sender_identity_previously_verified")}
                </span>
            );
--- a/src/components/views/rooms/EntityTile.tsx
+++ b/src/components/views/rooms/EntityTile.tsx
@ -66,7 +66,6 @@ interface IProps {
    presenceLastActiveAgo: number;
    presenceLastTs: number;
    presenceCurrentlyActive?: boolean;
-    showInviteButton: boolean;
    onClick(): void;
    showPresence: boolean;
    subtextLabel?: string;
@ -135,20 +134,6 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
            </div>
        );

-        let inviteButton;
-        if (this.props.showInviteButton) {
-            inviteButton = (
-                <div className="mx_EntityTile_invite">
-                    <img
-                        alt={_t("action|invite")}
-                        src={require("../../../../res/img/plus.svg").default}
-                        width="16"
-                        height="16"
-                    />
-                </div>
-            );
-        }
-
        let powerLabel;
        const powerStatus = this.props.powerStatus;
        if (powerStatus) {
@ -178,7 +163,6 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
                    </div>
                    {nameAndPresence}
                    {powerLabel}
-                    {inviteButton}
                </AccessibleButton>
            </div>
        );