imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Deduplicate icons using Compound Design Tokens (#150)

Browse source 
* 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>
This commit is contained in:
Michael Telatynski 2024-10-14 17:54:15 +01:00 • committed by GitHub
parent 63986f8c42
commit d770e2afcc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 82 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/structures/AutocompleteInput.tsx
View file

@ -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>
);

5
src/components/structures/ErrorMessage.tsx
View file

@ -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">

7
src/components/structures/auth/ForgotPassword.tsx
View file

@ -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

4
src/components/structures/auth/forgot-password/EnterEmail.tsx
View file

@ -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> })}