diff --git a/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png b/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png index 891f024bf8..6ce8d95e59 100644 Binary files a/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png and b/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png differ diff --git a/res/css/structures/_AutocompleteInput.pcss b/res/css/structures/_AutocompleteInput.pcss index 87501fe9a2..409d67ceea 100644 --- a/res/css/structures/_AutocompleteInput.pcss +++ b/res/css/structures/_AutocompleteInput.pcss @@ -69,8 +69,8 @@ Please see LICENSE files in the repository root for full details. font-size: $font-12px; } -.mx_AutocompleteInput_editor_selection_remove_button { - padding: 0 $spacing-4; +.mx_AutocompleteInput_editor_selection_remove_button svg { + vertical-align: middle; } .mx_AutocompleteInput_matches { diff --git a/res/css/structures/_RoomSearch.pcss b/res/css/structures/_RoomSearch.pcss index 61760c420f..b3e084e296 100644 --- a/res/css/structures/_RoomSearch.pcss +++ b/res/css/structures/_RoomSearch.pcss @@ -24,13 +24,13 @@ Please see LICENSE files in the repository root for full details. cursor: pointer; .mx_RoomSearch_icon { - width: 16px; - height: 16px; - mask: url("$(res)/img/element-icons/roomlist/search.svg"); + width: 20px; + height: 20px; + mask-image: url("@vector-im/compound-design-tokens/icons/search.svg"); mask-repeat: no-repeat; + mask-size: contain; background-color: $secondary-content; - margin-left: 7px; - margin-bottom: 2px; + margin-left: var(--cpd-space-2x); flex-shrink: 0; } diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss index 6a7082fc87..00db5581a0 100644 --- a/res/css/views/auth/_AuthBody.pcss +++ b/res/css/views/auth/_AuthBody.pcss @@ -53,13 +53,14 @@ Please see LICENSE files in the repository root for full details. } .mx_AuthBody_icon { - width: 40px; + width: 44px; + height: 44px; } .mx_AuthBody_lockIcon { color: $secondary-content; height: 32px; - margin-bottom: -3px; /* tweak to align all icons on different forgot password steps */ + width: 32px; } .mx_AuthBody_text { diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss index 9283d9d739..7a3ca6bd3c 100644 --- a/res/css/views/dialogs/_InviteDialog.pcss +++ b/res/css/views/dialogs/_InviteDialog.pcss @@ -174,8 +174,11 @@ Please see LICENSE files in the repository root for full details. .mx_InviteDialog_userTile_remove { display: inline-block; - margin-inline-start: $spacing-4; vertical-align: middle; + + svg { + vertical-align: middle; + } } } diff --git a/res/img/compound/checkbox-32px.svg b/res/img/compound/checkbox-32px.svg deleted file mode 100644 index f1ee8b7dc2..0000000000 --- a/res/img/compound/checkbox-32px.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/compound/error-16px.svg b/res/img/compound/error-16px.svg deleted file mode 100644 index e2e68f431c..0000000000 --- a/res/img/compound/error-16px.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/compound/padlock-32px.svg b/res/img/compound/padlock-32px.svg deleted file mode 100644 index d349bf0a97..0000000000 --- a/res/img/compound/padlock-32px.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/Email-icon.svg b/res/img/element-icons/Email-icon.svg deleted file mode 100644 index c92b153cf0..0000000000 --- a/res/img/element-icons/Email-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/roomlist/search.svg b/res/img/element-icons/roomlist/search.svg deleted file mode 100644 index b6a1ad100f..0000000000 --- a/res/img/element-icons/roomlist/search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/feather-customised/help-circle.svg b/res/img/feather-customised/help-circle.svg deleted file mode 100644 index 61b853aae8..0000000000 --- a/res/img/feather-customised/help-circle.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/res/img/icon-pill-remove.svg b/res/img/icon-pill-remove.svg deleted file mode 100644 index adf6fd4771..0000000000 --- a/res/img/icon-pill-remove.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/img/plus.svg b/res/img/plus.svg deleted file mode 100644 index e1d59ec6f4..0000000000 --- a/res/img/plus.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Line + Line - Created with Sketch. - - - - - - - - diff --git a/src/components/structures/AutocompleteInput.tsx b/src/components/structures/AutocompleteInput.tsx index 71d81c4ce5..5e930d5f1b 100644 --- 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 = ({ onClick={onClickInputArea} data-testid="autocomplete-editor" > - + {selection.map((item) => ( = ({ item, onClick, render }) onClick={() => onClick(item)} data-testid={`autocomplete-selection-remove-button-${item.completionId}`} > - + ); diff --git a/src/components/structures/ErrorMessage.tsx b/src/components/structures/ErrorMessage.tsx index f9292c499c..58c523272b 100644 --- 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 = ({ message }) => { - const icon = message ? : null; + const icon = message ? : null; return (
diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx index 006ec424bc..0e5cfb0f38 100644 --- 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 { return ( <> - +

{_t("auth|reset_password_title")}

@@ -417,7 +416,7 @@ export default class ForgotPassword extends React.Component { public renderDone(): JSX.Element { return ( <> - +

{_t("auth|reset_password|reset_successful")}

{this.state.logoutDevices ?

{_t("auth|reset_password|devices_logout_success")}

: null} = ({ return ( <> - +

{_t("auth|enter_email_heading")}

{_t("auth|enter_email_explainer", { homeserver }, { b: (t) => {t} })} diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index bdb5d0a85f..8e1d49c138 100644 --- 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 { let closeButton; if (this.props.onRemove) { closeButton = ( - - {_t("action|remove")} + + ); } diff --git a/src/components/views/elements/AppPermission.tsx b/src/components/views/elements/AppPermission.tsx index b5b4feee42..846cc2625a 100644 --- 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; diff --git a/src/components/views/messages/DecryptionFailureBody.tsx b/src/components/views/messages/DecryptionFailureBody.tsx index 9cdc2eac7b..81894fa51f 100644 --- 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 ( - + {_t("timeline|decryption_failure|sender_identity_previously_verified")} ); diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx index 2a9af902dd..946a5cd46b 100644 --- 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 {

); - let inviteButton; - if (this.props.showInviteButton) { - inviteButton = ( -
- {_t("action|invite")} -
- ); - } - let powerLabel; const powerStatus = this.props.powerStatus; if (powerStatus) { @@ -178,7 +163,6 @@ export default class EntityTile extends React.PureComponent { {nameAndPresence} {powerLabel} - {inviteButton} ); diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx index acca95b07c..d326853f4e 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx @@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; - -import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg"; +import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; interface Props { message: string; diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx index 4c7d261102..250d71f2f3 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx @@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; +import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; -import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg"; import { _t } from "../../../languageHandler"; export const VoiceBroadcastRecordingConnectionError: React.FC = () => { diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 05094a2ca1..fe5e1caf8a 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -303,9 +303,21 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
-
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + +
with example.com. diff --git a/test/components/views/messages/__snapshots__/DecryptionFailureBody-test.tsx.snap b/test/components/views/messages/__snapshots__/DecryptionFailureBody-test.tsx.snap index b2ba5b2a2e..67630f2031 100644 --- a/test/components/views/messages/__snapshots__/DecryptionFailureBody-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/DecryptionFailureBody-test.tsx.snap @@ -26,9 +26,23 @@ exports[`DecryptionFailureBody should handle messages from users who change iden class="mx_DecryptionFailureBody mx_EventTile_content mx_DecryptionFailureVerifiedIdentityChanged" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + Verified identity has changed
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap index e9e902c5d6..cb063c395c 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap @@ -890,9 +890,23 @@ exports[`VoiceBroadcastPlaybackBody when rendering an error broadcast should ren
-
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + Unable to play this voice broadcast