diff --git a/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png b/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png index 25380a74b2..1387ef062d 100644 Binary files a/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png and b/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png differ diff --git a/playwright/snapshots/register/register.spec.ts/registration-linux.png b/playwright/snapshots/register/register.spec.ts/registration-linux.png index ab9fdb2bf6..bac041646a 100644 Binary files a/playwright/snapshots/register/register.spec.ts/registration-linux.png and b/playwright/snapshots/register/register.spec.ts/registration-linux.png differ diff --git a/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png index 30436d0abc..913ccf9839 100644 Binary files a/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png and b/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png index bceaa4a283..a30e9969b6 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png index bf47c91388..ef855a2da2 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ diff --git a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png index 01a6c6089b..9f34ba19e3 100644 Binary files a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png index 31a7ed42f1..082650056f 100644 Binary files a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-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 d2852b7c0f..e858838ab9 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/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png index 26f5bfdfa9..7d8fccd672 100644 Binary files a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png and b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png differ diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 05a3dac067..15ba02b6b8 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -186,7 +186,7 @@ input[type="search"].mx_textinput_icon { /* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */ input[type="text"].mx_textinput_icon.mx_textinput_search, input[type="search"].mx_textinput_icon.mx_textinput_search { - background-image: url("$(res)/img/feather-customised/search-input.svg"); + background-image: url("@vector-im/compound-design-tokens/icons/search.svg"); } /* dont search UI as not all browsers support it, */ diff --git a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss index de5d0bc5e6..8ad786c4ba 100644 --- a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss +++ b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss @@ -32,8 +32,8 @@ Please see LICENSE files in the repository root for full details. } .mx_DeviceExpandDetailsButton_icon { - height: 16px; - width: 16px; + height: 24px; + width: 24px; transition: all 0.3s; transform: var(--icon-transform); diff --git a/res/css/structures/_GenericDropdownMenu.pcss b/res/css/structures/_GenericDropdownMenu.pcss index d58c29f81a..bf0098b4ed 100644 --- a/res/css/structures/_GenericDropdownMenu.pcss +++ b/res/css/structures/_GenericDropdownMenu.pcss @@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details. width: 18px; height: 18px; background: currentColor; - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); mask-size: 100%; mask-repeat: no-repeat; float: right; diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index 359f67c803..eaa02cd2d2 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details. &::before { background-color: $info-plinth-fg-color; - mask: url("$(res)/img/feather-customised/search-input.svg"); + mask: url("@vector-im/compound-design-tokens/icons/search.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: 50px; diff --git a/res/css/structures/_SpaceHierarchy.pcss b/res/css/structures/_SpaceHierarchy.pcss index 812b5474a3..ccbeef0734 100644 --- a/res/css/structures/_SpaceHierarchy.pcss +++ b/res/css/structures/_SpaceHierarchy.pcss @@ -121,7 +121,7 @@ Please see LICENSE files in the repository root for full details. background-color: $tertiary-content; mask-size: 16px; transform: rotate(270deg); - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); } &.mx_SpaceHierarchy_subspace_toggle_shown::before { diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index 7875e62973..668dde945a 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -48,7 +48,7 @@ Please see LICENSE files in the repository root for full details. mask-size: contain; mask-repeat: no-repeat; background-color: $background; - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); transform: rotate(270deg); } @@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details. mask-size: 20px; mask-repeat: no-repeat; background-color: $tertiary-content; - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); } .mx_SpaceButton_icon { diff --git a/res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss b/res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss index 01d69b0385..456b28d88a 100644 --- a/res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss +++ b/res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss @@ -36,9 +36,24 @@ Please see LICENSE files in the repository root for full details. } .mx_AnalyticsLearnMore_bullets li { - background: url("$(res)/img/tick-circle.svg") no-repeat; list-style-type: none; - padding: 2px 0px 20px 32px; + padding: 2px 0 0 32px; + margin-bottom: 20px; vertical-align: middle; + position: relative; + + &::before { + content: ""; + position: absolute; + width: 26px; + height: 26px; + left: 0; + top: 0; + background-color: #0dbd8b; + mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg"); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } } } diff --git a/res/css/views/elements/_Dropdown.pcss b/res/css/views/elements/_Dropdown.pcss index 7a3ebb9c29..b91af285fd 100644 --- a/res/css/views/elements/_Dropdown.pcss +++ b/res/css/views/elements/_Dropdown.pcss @@ -39,11 +39,13 @@ Please see LICENSE files in the repository root for full details. } .mx_Dropdown_arrow { - width: 10px; - height: 6px; - padding-right: 9px; - mask: url("$(res)/img/feather-customised/dropdown-arrow.svg"); + width: 16px; + height: 16px; + margin-right: 4px; + mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); mask-repeat: no-repeat; + mask-position: center; + mask-size: 18px; background: $primary-content; } diff --git a/res/css/views/elements/_Field.pcss b/res/css/views/elements/_Field.pcss index 2659c4d389..21a0a0208a 100644 --- a/res/css/views/elements/_Field.pcss +++ b/res/css/views/elements/_Field.pcss @@ -51,12 +51,15 @@ Please see LICENSE files in the repository root for full details. .mx_Field_select::before { content: ""; position: absolute; - top: 15px; - right: 10px; - width: 10px; - height: 6px; - mask: url("$(res)/img/feather-customised/dropdown-arrow.svg"); + 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; z-index: 1; pointer-events: none; diff --git a/res/css/views/messages/_DateSeparator.pcss b/res/css/views/messages/_DateSeparator.pcss index 7bbf465f55..aa6f88eaaa 100644 --- a/res/css/views/messages/_DateSeparator.pcss +++ b/res/css/views/messages/_DateSeparator.pcss @@ -30,6 +30,6 @@ Please see LICENSE files in the repository root for full details. mask-position: center; mask-size: contain; mask-repeat: no-repeat; - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); background-color: var(--cpd-color-icon-secondary); } diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss index a9743d945b..93efded304 100644 --- a/res/css/views/right_panel/_ThreadPanel.pcss +++ b/res/css/views/right_panel/_ThreadPanel.pcss @@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details. width: 18px; height: 18px; background: currentColor; - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); mask-size: 100%; mask-repeat: no-repeat; float: right; diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss index 0deb3d3708..d381d03867 100644 --- a/res/css/views/right_panel/_UserInfo.pcss +++ b/res/css/views/right_panel/_UserInfo.pcss @@ -26,9 +26,9 @@ Please see LICENSE files in the repository root for full details. height: 16px; width: 16px; padding: 4px; - mask-image: url("$(res)/img/minimise.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-left.svg"); mask-repeat: no-repeat; - mask-position: 7px center; + mask-position: center; background-color: $header-panel-text-primary-color; } } diff --git a/res/css/views/rooms/_LinkPreviewGroup.pcss b/res/css/views/rooms/_LinkPreviewGroup.pcss index e540c149b6..751a394c44 100644 --- a/res/css/views/rooms/_LinkPreviewGroup.pcss +++ b/res/css/views/rooms/_LinkPreviewGroup.pcss @@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details. } } - &:hover .mx_LinkPreviewGroup_hide img, + &:hover .mx_LinkPreviewGroup_hide svg, .mx_LinkPreviewGroup_hide:focus-visible:focus svg { visibility: visible; } diff --git a/res/css/views/rooms/_RoomListHeader.pcss b/res/css/views/rooms/_RoomListHeader.pcss index 07aa1cbf5b..6fbd2a38db 100644 --- a/res/css/views/rooms/_RoomListHeader.pcss +++ b/res/css/views/rooms/_RoomListHeader.pcss @@ -42,7 +42,7 @@ Please see LICENSE files in the repository root for full details. mask-size: contain; mask-repeat: no-repeat; background-color: $tertiary-content; - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); } &[aria-expanded="true"] { diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss index d4d6f05719..a804134430 100644 --- a/res/css/views/rooms/_RoomSublist.pcss +++ b/res/css/views/rooms/_RoomSublist.pcss @@ -160,7 +160,7 @@ Please see LICENSE files in the repository root for full details. mask-size: contain; mask-repeat: no-repeat; background-color: var(--cpd-color-icon-secondary); - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); } &.mx_RoomSublist_collapseBtn_collapsed::before { @@ -276,7 +276,7 @@ Please see LICENSE files in the repository root for full details. .mx_RoomSublist_showMoreButtonChevron, .mx_RoomSublist_showLessButtonChevron { - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); } .mx_RoomSublist_showLessButtonChevron { diff --git a/res/css/views/spaces/_SpaceCreateMenu.pcss b/res/css/views/spaces/_SpaceCreateMenu.pcss index e501852e29..763807d48d 100644 --- a/res/css/views/spaces/_SpaceCreateMenu.pcss +++ b/res/css/views/spaces/_SpaceCreateMenu.pcss @@ -67,7 +67,7 @@ Please see LICENSE files in the repository root for full details. mask-repeat: no-repeat; mask-position: 2px 3px; mask-size: 24px; - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); } } diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss index 7cb7925cd8..6a6f975710 100644 --- a/res/css/views/voip/_CallView.pcss +++ b/res/css/views/voip/_CallView.pcss @@ -147,7 +147,7 @@ Please see LICENSE files in the repository root for full details. &::before { content: ""; display: inline-block; - mask-image: url("$(res)/img/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); mask-size: 20px; mask-position: center; background-color: $call-primary-content; diff --git a/res/img/feather-customised/chevron-down.svg b/res/img/feather-customised/chevron-down.svg deleted file mode 100644 index a091913b42..0000000000 --- a/res/img/feather-customised/chevron-down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/feather-customised/search-input.svg b/res/img/feather-customised/search-input.svg deleted file mode 100644 index 028b84d559..0000000000 --- a/res/img/feather-customised/search-input.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/res/img/minimise.svg b/res/img/minimise.svg deleted file mode 100644 index eecf181f61..0000000000 --- a/res/img/minimise.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - minimise - Created with sketchtool. - - - - - - - - - - - - - diff --git a/res/img/tick-circle.svg b/res/img/tick-circle.svg deleted file mode 100644 index 7cedb62985..0000000000 --- a/res/img/tick-circle.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx index d99a2e5d31..e7839b71da 100644 --- a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx +++ b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx @@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details. import classNames from "classnames"; import React, { ComponentProps } from "react"; +import { ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; -import { Icon as CaretIcon } from "../../../../../res/img/feather-customised/dropdown-arrow.svg"; import { _t } from "../../../../languageHandler"; import AccessibleButton from "../../elements/AccessibleButton"; @@ -38,7 +38,7 @@ export const DeviceExpandDetailsButton = })} onClick={onClick} > - + ); }; diff --git a/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap index 5e7b8c2ae8..74a0fb919b 100644 --- a/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap +++ b/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap @@ -263,9 +263,18 @@ exports[` renders device and correct security card when role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
@@ -416,9 +425,18 @@ exports[` renders device and correct security card when role="button" tabindex="0" > -
+ 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/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap b/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap index 5878dc11ee..5032bd2a64 100644 --- a/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap +++ b/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceExpandDetailsButton-test.tsx.snap @@ -9,9 +9,18 @@ exports[` renders when expanded 1`] = ` role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
, } @@ -26,9 +35,18 @@ exports[` renders when not expanded 1`] = ` role="button" tabindex="0" > -
+ 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__/SessionManagerTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap index 2c868f92e6..38f9e483c8 100644 --- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap +++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap @@ -163,9 +163,18 @@ exports[` current session section renders current session s role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
@@ -302,9 +311,18 @@ exports[` current session section renders current session s role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +