diff --git a/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png b/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png index 85ad3a4b7b..04e5fa5186 100644 Binary files a/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png and b/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png differ diff --git a/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png b/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png index ac9f1fbd00..9f40b4881c 100644 Binary files a/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png and b/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png differ diff --git a/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png b/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png index 31236db103..f105b93391 100644 Binary files a/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png and b/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png differ diff --git a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png index 01bad20e14..5a6493738f 100644 Binary files a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png differ diff --git a/res/css/_components.pcss b/res/css/_components.pcss index fe527fdc5b..e78c27df0f 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -280,7 +280,6 @@ @import "./views/rooms/_AuxPanel.pcss"; @import "./views/rooms/_BasicMessageComposer.pcss"; @import "./views/rooms/_CallGuestLinkButton.pcss"; -@import "./views/rooms/_DecryptionFailureBar.pcss"; @import "./views/rooms/_E2EIcon.pcss"; @import "./views/rooms/_E2EIconView.pcss"; @import "./views/rooms/_EditMessageComposer.pcss"; diff --git a/res/css/structures/_LeftPanel.pcss b/res/css/structures/_LeftPanel.pcss index 2bcd049e16..f290772e20 100644 --- a/res/css/structures/_LeftPanel.pcss +++ b/res/css/structures/_LeftPanel.pcss @@ -114,67 +114,30 @@ Please see LICENSE files in the repository root for full details. margin-top: 12px; } - .mx_LeftPanel_dialPadButton { - width: 32px; - height: 32px; + .mx_LeftPanel_dialPadButton, + .mx_LeftPanel_exploreButton { + width: 20px; + height: 20px; + padding: var(--cpd-space-1-5x); border-radius: 8px; background-color: $panel-actions; - position: relative; margin-left: 8px; - &::before { - content: ""; - position: absolute; - top: 6px; - left: 6px; - width: 20px; - height: 20px; - mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg"); - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background-color: $secondary-content; - } - } - - .mx_LeftPanel_exploreButton, - .mx_LeftPanel_recentsButton { - width: 32px; - height: 32px; - border-radius: 8px; - background-color: $panel-actions; - position: relative; - margin-left: 8px; - - &::before { - content: ""; - position: absolute; - top: 8px; - left: 8px; - width: 16px; - height: 16px; - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background-color: $secondary-content; + svg { + width: inherit; + height: inherit; + display: block; + color: $secondary-content; } &:hover { background-color: $tertiary-content; - &::before { - background-color: $background; + svg { + color: $background; } } } - - .mx_LeftPanel_exploreButton::before { - mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg"); - } - - .mx_LeftPanel_recentsButton::before { - mask-image: url("@vector-im/compound-design-tokens/icons/time.svg"); - } } .mx_LegacyRoomListHeader:first-child { @@ -228,8 +191,7 @@ Please see LICENSE files in the repository root for full details. background-color: transparent; } - .mx_LeftPanel_exploreButton, - .mx_LeftPanel_recentsButton { + .mx_LeftPanel_exploreButton { margin-left: 0; margin-top: 8px; } diff --git a/res/css/structures/_RoomStatusBar.pcss b/res/css/structures/_RoomStatusBar.pcss index 19bcc4cb97..f3b1737812 100644 --- a/res/css/structures/_RoomStatusBar.pcss +++ b/res/css/structures/_RoomStatusBar.pcss @@ -99,34 +99,17 @@ Please see LICENSE files in the repository root for full details. position: relative; user-select: none; - &:nth-child(2) { + & + .mx_AccessibleButton { border-left: 1px solid $resend-button-divider-color; } - &::before { - content: ""; - position: absolute; + svg { left: 10px; /* inset for regular button padding */ - background-color: $muted-fg-color; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; + width: 18px; height: 18px; - top: 50%; /* text sizes are dynamic */ - transform: translateY(-50%); - } - - &.mx_RoomStatusBar_unsentCancelAllBtn::before { - mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg"); - } - - &.mx_RoomStatusBar_unsentRetry { - padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */ - - &::before { - mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg"); - } + vertical-align: middle; + color: $muted-fg-color; } } diff --git a/res/css/structures/_SearchBox.pcss b/res/css/structures/_SearchBox.pcss index 2062985046..b8a4f82022 100644 --- a/res/css/structures/_SearchBox.pcss +++ b/res/css/structures/_SearchBox.pcss @@ -17,13 +17,14 @@ Please see LICENSE files in the repository root for full details. .mx_SearchBox_closeButton { cursor: pointer; - mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); - mask-repeat: no-repeat; - mask-position: center; - mask-size: 16px; - width: 16px; height: 16px; + width: 16px; padding: 9px; - background-color: var(--cpd-color-icon-secondary); + + svg { + height: inherit; + width: inherit; + color: var(--cpd-color-icon-secondary); + } } } diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss index 4abb4a677c..93be8b355a 100644 --- a/res/css/views/dialogs/_InviteDialog.pcss +++ b/res/css/views/dialogs/_InviteDialog.pcss @@ -223,14 +223,6 @@ Please see LICENSE files in the repository root for full details. margin-inline-start: auto; } -.mx_InviteDialog_userDirectoryIcon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg"); -} - -.mx_InviteDialog_dialPadIcon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg"); -} - .mx_InviteDialog_tile { cursor: pointer; display: grid; diff --git a/res/css/views/dialogs/_JoinRuleDropdown.pcss b/res/css/views/dialogs/_JoinRuleDropdown.pcss index b17bd17473..602e6db44c 100644 --- a/res/css/views/dialogs/_JoinRuleDropdown.pcss +++ b/res/css/views/dialogs/_JoinRuleDropdown.pcss @@ -18,19 +18,14 @@ Please see LICENSE files in the repository root for full details. min-height: 32px; > div { - padding-left: 30px; - position: relative; + padding-left: var(--cpd-space-1-5x); - &::before { - content: ""; - position: absolute; - height: 16px; + svg { width: 16px; - left: 6px; - top: 8px; - mask-repeat: no-repeat; - mask-position: center; - background-color: $secondary-content; + height: 16px; + color: $secondary-content; + vertical-align: -2px; + margin-right: var(--cpd-space-1-5x); } &.mx_JoinRuleDropdown_knock::before { @@ -39,22 +34,6 @@ Please see LICENSE files in the repository root for full details. } } - .mx_JoinRuleDropdown_invite::before { - box-sizing: border-box; - mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg"); - mask-size: contain; - padding: 1px; - } - - .mx_JoinRuleDropdown_public::before { - mask-image: url("@vector-im/compound-design-tokens/icons/public.svg"); - } - - .mx_JoinRuleDropdown_restricted::before { - mask-image: url("@vector-im/compound-design-tokens/icons/group.svg"); - mask-size: contain; - } - .mx_JoinRuleDropdown_icon { color: $secondary-content; position: absolute; diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.pcss b/res/css/views/dialogs/_LeaveSpaceDialog.pcss index d988466653..194f741d89 100644 --- a/res/css/views/dialogs/_LeaveSpaceDialog.pcss +++ b/res/css/views/dialogs/_LeaveSpaceDialog.pcss @@ -25,28 +25,21 @@ Please see LICENSE files in the repository root for full details. overflow-y: auto; .mx_LeaveSpaceDialog_section_warning { - position: relative; border-radius: 8px; margin: 12px 0 0; - padding: 12px 8px 12px 42px; + padding: 12px 8px; background-color: $header-panel-bg-color; font-size: $font-12px; line-height: $font-15px; color: $secondary-content; - &::before { - content: ""; - position: absolute; - left: 10px; - top: calc(50% - 8px); /* vertical centering */ + svg { height: 16px; width: 16px; - background-color: $secondary-content; - mask-repeat: no-repeat; - mask-size: contain; - mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg"); - mask-position: center; + color: $secondary-content; + vertical-align: middle; + margin: 0 var(--cpd-space-1x); } } diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss index ed51968dec..24e05e581e 100644 --- a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss +++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss @@ -87,25 +87,19 @@ Please see LICENSE files in the repository root for full details. position: relative; border-radius: 8px; margin: 12px 0; - padding: 8px 8px 8px 42px; + padding: 8px; background-color: $header-panel-bg-color; font-size: $font-12px; line-height: $font-15px; color: $secondary-content; - &::before { - content: ""; - position: absolute; - left: 10px; - top: calc(50% - 8px); /* vertical centering */ + svg { height: 16px; width: 16px; - background-color: $secondary-content; - mask-repeat: no-repeat; - mask-size: contain; - mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg"); - mask-position: center; + color: $secondary-content; + vertical-align: middle; + margin: 0 var(--cpd-space-1x); } } diff --git a/res/css/views/dialogs/_RoomSettingsDialog.pcss b/res/css/views/dialogs/_RoomSettingsDialog.pcss index b38a87b125..bc64e9543b 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.pcss +++ b/res/css/views/dialogs/_RoomSettingsDialog.pcss @@ -5,46 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -/* ICONS */ -/* ========================================================== */ - -.mx_RoomSettingsDialog_settingsIcon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg"); -} - -.mx_RoomSettingsDialog_voiceIcon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg"); -} - -.mx_RoomSettingsDialog_securityIcon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg"); -} - -.mx_RoomSettingsDialog_rolesIcon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/admin.svg"); -} - -.mx_RoomSettingsDialog_notificationsIcon::before { - mask-image: url("$(res)/img/element-icons/notifications.svg"); -} - -.mx_RoomSettingsDialog_bridgesIcon::before { - /* This icon is pants, please improve :) */ - mask-image: url("$(res)/img/feather-customised/bridge.svg"); -} - -.mx_RoomSettingsDialog_pollsIcon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/polls.svg"); -} - -.mx_RoomSettingsDialog_warningIcon::before { - mask-image: url("$(res)/img/element-icons/room/settings/advanced.svg"); -} - -.mx_RoomSettingsDialog_peopleIcon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/group.svg"); -} - .mx_RoomSettingsDialog .mx_Dialog_title { -ms-text-overflow: ellipsis; text-overflow: ellipsis; diff --git a/res/css/views/dialogs/_SpacePreferencesDialog.pcss b/res/css/views/dialogs/_SpacePreferencesDialog.pcss index 9c4f1aa8b4..7b969e0ce0 100644 --- a/res/css/views/dialogs/_SpacePreferencesDialog.pcss +++ b/res/css/views/dialogs/_SpacePreferencesDialog.pcss @@ -26,7 +26,3 @@ Please see LICENSE files in the repository root for full details. } } } - -.mx_SpacePreferencesDialog_appearanceIcon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg"); -} diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss index 9b9a825407..e83025af36 100644 --- a/res/css/views/dialogs/_SpaceSettingsDialog.pcss +++ b/res/css/views/dialogs/_SpaceSettingsDialog.pcss @@ -71,14 +71,4 @@ Please see LICENSE files in the repository root for full details. } } } - - .mx_TabbedView_tabLabel { - .mx_SpaceSettingsDialog_generalIcon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg"); - } - - .mx_SpaceSettingsDialog_visibilityIcon::before { - mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg"); - } - } } diff --git a/res/css/views/elements/_ExternalLink.pcss b/res/css/views/elements/_ExternalLink.pcss index 397784dd0e..32d2b040ae 100644 --- a/res/css/views/elements/_ExternalLink.pcss +++ b/res/css/views/elements/_ExternalLink.pcss @@ -12,10 +12,6 @@ Please see LICENSE files in the repository root for full details. .mx_ExternalLink_icon { display: inline-block; - mask-image: url("@vector-im/compound-design-tokens/icons/pop-out.svg"); - background-color: currentColor; - mask-repeat: no-repeat; - mask-size: contain; width: $font-11px; height: $font-11px; margin-left: 0.3rem; diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss deleted file mode 100644 index b8d425bf95..0000000000 --- a/res/css/views/rooms/_DecryptionFailureBar.pcss +++ /dev/null @@ -1,79 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2022 The Matrix.org Foundation C.I.C. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE files in the repository root for full details. -*/ - -.mx_DecryptionFailureBar { - --gap-row: $spacing-8; - --gap-column: $spacing-12; - --gap: var(--gap-row) var(--gap-column); - --size-icon: 24px; - - background-color: $system; - padding: $spacing-12; - margin-inline: $spacing-16; - border-radius: 4px; - - &.mx_DecryptionFailureBar--withEnd { - display: flex; - flex-flow: wrap; - align-items: flex-start; - justify-content: space-between; - row-gap: calc(var(--gap-row) + $spacing-4); /* Increase spacing between the message and the buttons */ - - .mx_DecryptionFailureBar_end { - display: flex; - flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */ - gap: var(--buttons-dialog-gap-row) var(--buttons-dialog-gap-column); - margin-inline-start: calc(var(--size-icon) + var(--gap-column)); /* Align the button(s) and the message */ - } - } - - .mx_DecryptionFailureBar_start { - display: grid; - gap: var(--gap); - grid-template-areas: - "status headline" - ". message"; - grid-template-columns: var(--size-icon) auto; - - .mx_DecryptionFailureBar_start_status { - grid-area: status; - - display: flex; - align-items: center; - gap: var(--gap); - - .mx_Spinner { - height: unset; /* Unset height: 100% */ - } - - .mx_DecryptionFailureBar_start_status_icon { - min-width: var(--size-icon); - height: var(--size-icon); - mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg"); - background-color: $e2e-warning-color; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - } - } - - .mx_DecryptionFailureBar_start_headline { - grid-area: headline; - - font-weight: var(--cpd-font-weight-semibold); - font-size: $font-16px; - align-self: center; - } - - .mx_DecryptionFailureBar_start_message { - grid-area: message; - - color: $secondary-content; - } - } -} diff --git a/res/css/views/rooms/_ReplyPreview.pcss b/res/css/views/rooms/_ReplyPreview.pcss index 9e48e6656b..b80de710f6 100644 --- a/res/css/views/rooms/_ReplyPreview.pcss +++ b/res/css/views/rooms/_ReplyPreview.pcss @@ -29,16 +29,11 @@ Please see LICENSE files in the repository root for full details. font-weight: 400; opacity: 0.4; - .mx_ReplyPreview_header_cancel { - background-color: $primary-content; - mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; + .mx_ReplyPreview_header_cancel svg { + color: $primary-content; width: 20px; height: 20px; - min-width: 20px; - min-height: 20px; + flex-shrink: 0; } } } diff --git a/res/img/element-icons/room/settings/advanced.svg b/res/img/element-icons/room/settings/advanced.svg index 734ae543ea..2adbc7d3de 100644 --- a/res/img/element-icons/room/settings/advanced.svg +++ b/res/img/element-icons/room/settings/advanced.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 6447b0706b..52e5a87231 100644 --- 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 { className="mx_LeftPanel_dialPadButton" onClick={this.onDialPad} title={_t("left_panel|open_dial_pad")} - /> + > + + ); } @@ -358,7 +361,9 @@ export default class LeftPanel extends React.Component { className="mx_LeftPanel_exploreButton" onClick={this.onExplore} title={_t("action|explore_rooms")} - /> + > + + ); } diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 4d23475762..d9889342b1 100644 --- 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 { let buttonRow = ( <> - + + {_t("room|status_bar|delete_all")} + {_t("room|status_bar|retry_all")} diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 60fb26d3fd..997d86e0dc 100644 --- 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 = ( - + + {_t("action|retry")} ); diff --git a/src/components/structures/SearchBox.tsx b/src/components/structures/SearchBox.tsx index ec85314349..4f9c840cb6 100644 --- 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 { onClick={() => { this.clearSearch("button"); }} - /> + > + + ) : undefined; // show a shorter placeholder when blurred, if requested diff --git a/src/components/structures/TabbedView.tsx b/src/components/structures/TabbedView.tsx index 029226fc87..7b11b92e9c 100644 --- a/src/components/structures/TabbedView.tsx +++ b/src/components/structures/TabbedView.tsx @@ -26,7 +26,7 @@ export class Tab { * 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 { 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, diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx index 9931dd9368..6f60f56fdb 100644 --- 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, usersSection, ), ]; @@ -1440,9 +1441,7 @@ export default class InviteDialog extends React.PureComponent ); - 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"), , dialPadSection)); const consultConnectSection = (
diff --git a/src/components/views/dialogs/LeaveSpaceDialog.tsx b/src/components/views/dialogs/LeaveSpaceDialog.tsx index 7796bf4f61..37838292ff 100644 --- 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 = ({ space, onFinished }) => { /> )} - {onlyAdminWarning &&
{onlyAdminWarning}
} + {onlyAdminWarning && ( +
+ + {onlyAdminWarning} +
+ )}
= ({ room, selected = [], if (newSelected.size < 1) { inviteOnlyWarning = (
+ {_t("room_settings|security|join_rule_restricted_dialog_empty_warning")}
); @@ -183,7 +185,8 @@ const ManageRestrictedJoinRuleDialog: React.FC = ({ room, selected = [],

{_t("room_settings|security|join_rule_restricted_dialog_heading_other")}

-
{_t("room_settings|security|join_rule_restricted_dialog_heading_unknown")}
+ + {_t("room_settings|security|join_rule_restricted_dialog_heading_unknown")}
{filteredOtherEntries.map((space) => { return ( diff --git a/src/components/views/dialogs/RoomSettingsDialog.tsx b/src/components/views/dialogs/RoomSettingsDialog.tsx index 7e7a26ed2d..9881d96cd7 100644 --- 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 { new Tab( RoomSettingsTab.General, _td("common|general"), - "mx_RoomSettingsDialog_settingsIcon", + , , "RoomSettingsGeneral", ), @@ -139,7 +150,7 @@ class RoomSettingsDialog extends React.Component { new Tab( RoomSettingsTab.People, _td("common|people"), - "mx_RoomSettingsDialog_peopleIcon", + , , ), ); @@ -149,7 +160,7 @@ class RoomSettingsDialog extends React.Component { new Tab( RoomSettingsTab.Voip, _td("settings|voip|title"), - "mx_RoomSettingsDialog_voiceIcon", + , , ), ); @@ -158,7 +169,7 @@ class RoomSettingsDialog extends React.Component { new Tab( RoomSettingsTab.Security, _td("room_settings|security|title"), - "mx_RoomSettingsDialog_securityIcon", + , this.props.onFinished(true)} />, "RoomSettingsSecurityPrivacy", ), @@ -167,7 +178,7 @@ class RoomSettingsDialog extends React.Component { new Tab( RoomSettingsTab.Roles, _td("room_settings|permissions|title"), - "mx_RoomSettingsDialog_rolesIcon", + , , "RoomSettingsRolesPermissions", ), @@ -176,7 +187,7 @@ class RoomSettingsDialog extends React.Component { new Tab( RoomSettingsTab.Notifications, _td("notifications|enable_prompt_toast_title"), - "mx_RoomSettingsDialog_notificationsIcon", + , this.props.onFinished(true)} @@ -190,7 +201,7 @@ class RoomSettingsDialog extends React.Component { new Tab( RoomSettingsTab.Bridges, _td("room_settings|bridges|title"), - "mx_RoomSettingsDialog_bridgesIcon", + , , "RoomSettingsBridges", ), @@ -201,7 +212,7 @@ class RoomSettingsDialog extends React.Component { new Tab( RoomSettingsTab.PollHistory, _td("right_panel|polls_button"), - "mx_RoomSettingsDialog_pollsIcon", + , this.props.onFinished(true)} />, ), ); @@ -211,7 +222,7 @@ class RoomSettingsDialog extends React.Component { new Tab( RoomSettingsTab.Advanced, _td("common|advanced"), - "mx_RoomSettingsDialog_warningIcon", + , this.props.onFinished(true)} diff --git a/src/components/views/dialogs/SpacePreferencesDialog.tsx b/src/components/views/dialogs/SpacePreferencesDialog.tsx index 3bb3416524..69fa897ec3 100644 --- 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 = ({ space, onFinished }) => { new Tab( SpacePreferenceTab.Appearance, _td("common|appearance"), - "mx_SpacePreferencesDialog_appearanceIcon", + , , ), ]; diff --git a/src/components/views/dialogs/SpaceSettingsDialog.tsx b/src/components/views/dialogs/SpaceSettingsDialog.tsx index 797622a271..336dee0c87 100644 --- 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 = ({ matrixClient: cli, space, onFin new Tab( SpaceSettingsTab.General, _td("common|general"), - "mx_SpaceSettingsDialog_generalIcon", + , , ), new Tab( SpaceSettingsTab.Visibility, _td("room_settings|visibility|title"), - "mx_SpaceSettingsDialog_visibilityIcon", + , , ), new Tab( SpaceSettingsTab.Roles, _td("room_settings|permissions|title"), - "mx_RoomSettingsDialog_rolesIcon", + , , ), SettingsStore.getValue(UIFeature.AdvancedSettings) ? new Tab( SpaceSettingsTab.Advanced, _td("common|advanced"), - "mx_RoomSettingsDialog_warningIcon", + , , ) : null, diff --git a/src/components/views/elements/ExternalLink.tsx b/src/components/views/elements/ExternalLink.tsx index 0e3856e132..7b6d2852ee 100644 --- 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, HTMLAnchorElement> {} @@ -17,7 +18,7 @@ interface Props extends DetailedHTMLProps = ({ children, className, ...rest }) => ( {children} - + ); diff --git a/src/components/views/elements/JoinRuleDropdown.tsx b/src/components/views/elements/JoinRuleDropdown.tsx index 860b87fa00..ac94112f2b 100644 --- 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 = ({ }) => { const options = [
+ {labelInvite}
, ] as NonEmptyArray; @@ -44,6 +46,7 @@ const JoinRuleDropdown: React.FC = ({ options.push( (
+ {labelPublic}
) as ReactElement & { key: string }, @@ -65,6 +68,7 @@ const JoinRuleDropdown: React.FC = ({ options.unshift( (
+ {labelRestricted}
) as ReactElement & { key: string }, diff --git a/src/components/views/rooms/ReplyPreview.tsx b/src/components/views/rooms/ReplyPreview.tsx index db8f6f4a9e..13616b1fba 100644 --- 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 { cancelQuoting(this.context.timelineRenderingType)} - /> + > + +
diff --git a/test/unit-tests/__snapshots__/Terms-test.tsx.snap b/test/unit-tests/__snapshots__/Terms-test.tsx.snap index 27354299dc..7c1bbaa5c0 100644 --- a/test/unit-tests/__snapshots__/Terms-test.tsx.snap +++ b/test/unit-tests/__snapshots__/Terms-test.tsx.snap @@ -74,9 +74,21 @@ exports[`dialogTermsInteractionCallback should render a dialog with the expected target="_blank" > Terms - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + diff --git a/test/unit-tests/components/structures/TabbedView-test.tsx b/test/unit-tests/components/structures/TabbedView-test.tsx index 38349e288a..ac1996ec95 100644 --- a/test/unit-tests/components/structures/TabbedView-test.tsx +++ b/test/unit-tests/components/structures/TabbedView-test.tsx @@ -8,15 +8,16 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import { act, fireEvent, render } from "jest-matrix-react"; +import { SettingsSolidIcon, VisibilityOnIcon, LabsIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import TabbedView, { Tab, TabLocation } from "../../../../src/components/structures/TabbedView"; import { type NonEmptyArray } from "../../../../src/@types/common"; import { _t } from "../../../../src/languageHandler"; describe("", () => { - const generalTab = new Tab("GENERAL", "common|general", "general",
general
); - const labsTab = new Tab("LABS", "common|labs", "labs",
labs
); - const appearanceTab = new Tab("APPEARANCE", "common|appearance", "appearance",
appearance
); + const generalTab = new Tab("GENERAL", "common|general", ,
general
); + const labsTab = new Tab("LABS", "common|labs", ,
labs
); + const appearanceTab = new Tab("APPEARANCE", "common|appearance", ,
appearance
); const defaultProps = { tabLocation: TabLocation.LEFT, tabs: [generalTab, labsTab, appearanceTab] as NonEmptyArray>, diff --git a/test/unit-tests/components/structures/__snapshots__/RoomStatusBar-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/RoomStatusBar-test.tsx.snap index 6ff517c97d..78a5a19aed 100644 --- a/test/unit-tests/components/structures/__snapshots__/RoomStatusBar-test.tsx.snap +++ b/test/unit-tests/components/structures/__snapshots__/RoomStatusBar-test.tsx.snap @@ -33,9 +33,21 @@ exports[`RoomStatusBar unsent messages should render warning w target="_blank" > our terms and conditions - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + . @@ -50,10 +62,21 @@ exports[`RoomStatusBar unsent messages should render warning w class="mx_RoomStatusBar_unsentButtonBar" >
+ + + Delete all
unsent messages should render warning w role="button" tabindex="0" > + + + Retry all
@@ -106,10 +140,21 @@ exports[`RoomStatusBar unsent messages should render warning w class="mx_RoomStatusBar_unsentButtonBar" >
+ + + Delete all
unsent messages should render warning w role="button" tabindex="0" > + + + Retry all
diff --git a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap index ff0d232455..b7b3034415 100644 --- a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -218,10 +218,21 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`] class="mx_RoomStatusBar_unsentButtonBar" >
+ + + Retry
diff --git a/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap index 14143cccfa..fac0319a1a 100644 --- a/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap +++ b/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap @@ -17,7 +17,19 @@ exports[`SpaceHierarchy renders 1`] = ` class="mx_AccessibleButton mx_SearchBox_closeButton" role="button" tabindex="-1" - /> + > + + + +
should not render cycles 1`] = ` class="mx_AccessibleButton mx_SearchBox_closeButton" role="button" tabindex="-1" - /> + > + + + +
renders tabs 1`] = ` role="tab" tabindex="0" > - + + + renders tabs 1`] = ` role="tab" tabindex="-1" > - + + + + + renders tabs 1`] = ` role="tab" tabindex="-1" > - + + + Learn more - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + +
@@ -245,9 +257,21 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available target="_blank" > Learn more - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap index cacad8d47d..d7e41df814 100644 --- a/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap +++ b/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap @@ -83,6 +83,17 @@ exports[` for a private room should create a private room 1`
+ + + Private room (invite only)
@@ -309,6 +320,17 @@ exports[` for a private room should render not the advanced
+ + + Private room (invite only)
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap index aad267eeb2..dc954a45e7 100644 --- a/test/unit-tests/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap +++ b/test/unit-tests/components/views/dialogs/__snapshots__/FeedbackDialog-test.tsx.snap @@ -45,9 +45,21 @@ exports[`FeedbackDialog should respect feedback config 1`] = ` target="_blank" > existing bugs on Github - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + first. No match? Start a new one - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + . diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap index 63495b949d..e8a7773166 100644 --- a/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap +++ b/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap @@ -48,7 +48,19 @@ exports[` should list spaces which are not par class="mx_AccessibleButton mx_SearchBox_closeButton" role="button" tabindex="-1" - /> + > + + + +
should list spaces which are not par
+ + + You're removing all spaces. Access will default to invite only
should render empty state 1`] = ` class="mx_AccessibleButton mx_SearchBox_closeButton" role="button" tabindex="-1" - /> + > + + + +
should render empty state 1`] = `
+ + + You're removing all spaces. Access will default to invite only
- + + + - + + + - + + + - +
- + + + should render dialog 1`] = ` target="_blank" > About homeservers - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + +
renders link correctly 1`] = ` children - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + `; @@ -32,9 +44,21 @@ exports[` renders plain text link correctly 1`] = ` target="_blank" > test - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + `; diff --git a/test/unit-tests/components/views/settings/__snapshots__/EventIndexPanel-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/EventIndexPanel-test.tsx.snap index aab56e28f7..e26a581e6e 100644 --- a/test/unit-tests/components/views/settings/__snapshots__/EventIndexPanel-test.tsx.snap +++ b/test/unit-tests/components/views/settings/__snapshots__/EventIndexPanel-test.tsx.snap @@ -31,9 +31,21 @@ exports[` when event indexing is not supported renders link t target="_blank" > Element Desktop - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + for encrypted messages to appear in search results. @@ -55,9 +67,21 @@ exports[` when event indexing is supported but not installed target="_blank" > search components added - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + . diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap index 146277e9f2..2bf0bb846c 100644 --- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap +++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap @@ -145,9 +145,21 @@ exports[` renders security section 1`] = ` target="_blank" > Element Desktop - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + for encrypted messages to appear in search results. diff --git a/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap index 36ebccb871..0019095223 100644 --- a/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap +++ b/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap @@ -75,7 +75,19 @@ exports[` looks as expected 1`] = ` class="mx_AccessibleButton mx_SearchBox_closeButton" role="button" tabindex="-1" - /> + > + + + +
homeserver's SSL certificate - + fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + is trusted, and that a browser extension is not blocking requests.