diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png index 0e57ae9995..94d6b79f1e 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png differ diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png index 154f94a247..9a888fb65c 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png differ diff --git a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png index 198e4dfe08..1c88bb4c1f 100644 Binary files a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png and b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png differ diff --git a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png index 66a6d79b53..458c6469f1 100644 Binary files a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png and b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png differ diff --git a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png index 8d89b18087..7bfa3229ed 100644 Binary files a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png and b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png differ diff --git a/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png b/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png index ec4a0f030c..702dab55f9 100644 Binary files a/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png and b/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png differ diff --git a/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png b/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png index bbf74913ab..d1f28308f1 100644 Binary files a/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png and b/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png differ diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png index ea9e428244..e514751f25 100644 Binary files a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png index 49f2c0bad8..a0c833115c 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png differ diff --git a/res/css/components/views/context_menus/_KebabContextMenu.pcss b/res/css/components/views/context_menus/_KebabContextMenu.pcss index 26db2552a7..21136d01e3 100644 --- a/res/css/components/views/context_menus/_KebabContextMenu.pcss +++ b/res/css/components/views/context_menus/_KebabContextMenu.pcss @@ -8,5 +8,6 @@ Please see LICENSE files in the repository root for full details. .mx_KebabContextMenu_icon { width: 24px; + height: 24px; color: $icon-button-color; } diff --git a/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss b/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss index 15da6dc9a5..0b31b700e2 100644 --- a/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss +++ b/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss @@ -12,8 +12,8 @@ Please see LICENSE files in the repository root for full details. } .mx_PollDetailHeader_icon { - height: 15px; - width: 15px; + height: 16px; + width: 16px; margin-right: $spacing-8; vertical-align: middle; } diff --git a/res/css/components/views/location/_ShareDialogButtons.pcss b/res/css/components/views/location/_ShareDialogButtons.pcss index 31630bb1e9..947ac1de1c 100644 --- a/res/css/components/views/location/_ShareDialogButtons.pcss +++ b/res/css/components/views/location/_ShareDialogButtons.pcss @@ -40,6 +40,7 @@ Please see LICENSE files in the repository root for full details. } .mx_ShareDialogButtons_button-icon { - height: 10px; - margin-top: 3px; + width: 20px; + height: 20px; + margin: 2px; } diff --git a/res/css/components/views/polls/_PollOption.pcss b/res/css/components/views/polls/_PollOption.pcss index a0656c1eb5..4ef6c22522 100644 --- a/res/css/components/views/polls/_PollOption.pcss +++ b/res/css/components/views/polls/_PollOption.pcss @@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details. border-width: 2px; border-color: var(--cpd-color-icon-accent-tertiary); background-color: var(--cpd-color-icon-accent-tertiary); - background-image: url("$(res)/img/element-icons/check-white.svg"); + background-image: url("@vector-im/compound-design-tokens/icons/check.svg"); background-size: 12px; background-repeat: no-repeat; background-position: center; diff --git a/res/css/structures/_SpaceHierarchy.pcss b/res/css/structures/_SpaceHierarchy.pcss index 089b0dab12..d91d5b8d9b 100644 --- a/res/css/structures/_SpaceHierarchy.pcss +++ b/res/css/structures/_SpaceHierarchy.pcss @@ -211,7 +211,7 @@ Please see LICENSE files in the repository root for full details. mask-size: contain; mask-repeat: no-repeat; background-color: $accent; - mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); } } } diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index e4cda39a38..f3bd82cc96 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -258,7 +258,7 @@ 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/element-icons/context-menu.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); background: $primary-content; } } diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss index d42c928239..f57237223f 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.pcss +++ b/res/css/views/context_menus/_IconizedContextMenu.pcss @@ -160,7 +160,7 @@ Please see LICENSE files in the repository root for full details. } .mx_IconizedContextMenu_checked::before { - mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); } .mx_IconizedContextMenu_unchecked::before { diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss index 9002a3229c..268280f08d 100644 --- a/res/css/views/context_menus/_MessageContextMenu.pcss +++ b/res/css/views/context_menus/_MessageContextMenu.pcss @@ -49,7 +49,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageContextMenu_iconEndPoll::before { - mask-image: url("$(res)/img/element-icons/check-white.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); } .mx_MessageContextMenu_iconForward::before { @@ -81,12 +81,10 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageContextMenu_iconCopy::before { - height: 12px; - left: 2px; + height: 16px; mask-image: url($copy-button-url); position: relative; - width: 12px; - top: 3px; + width: 16px; } .mx_MessageContextMenu_iconEdit::before { diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss index 06005d5a0b..6ac9bc3975 100644 --- a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss +++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss @@ -197,7 +197,7 @@ Please see LICENSE files in the repository root for full details. mask-size: contain; mask-repeat: no-repeat; background-color: $accent; - mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); } } } diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss index 102abed58f..2f0a548e55 100644 --- a/res/css/views/dialogs/_SpotlightDialog.pcss +++ b/res/css/views/dialogs/_SpotlightDialog.pcss @@ -121,14 +121,12 @@ Please see LICENSE files in the repository root for full details. content: ""; mask-repeat: no-repeat; mask-position: center; - mask-size: contain; - width: 8px; - height: 8px; + mask-size: 14px; + width: inherit; + height: inherit; position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - mask-image: url("$(res)/img/cancel-small.svg"); + left: 0; + mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); } } } @@ -358,7 +356,7 @@ Please see LICENSE files in the repository root for full details. } .mx_SpotlightDialog_option--menu::before { - mask-image: url("$(res)/img/element-icons/context-menu.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); } &:hover, diff --git a/res/css/views/directory/_NetworkDropdown.pcss b/res/css/views/directory/_NetworkDropdown.pcss index 0f94220b50..df82d17555 100644 --- a/res/css/views/directory/_NetworkDropdown.pcss +++ b/res/css/views/directory/_NetworkDropdown.pcss @@ -64,14 +64,14 @@ Please see LICENSE files in the repository root for full details. content: ""; mask-repeat: no-repeat; mask-position: center; - mask-size: contain; - width: 8px; - height: 8px; + mask-size: 14px; + width: inherit; + height: inherit; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); - mask-image: url("$(res)/img/cancel-small.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); } } diff --git a/res/css/views/elements/_FacePile.pcss b/res/css/views/elements/_FacePile.pcss index e278848c25..b063f5900e 100644 --- a/res/css/views/elements/_FacePile.pcss +++ b/res/css/views/elements/_FacePile.pcss @@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details. mask-position: center; mask-size: 20px; mask-repeat: no-repeat; - mask-image: url("$(res)/img/element-icons/room/ellipsis.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); } } diff --git a/res/css/views/elements/_TagComposer.pcss b/res/css/views/elements/_TagComposer.pcss index 92821e827c..1e758a2c3c 100644 --- a/res/css/views/elements/_TagComposer.pcss +++ b/res/css/views/elements/_TagComposer.pcss @@ -68,8 +68,8 @@ Please see LICENSE files in the repository root for full details. position: relative; svg { - width: 0.5em; - vertical-align: middle; + width: 16px; + height: 16px; } } } diff --git a/res/css/views/elements/_UseCaseSelectionButton.pcss b/res/css/views/elements/_UseCaseSelectionButton.pcss index 99f19a9454..ea0fd7f458 100644 --- a/res/css/views/elements/_UseCaseSelectionButton.pcss +++ b/res/css/views/elements/_UseCaseSelectionButton.pcss @@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details. width: 12px; height: 12px; - mask-image: url("$(res)/img/element-icons/check-white.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); } } diff --git a/res/css/views/right_panel/_ExtensionsCard.pcss b/res/css/views/right_panel/_ExtensionsCard.pcss index e559027366..ee3984537b 100644 --- a/res/css/views/right_panel/_ExtensionsCard.pcss +++ b/res/css/views/right_panel/_ExtensionsCard.pcss @@ -97,7 +97,7 @@ Please see LICENSE files in the repository root for full details. .mx_ExtensionsCard_app_options { right: 32px; /* 24 + 8 */ &::before { - mask-image: url("$(res)/img/element-icons/room/ellipsis.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); } } diff --git a/res/css/views/rooms/_LegacyRoomHeader.pcss b/res/css/views/rooms/_LegacyRoomHeader.pcss index 89be7023f7..dc41108041 100644 --- a/res/css/views/rooms/_LegacyRoomHeader.pcss +++ b/res/css/views/rooms/_LegacyRoomHeader.pcss @@ -240,7 +240,7 @@ Please see LICENSE files in the repository root for full details. .mx_LegacyRoomHeader_closeButton { &::before { - mask-image: url("$(res)/img/cancel.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); mask-size: 20px; mask-position: center; } diff --git a/res/css/views/rooms/_LinkPreviewGroup.pcss b/res/css/views/rooms/_LinkPreviewGroup.pcss index 9c9ad1825b..e540c149b6 100644 --- a/res/css/views/rooms/_LinkPreviewGroup.pcss +++ b/res/css/views/rooms/_LinkPreviewGroup.pcss @@ -12,14 +12,14 @@ Please see LICENSE files in the repository root for full details. width: 18px; height: 18px; - img { + svg { flex: 0 0 40px; visibility: hidden; } } &:hover .mx_LinkPreviewGroup_hide img, - .mx_LinkPreviewGroup_hide:focus-visible:focus img { + .mx_LinkPreviewGroup_hide:focus-visible:focus svg { visibility: visible; } diff --git a/res/css/views/rooms/_ReplyPreview.pcss b/res/css/views/rooms/_ReplyPreview.pcss index 086d829e39..2aef45ef71 100644 --- a/res/css/views/rooms/_ReplyPreview.pcss +++ b/res/css/views/rooms/_ReplyPreview.pcss @@ -31,14 +31,14 @@ Please see LICENSE files in the repository root for full details. .mx_ReplyPreview_header_cancel { background-color: $primary-content; - mask: url("$(res)/img/cancel.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); mask-repeat: no-repeat; mask-position: center; - mask-size: 18px; - width: 18px; - height: 18px; - min-width: 18px; - min-height: 18px; + mask-size: contain; + width: 20px; + height: 20px; + min-width: 20px; + min-height: 20px; } } } diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss index 9fae0e9bac..2e90c68f87 100644 --- a/res/css/views/rooms/_RoomSublist.pcss +++ b/res/css/views/rooms/_RoomSublist.pcss @@ -131,7 +131,7 @@ Please see LICENSE files in the repository root for full details. } .mx_RoomSublist_menuButton::before { - mask-image: url("$(res)/img/element-icons/context-menu.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); } .mx_RoomSublist_headerText { diff --git a/res/css/views/rooms/_RoomTile.pcss b/res/css/views/rooms/_RoomTile.pcss index 9db0134632..9614006ced 100644 --- a/res/css/views/rooms/_RoomTile.pcss +++ b/res/css/views/rooms/_RoomTile.pcss @@ -133,7 +133,7 @@ Please see LICENSE files in the repository root for full details. } .mx_RoomTile_menuButton::before { - mask-image: url("$(res)/img/element-icons/context-menu.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); } &:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) { diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.pcss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss index 01fa75ef04..95164105d3 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.pcss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.pcss @@ -63,9 +63,9 @@ Please see LICENSE files in the repository root for full details. position: absolute; width: 18px; height: 18px; - mask-image: url("$(res)/img/cancel.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); mask-repeat: no-repeat; - mask-size: 10px; - mask-position: 4px 4px; + mask-size: 16px; + mask-position: center; background: var(--cpd-color-icon-tertiary); } diff --git a/res/css/views/toasts/_IncomingCallToast.pcss b/res/css/views/toasts/_IncomingCallToast.pcss index 0085737af0..3f11cf12f4 100644 --- a/res/css/views/toasts/_IncomingCallToast.pcss +++ b/res/css/views/toasts/_IncomingCallToast.pcss @@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details. &::before { content: ""; - mask-image: url("$(res)/img/cancel.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); height: inherit; width: inherit; diff --git a/res/css/views/user-onboarding/_UserOnboardingButton.pcss b/res/css/views/user-onboarding/_UserOnboardingButton.pcss index 546b161c62..01e27aa143 100644 --- a/res/css/views/user-onboarding/_UserOnboardingButton.pcss +++ b/res/css/views/user-onboarding/_UserOnboardingButton.pcss @@ -52,14 +52,13 @@ Please see LICENSE files in the repository root for full details. content: ""; mask-repeat: no-repeat; mask-position: center; - mask-size: contain; - width: 7px; - height: 7px; + mask-size: 12px; + width: inherit; + height: inherit; position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - mask-image: url("$(res)/img/element-icons/cancel-rounded.svg"); + left: -1px; + top: -1px; + mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); } } } diff --git a/res/css/views/user-onboarding/_UserOnboardingTask.pcss b/res/css/views/user-onboarding/_UserOnboardingTask.pcss index cf7453293b..4056d45d02 100644 --- a/res/css/views/user-onboarding/_UserOnboardingTask.pcss +++ b/res/css/views/user-onboarding/_UserOnboardingTask.pcss @@ -75,13 +75,13 @@ Please see LICENSE files in the repository root for full details. content: ""; mask-repeat: no-repeat; mask-position: center; - mask-size: contain; - width: 16px; - height: 16px; + mask-size: 24px; + width: inherit; + height: inherit; position: absolute; - left: calc(50% - 8px); - top: calc(50% - 8px); - mask-image: url("$(res)/img/element-icons/check-white.svg"); + left: 0; + top: 0; + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); animation-duration: 300ms; animation-fill-mode: both; diff --git a/res/img/cancel-small.svg b/res/img/cancel-small.svg deleted file mode 100644 index e4c8cafc10..0000000000 --- a/res/img/cancel-small.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Line + Line - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/res/img/cancel.svg b/res/img/cancel.svg deleted file mode 100644 index 2b7083e875..0000000000 --- a/res/img/cancel.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/back.svg b/res/img/element-icons/back.svg deleted file mode 100644 index 62aef5df27..0000000000 --- a/res/img/element-icons/back.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/res/img/element-icons/cancel-rounded.svg b/res/img/element-icons/cancel-rounded.svg deleted file mode 100644 index 7439aaeaba..0000000000 --- a/res/img/element-icons/cancel-rounded.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/element-icons/caret-left.svg b/res/img/element-icons/caret-left.svg deleted file mode 100644 index 14c28dc3b1..0000000000 --- a/res/img/element-icons/caret-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/check-white.svg b/res/img/element-icons/check-white.svg deleted file mode 100644 index 018c8b33d9..0000000000 --- a/res/img/element-icons/check-white.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/check.svg b/res/img/element-icons/check.svg deleted file mode 100644 index afbd40cf10..0000000000 --- a/res/img/element-icons/check.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - diff --git a/res/img/element-icons/context-menu.svg b/res/img/element-icons/context-menu.svg deleted file mode 100644 index 1cededd2ad..0000000000 --- a/res/img/element-icons/context-menu.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/copy.svg b/res/img/element-icons/copy.svg deleted file mode 100644 index 5563442a30..0000000000 --- a/res/img/element-icons/copy.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/res/img/element-icons/room/ellipsis.svg b/res/img/element-icons/room/ellipsis.svg deleted file mode 100644 index e7fcca8f94..0000000000 --- a/res/img/element-icons/room/ellipsis.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/roomlist/checkmark.svg b/res/img/element-icons/roomlist/checkmark.svg deleted file mode 100644 index ab6ced94a3..0000000000 --- a/res/img/element-icons/roomlist/checkmark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/ellipsis.svg b/res/img/ellipsis.svg deleted file mode 100644 index d60c844089..0000000000 --- a/res/img/ellipsis.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - icons_archive - Created with Sketch. - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index e40fbde72b..398cf0e1f1 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -239,7 +239,7 @@ $event-highlight-bg-color: $yellow-background; /* event timestamp */ $event-timestamp-color: #acacac; -$copy-button-url: "$(res)/img/element-icons/copy.svg"; +$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg"; /* e2e */ $e2e-verified-color: #0dbd8b; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 2e808c1a78..d649b6b38d 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -345,7 +345,7 @@ $focus-brightness: 105%; /* Icon URLs */ /* ******************** */ -$copy-button-url: "$(res)/img/element-icons/copy.svg"; +$copy-button-url: "@vector-im/compound-design-tokens/icons/copy.svg"; /* ******************** */ /* Location sharing */ diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx index aee013974e..c3f4a8491b 100644 --- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx +++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx @@ -14,6 +14,7 @@ import { AuthDict, CrossSigningKeys, MatrixError, UIAFlow, UIAResponse } from "m import { CryptoEvent } from "matrix-js-sdk/src/crypto"; import classNames from "classnames"; import { BackupTrustInfo, GeneratedSecretStorageKey, KeyBackupInfo } from "matrix-js-sdk/src/crypto-api"; +import CheckmarkIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; import { MatrixClientPeg } from "../../../../MatrixClientPeg"; import { _t, _td } from "../../../../languageHandler"; @@ -37,7 +38,6 @@ import BaseDialog from "../../../../components/views/dialogs/BaseDialog"; import Spinner from "../../../../components/views/elements/Spinner"; import InteractiveAuthDialog from "../../../../components/views/dialogs/InteractiveAuthDialog"; import { IValidationResult } from "../../../../components/views/elements/Validation"; -import { Icon as CheckmarkIcon } from "../../../../../res/img/element-icons/check.svg"; import PassphraseConfirmField from "../../../../components/views/auth/PassphraseConfirmField"; import { initialiseDehydration } from "../../../../utils/device/dehydration"; diff --git a/src/components/views/context_menus/KebabContextMenu.tsx b/src/components/views/context_menus/KebabContextMenu.tsx index 633cc0bb0e..7e2077473c 100644 --- a/src/components/views/context_menus/KebabContextMenu.tsx +++ b/src/components/views/context_menus/KebabContextMenu.tsx @@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; +import ContextMenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal"; -import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg"; import { ChevronFace, ContextMenuButton, MenuProps, useContextMenu } from "../../structures/ContextMenu"; import { ButtonProps } from "../elements/AccessibleButton"; import IconizedContextMenu, { IconizedContextMenuOptionList } from "./IconizedContextMenu"; diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx index 1e973fe776..b8a7f9d500 100644 --- a/src/components/views/dialogs/ForwardDialog.tsx +++ b/src/components/views/dialogs/ForwardDialog.tsx @@ -279,7 +279,11 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr + } name={text} showPresence={false} diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 011f9a446e..145c1b22ca 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -16,6 +16,7 @@ import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; import { logger } from "matrix-js-sdk/src/logger"; import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle"; +import EllipsisIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal"; import AccessibleButton from "./AccessibleButton"; import { _t } from "../../../languageHandler"; @@ -37,7 +38,6 @@ import { Icon as CollapseIcon } from "../../../../res/img/element-icons/minimise import { Icon as MaximiseIcon } from "../../../../res/img/element-icons/maximise-expand.svg"; import { Icon as MinimiseIcon } from "../../../../res/img/element-icons/minus-button.svg"; import { Icon as PopoutIcon } from "../../../../res/img/feather-customised/widget/external-link.svg"; -import { Icon as MenuIcon } from "../../../../res/img/element-icons/room/ellipsis.svg"; import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore"; import { OwnProfileStore } from "../../../stores/OwnProfileStore"; import { UPDATE_EVENT } from "../../../stores/AsyncStore"; @@ -806,7 +806,7 @@ export default class AppTile extends React.Component { ref={this.contextMenuButton} onClick={this.onContextMenuClick} > - + )} diff --git a/src/components/views/elements/FilterDropdown.tsx b/src/components/views/elements/FilterDropdown.tsx index dbb5ceaa0f..9a66ffcea1 100644 --- a/src/components/views/elements/FilterDropdown.tsx +++ b/src/components/views/elements/FilterDropdown.tsx @@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details. import React, { ReactElement } from "react"; import classNames from "classnames"; +import CheckmarkIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; -import { Icon as CheckmarkIcon } from "../../../../res/img/element-icons/roomlist/checkmark.svg"; import Dropdown, { DropdownProps } from "./Dropdown"; import { NonEmptyArray } from "../../../@types/common"; diff --git a/src/components/views/elements/Tag.tsx b/src/components/views/elements/Tag.tsx index 3f4b4d115b..b9f8780628 100644 --- a/src/components/views/elements/Tag.tsx +++ b/src/components/views/elements/Tag.tsx @@ -7,9 +7,9 @@ Please see LICENSE files in the repository root for full details. */ import React, { DetailedHTMLProps, HTMLAttributes } from "react"; +import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; import AccessibleButton from "./AccessibleButton"; -import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg"; interface IProps extends DetailedHTMLProps, HTMLDivElement> { icon?: () => JSX.Element; @@ -30,7 +30,7 @@ export const Tag: React.FC = ({ icon, label, onDeleteClick, disabled = f onClick={onDeleteClick} disabled={disabled} > - + )} diff --git a/src/components/views/location/ShareDialogButtons.tsx b/src/components/views/location/ShareDialogButtons.tsx index e544facb02..867309f8f2 100644 --- a/src/components/views/location/ShareDialogButtons.tsx +++ b/src/components/views/location/ShareDialogButtons.tsx @@ -7,10 +7,10 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; +import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; +import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left"; import AccessibleButton from "../elements/AccessibleButton"; -import { Icon as BackIcon } from "../../../../res/img/element-icons/caret-left.svg"; -import { Icon as CloseIcon } from "../../../../res/img/element-icons/cancel-rounded.svg"; import { _t } from "../../../languageHandler"; interface Props { diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index 8bddee8352..a38a26ecb5 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -23,8 +23,8 @@ import { import classNames from "classnames"; import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin"; import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin"; +import ContextMenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal"; -import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg"; import { Icon as EditIcon } from "../../../../res/img/element-icons/room/message-bar/edit.svg"; import { Icon as EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg"; import { Icon as ResendIcon } from "../../../../res/img/element-icons/retry.svg"; diff --git a/src/components/views/pips/WidgetPip.tsx b/src/components/views/pips/WidgetPip.tsx index 38f4c1622e..a556d3b93c 100644 --- a/src/components/views/pips/WidgetPip.tsx +++ b/src/components/views/pips/WidgetPip.tsx @@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details. import React, { FC, MutableRefObject, useCallback, useMemo } from "react"; import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; +import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left"; import PersistentApp from "../elements/PersistentApp"; import defaultDispatcher from "../../../dispatcher/dispatcher"; @@ -19,7 +20,6 @@ import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayo import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter"; import Toolbar from "../../../accessibility/Toolbar"; import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex"; -import { Icon as BackIcon } from "../../../../res/img/element-icons/back.svg"; import { Icon as HangupIcon } from "../../../../res/img/element-icons/call/hangup.svg"; import { _t } from "../../../languageHandler"; import { WidgetType } from "../../../widgets/WidgetType"; diff --git a/src/components/views/polls/pollHistory/PollDetailHeader.tsx b/src/components/views/polls/pollHistory/PollDetailHeader.tsx index 4b4ca89b32..0b175629ae 100644 --- a/src/components/views/polls/pollHistory/PollDetailHeader.tsx +++ b/src/components/views/polls/pollHistory/PollDetailHeader.tsx @@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; +import LeftCaretIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left"; -import { Icon as LeftCaretIcon } from "../../../../../res/img/element-icons/caret-left.svg"; import { _t } from "../../../../languageHandler"; import AccessibleButton from "../../elements/AccessibleButton"; import { PollHistoryFilter } from "./types"; diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx index 9f3fa0182e..cbbd2a3d7b 100644 --- a/src/components/views/rooms/LinkPreviewGroup.tsx +++ b/src/components/views/rooms/LinkPreviewGroup.tsx @@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details. import React, { useContext, useEffect } from "react"; import { MatrixEvent, MatrixError, IPreviewUrlResponse, MatrixClient } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; +import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; import { useStateToggle } from "../../../hooks/useStateToggle"; import LinkPreviewWidget from "./LinkPreviewWidget"; @@ -66,15 +67,7 @@ const LinkPreviewGroup: React.FC = ({ links, mxEvent, onCancelClick, onH onClick={onCancelClick} aria-label={_t("timeline|url_preview|close")} > - + ) : undefined} diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx index cfce672b40..ace2010e5f 100644 --- a/src/components/views/rooms/MemberList.tsx +++ b/src/components/views/rooms/MemberList.tsx @@ -238,7 +238,11 @@ export default class MemberList extends React.Component { + } name={text} showPresence={false} diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index d300eb6214..c21e0a71e2 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import classNames from "classnames"; +import EllipsisIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal"; import { _t } from "../../../languageHandler"; import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu"; @@ -21,7 +22,6 @@ import { Action } from "../../../dispatcher/actions"; import { UserTab } from "../dialogs/UserTab"; import QuickThemeSwitcher from "./QuickThemeSwitcher"; import { Icon as PinUprightIcon } from "../../../../res/img/element-icons/room/pin-upright.svg"; -import { Icon as EllipsisIcon } from "../../../../res/img/element-icons/room/ellipsis.svg"; import { Icon as MembersIcon } from "../../../../res/img/element-icons/room/members.svg"; import { Icon as FavoriteIcon } from "../../../../res/img/element-icons/roomlist/favorite.svg"; import Modal from "../../../Modal"; diff --git a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 2e8cc697a8..520c0ee191 100644 --- a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -175,9 +175,18 @@ exports[`AppTile for a pinned widget should render 1`] = ` role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
@@ -260,9 +269,18 @@ exports[`AppTile for a pinned widget should render permission request 1`] = ` role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
@@ -424,9 +442,18 @@ exports[`AppTile preserves non-persisted widget on container move 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/elements/__snapshots__/FilterDropdown-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap index 1f1c5dff73..fe153adcb9 100644 --- a/test/unit-tests/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap +++ b/test/unit-tests/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap @@ -16,9 +16,18 @@ exports[` renders dropdown options in menu 1`] = ` class="mx_FilterDropdown_option" data-testid="filter-option-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/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap b/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap index 9d571b24b1..5e8d744d2d 100644 --- a/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap +++ b/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap @@ -22,9 +22,18 @@ exports[` Poll detail navigates back to poll list from detail vie role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + Active polls
`; diff --git a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap index 6c7bec7cf1..421fa08822 100644 --- a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap +++ b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap @@ -130,7 +130,17 @@ exports[` should render 1`] = ` role="button" tabindex="-1" > -
+ + +
@@ -246,7 +256,17 @@ exports[` should render 1`] = ` role="button" tabindex="-1" > -
+ + +
@@ -362,7 +382,17 @@ exports[` should render 1`] = ` role="button" tabindex="-1" > -
+ + +
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 93f53a7ece..1d9fd387e7 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 @@ -146,9 +146,18 @@ exports[` handles when device is falsy 1`] = ` role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
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" + > + +
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" + > + +
matches the snapshot 1`] = ` role="button" tabindex="0" > -
+ + +
matches the snapshot 1`] = ` role="button" tabindex="0" > -
+ + +
matches the snapshot 1`] = ` role="button" tabindex="0" > -
+ + +
matches the snapshot 1`] = ` role="button" tabindex="0" > -
+ + +
matches the snapshot 1`] = ` role="button" tabindex="0" > -
+ + +
matches the snapshot 1`] = ` role="button" tabindex="0" > -
+ + +
matches the snapshot 1`] = ` role="button" tabindex="0" > -
+ + +
matches the snapshot 1`] = ` role="button" tabindex="0" > -
+ + +
matches the snapshot 1`] = ` role="button" tabindex="0" > -
+ + +
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap index a8d2de3400..d81597f757 100644 --- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap +++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap @@ -273,7 +273,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = ` role="button" tabindex="-1" > -
+ + +
@@ -389,7 +399,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = ` role="button" tabindex="-1" > -
+ + +
@@ -505,7 +525,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = ` role="button" tabindex="-1" > -
+ + +
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 efce00a97e..565e4f8920 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 @@ -90,9 +90,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" + > + +
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" + > + +