diff --git a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png index bb9b2c49a5..48f81bd7f9 100644 Binary files a/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png and b/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png differ diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss index cd5cff94a0..72c0ef9cff 100644 --- a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss +++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss @@ -118,23 +118,11 @@ Please see LICENSE files in the repository root for full details. padding: 8px 36px; } - .mx_AddExistingToSpace_retryButton { - margin-left: 12px; - padding-left: 24px; - position: relative; - - &::before { - content: ""; - position: absolute; - background-color: $primary-content; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg"); - width: 18px; - height: 18px; - left: 0; - } + .mx_AddExistingToSpaceDialog_retryButton svg { + color: $primary-content; + width: 18px; + height: 18px; + margin-right: var(--cpd-space-2x); } } } @@ -185,25 +173,17 @@ Please see LICENSE files in the repository root for full details. } } - .mx_Dropdown_menu { - .mx_SubspaceSelector_dropdownOptionActive { - color: $accent; - padding-right: 32px; - position: relative; + .mx_SubspaceSelector_dropdownOptionActive { + color: $accent; + padding-right: 24px; + position: relative; - &::before { - content: ""; - width: 20px; - height: 20px; - top: 8px; - right: 0; - position: absolute; - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background-color: $accent; - mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); - } + svg { + width: 20px; + height: 20px; + right: 0; + position: absolute; + color: $accent; } } } @@ -225,7 +205,8 @@ Please see LICENSE files in the repository root for full details. margin-bottom: auto; } - .mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ { + /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ + .mx_DecoratedRoomAvatar { margin-right: 12px; } diff --git a/res/css/views/elements/_Field.pcss b/res/css/views/elements/_Field.pcss index 90cb176251..dc9f287398 100644 --- a/res/css/views/elements/_Field.pcss +++ b/res/css/views/elements/_Field.pcss @@ -47,20 +47,14 @@ Please see LICENSE files in the repository root for full details. text-overflow: ellipsis; } -/* Can't add pseudo-elements to a select directly, so we use its parent. */ -.mx_Field_select::before { - content: ""; +.mx_Field_select_chevron { position: absolute; top: 50%; transform: translateY(-50%); right: 4px; width: 18px; height: 18px; - mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - background-color: $primary-content; + color: $primary-content; z-index: 1; pointer-events: none; } diff --git a/res/css/views/rooms/_NotificationBadge.pcss b/res/css/views/rooms/_NotificationBadge.pcss index 5f76d82bfa..223e6acbf8 100644 --- a/res/css/views/rooms/_NotificationBadge.pcss +++ b/res/css/views/rooms/_NotificationBadge.pcss @@ -55,8 +55,7 @@ Please see LICENSE files in the repository root for full details. background-color: var(--cpd-color-icon-critical-primary); } - &.mx_NotificationBadge_knocked { - mask-image: url("@vector-im/compound-design-tokens/icons/ask-to-join.svg"); + & > svg { width: 16px; height: 16px; } diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss index 5ae0d5854c..f21b83b0fe 100644 --- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss +++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss @@ -13,4 +13,8 @@ Please see LICENSE files in the repository root for full details. display: flex; align-items: center; column-gap: $spacing-4; + + svg { + color: #ff0064; /* Match legacy icon colour until redesign */ + } } diff --git a/res/img/element-icons/collapse-message.svg b/res/img/element-icons/collapse-message.svg deleted file mode 100644 index da8bfb76b6..0000000000 --- a/res/img/element-icons/collapse-message.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/img/element-icons/expand-message.svg b/res/img/element-icons/expand-message.svg deleted file mode 100644 index c3abd0c471..0000000000 --- a/res/img/element-icons/expand-message.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/img/element-icons/settings/desktop.svg b/res/img/element-icons/settings/desktop.svg deleted file mode 100644 index 7d6ca10079..0000000000 --- a/res/img/element-icons/settings/desktop.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/settings/mobile.svg b/res/img/element-icons/settings/mobile.svg deleted file mode 100644 index 45170b2c15..0000000000 --- a/res/img/element-icons/settings/mobile.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/settings/unknown-device.svg b/res/img/element-icons/settings/unknown-device.svg deleted file mode 100644 index c02c2eadf5..0000000000 --- a/res/img/element-icons/settings/unknown-device.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/settings/web.svg b/res/img/element-icons/settings/web.svg deleted file mode 100644 index 95bd1ba24e..0000000000 --- a/res/img/element-icons/settings/web.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/warning.svg b/res/img/warning.svg deleted file mode 100644 index b9a96a88e5..0000000000 --- a/res/img/warning.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx index 4b6d031967..d60e3edab6 100644 --- a/src/components/views/dialogs/AddExistingToSpaceDialog.tsx +++ b/src/components/views/dialogs/AddExistingToSpaceDialog.tsx @@ -12,7 +12,7 @@ import { type Room, EventType } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; import { sleep } from "matrix-js-sdk/src/utils"; import { logger } from "matrix-js-sdk/src/logger"; -import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { CheckIcon, ErrorIcon, RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t, _td } from "../../../languageHandler"; import BaseDialog from "./BaseDialog"; @@ -241,6 +241,7 @@ export const AddExistingToSpace: React.FC = ({ + {_t("action|retry")} @@ -424,6 +425,7 @@ export const SubspaceSelector: React.FC = ({ title, spac
{space.name || getDisplayAliasForRoom(space) || space.roomId} + {space === value ? : null}
); }) as NonEmptyArray diff --git a/src/components/views/elements/AppWarning.tsx b/src/components/views/elements/AppWarning.tsx index 9f8a26e6cd..0e500c5bb1 100644 --- a/src/components/views/elements/AppWarning.tsx +++ b/src/components/views/elements/AppWarning.tsx @@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; - -import WarningSvg from "../../../../res/img/warning.svg"; +import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; interface IProps { errorMsg?: string; @@ -18,7 +17,7 @@ const AppWarning: React.FC = (props) => { return (
- +
{props.errorMsg || "Error"} diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx index 2d57d1772b..71e6d91f68 100644 --- a/src/components/views/elements/Field.tsx +++ b/src/components/views/elements/Field.tsx @@ -19,6 +19,7 @@ import React, { import classNames from "classnames"; import { debounce } from "lodash"; import { Tooltip } from "@vector-im/compound-web"; +import { ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { type IFieldState, type IValidationResult } from "./Validation"; @@ -326,6 +327,11 @@ export default class Field extends React.PureComponent { mx_Field_invalid: hasValidationFlag ? !forceValidity : onValidate && this.state.valid === false, }); + let inputDecoration: JSX.Element | undefined; + if (this.props.element === "select") { + inputDecoration = ; + } + return (
{prefixContainer} @@ -340,6 +346,7 @@ export default class Field extends React.PureComponent { {fieldInput} + {inputDecoration} {postfixContainer}
); diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 788a93c813..b9c8552978 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -15,6 +15,7 @@ import { logger } from "matrix-js-sdk/src/logger"; import { ClientEvent } from "matrix-js-sdk/src/matrix"; import { type ImageContent } from "matrix-js-sdk/src/types"; import { Tooltip } from "@vector-im/compound-web"; +import { ImageErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import MFileBody from "./MFileBody"; import Modal from "../../../Modal"; @@ -674,7 +675,11 @@ export class MImageBodyInner extends React.Component { errorText = _t("timeline|m.image|error_downloading"); } - return {errorText}; + return ( + + {errorText} + + ); } let contentUrl = this.state.contentUrl; diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index 22f29e963f..80b0939a71 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -32,10 +32,10 @@ import { ThreadsIcon, EditIcon, ReactionAddIcon, + ExpandIcon, + CollapseIcon, } from "@vector-im/compound-design-tokens/assets/web/icons"; -import { Icon as ExpandMessageIcon } from "../../../../res/img/element-icons/expand-message.svg"; -import { Icon as CollapseMessageIcon } from "../../../../res/img/element-icons/collapse-message.svg"; import { _t } from "../../../languageHandler"; import defaultDispatcher from "../../../dispatcher/dispatcher"; import ContextMenu, { aboveLeftOf, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu"; @@ -572,7 +572,7 @@ export default class MessageActionBar extends React.PureComponent - {this.props.isQuoteExpanded ? : } + {this.props.isQuoteExpanded ? : } , ); } diff --git a/src/components/views/messages/shared/MediaProcessingError.tsx b/src/components/views/messages/shared/MediaProcessingError.tsx index 95a65b4538..13e63a2275 100644 --- a/src/components/views/messages/shared/MediaProcessingError.tsx +++ b/src/components/views/messages/shared/MediaProcessingError.tsx @@ -7,17 +7,17 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; - -import { Icon as WarningIcon } from "../../../../../res/img/warning.svg"; +import { FileErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; interface Props { className?: string; + Icon?: typeof FileErrorIcon; children: React.ReactNode; } -const MediaProcessingError: React.FC = ({ className, children }) => ( +const MediaProcessingError: React.FC = ({ className, children, Icon = FileErrorIcon }) => ( - + {children} ); diff --git a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx index 8e44a0a3b9..c217f71258 100644 --- a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx +++ b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx @@ -8,12 +8,14 @@ Please see LICENSE files in the repository root for full details. import React, { type Ref, type JSX, type ReactNode } from "react"; import classNames from "classnames"; +import { AskToJoinIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { formatCount } from "../../../../utils/FormattingUtils"; import AccessibleButton, { type ButtonEvent } from "../../elements/AccessibleButton"; import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel"; import { useSettingValue } from "../../../../hooks/useSettings"; import { type XOR } from "../../../../@types/common"; +import { _t } from "../../../../languageHandler.tsx"; interface Props { symbol: string | null; @@ -70,11 +72,16 @@ export const StatelessNotificationBadge = ({ symbol = formatCount(count); } + let icon: JSX.Element | undefined; + if (knocked) { + icon = ; + } + // We show a dot if either: // * The props force us to, or // * It's just an activity-level notification or (in theory) lower and the room isn't knocked const badgeType = - forceDot || (level <= NotificationLevel.Activity && !knocked) + forceDot || (level <= NotificationLevel.Activity && !icon) ? "dot" : !symbol || symbol.length < 3 ? "badge_2char" @@ -95,10 +102,12 @@ export const StatelessNotificationBadge = ({ "cpd-theme-light": badgeType !== "dot", }); + const content = icon || {symbol}; + if (props.onClick) { return ( - {symbol} + {content} {props.children} ); @@ -106,7 +115,7 @@ export const StatelessNotificationBadge = ({ return (
- {symbol} + {content}
); }; diff --git a/src/components/views/settings/devices/DeviceTypeIcon.tsx b/src/components/views/settings/devices/DeviceTypeIcon.tsx index 35db504682..836a2a2da8 100644 --- a/src/components/views/settings/devices/DeviceTypeIcon.tsx +++ b/src/components/views/settings/devices/DeviceTypeIcon.tsx @@ -8,12 +8,15 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import classNames from "classnames"; -import { ShieldIcon, ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { + ShieldIcon, + ErrorSolidIcon, + ComputerIcon, + MobileIcon, + WebBrowserIcon, + DevicesIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; -import { Icon as UnknownDeviceIcon } from "../../../../../res/img/element-icons/settings/unknown-device.svg"; -import { Icon as DesktopIcon } from "../../../../../res/img/element-icons/settings/desktop.svg"; -import { Icon as WebIcon } from "../../../../../res/img/element-icons/settings/web.svg"; -import { Icon as MobileIcon } from "../../../../../res/img/element-icons/settings/mobile.svg"; import { _t, _td } from "../../../../languageHandler"; import { type ExtendedDevice } from "./types"; import { DeviceType } from "../../../../utils/device/parseUserAgent"; @@ -25,10 +28,10 @@ interface Props { } const deviceTypeIcon: Record>> = { - [DeviceType.Desktop]: DesktopIcon, + [DeviceType.Desktop]: ComputerIcon, [DeviceType.Mobile]: MobileIcon, - [DeviceType.Web]: WebIcon, - [DeviceType.Unknown]: UnknownDeviceIcon, + [DeviceType.Web]: WebBrowserIcon, + [DeviceType.Unknown]: DevicesIcon, }; const deviceTypeLabel: Record = { [DeviceType.Desktop]: _td("settings|sessions|desktop_session"), diff --git a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index 17ea6470fe..15ca6e9788 100644 --- a/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -18,8 +18,8 @@ import { } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { Form, InlineSpinner, SettingsToggleInput } from "@vector-im/compound-web"; +import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; -import { Icon as WarningIcon } from "../../../../../../res/img/warning.svg"; import { _t } from "../../../../../languageHandler"; import Modal from "../../../../../Modal"; import QuestionDialog from "../../../dialogs/QuestionDialog"; diff --git a/src/vector/index.html b/src/vector/index.html index 84f334554d..15dfcc7303 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -66,7 +66,6 @@ %> - diff --git a/src/vector/jitsi/index.html b/src/vector/jitsi/index.html index 7b60e6a22b..8570e1ded0 100644 --- a/src/vector/jitsi/index.html +++ b/src/vector/jitsi/index.html @@ -9,7 +9,7 @@
- + <%= require('!!raw-loader!@vector-im/compound-design-tokens/icons/video-call-solid.svg').default %>

Jitsi Video Conference

diff --git a/src/vector/jitsi/index.pcss b/src/vector/jitsi/index.pcss index 9dfbd1796f..8bb4b508a0 100644 --- a/src/vector/jitsi/index.pcss +++ b/src/vector/jitsi/index.pcss @@ -89,25 +89,18 @@ html { cursor: pointer; } -.icon { +.joinConferencePrompt svg { $icon-size: 42px; - margin-top: -$icon-size; /* to visually center the form */ + /* to visually center the form */ + margin: -$icon-size auto 0; - &::before { - content: ""; - background-size: contain; - background-color: $dark-fg; - mask-repeat: no-repeat; - mask-position: center; - mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); - mask-size: $icon-size; - display: block; - width: $icon-size; - height: $icon-size; - margin: 0 auto; /* center */ - } + color: $dark-fg; + mask-size: $icon-size; + display: block; + width: $icon-size; + height: $icon-size; } -body.theme-light .icon::before { - background-color: $light-fg; +body.theme-light .joinConferencePrompt svg { + color: $light-fg; } diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap index fd3ec6425c..9a337ebfb4 100644 --- a/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap +++ b/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap @@ -125,6 +125,18 @@ exports[` renders export dialog 1`] = `
+ + +

Voters see results as soon as they have voted @@ -263,6 +275,18 @@ exports[`PollCreateDialog renders a question and some options 1`] = `

Voters see results as soon as they have voted @@ -502,6 +526,18 @@ exports[`PollCreateDialog renders info from a previous event 1`] = `

Voters see results as soon as they have voted diff --git a/test/unit-tests/components/views/messages/MessageActionBar-test.tsx b/test/unit-tests/components/views/messages/MessageActionBar-test.tsx index cab8dd4c11..e44e25d78d 100644 --- a/test/unit-tests/components/views/messages/MessageActionBar-test.tsx +++ b/test/unit-tests/components/views/messages/MessageActionBar-test.tsx @@ -536,4 +536,29 @@ describe("", () => { await waitFor(() => expect(screen.getByLabelText("Unpin")).toBeInTheDocument()); }); }); + + describe("expand/collapse quote buttons", () => { + it.each([ + ["expand", false], + ["collapse", true], + ])("should render %s", (state, value) => { + const { getByLabelText } = getComponent({ + mxEvent: new MatrixEvent({ + type: EventType.RoomMessage, + sender: userId, + room_id: roomId, + content: { + "msgtype": MsgType.Text, + "body": "Hello", + "m.relates_to": { + "m.in_reply_to": { event_id: alicesMessageEvent.getId() }, + }, + }, + event_id: "$alices_reply", + }), + isQuoteExpanded: value, + }); + expect(getByLabelText(`${state[0].toUpperCase()}${state.slice(1)} quotes`)).toBeInTheDocument(); + }); + }); }); diff --git a/test/unit-tests/components/views/messages/shared/__snapshots__/MediaProcessingError-test.tsx.snap b/test/unit-tests/components/views/messages/shared/__snapshots__/MediaProcessingError-test.tsx.snap index f890c7228e..dd5c67cbf1 100644 --- a/test/unit-tests/components/views/messages/shared/__snapshots__/MediaProcessingError-test.tsx.snap +++ b/test/unit-tests/components/views/messages/shared/__snapshots__/MediaProcessingError-test.tsx.snap @@ -5,11 +5,21 @@ exports[` renders 1`] = ` -

+ xmlns="http://www.w3.org/2000/svg" + > + + + Something went wrong
diff --git a/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap b/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap index 32f1ed1f0e..f7fc1dfc99 100644 --- a/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap +++ b/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap @@ -39,6 +39,18 @@ exports[` should display the defaut values 1`] = ` > Power level + + +
diff --git a/test/unit-tests/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx b/test/unit-tests/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx index 4b335cb631..e6495b78b8 100644 --- a/test/unit-tests/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx +++ b/test/unit-tests/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx @@ -25,7 +25,7 @@ describe("StatelessNotificationBadge", () => { , ); expect(container.querySelector(".mx_NotificationBadge_dot")).not.toBeInTheDocument(); - expect(container.querySelector(".mx_NotificationBadge_knocked")).toBeInTheDocument(); + expect(container.querySelector("svg")).toHaveAccessibleName("Request to join sent"); }); it("has dot style for activity", () => { diff --git a/test/unit-tests/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap index 772ab01eeb..b0916269c8 100644 --- a/test/unit-tests/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap +++ b/test/unit-tests/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap @@ -128,6 +128,18 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = ` > Font size + + +
@userId:matrix.org + + +