diff --git a/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png b/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png index 891f024bf8..71e6311ba6 100644 Binary files a/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png and b/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png differ diff --git a/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/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..ac3cec9560 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..39a0a336cd 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..08241935c0 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/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-create-menu-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png index 6d2e83b23d..aecf5535cf 100644 Binary files a/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png differ diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png index 66b8af0e5b..68ef561435 100644 Binary files a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-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/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..2eda746c6d 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/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/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png b/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png index 20618f5d66..76c5eb3f4a 100644 Binary files a/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png and b/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-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/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/_GenericDropdownMenu.pcss b/res/css/structures/_GenericDropdownMenu.pcss index 7f7342416f..f75516ce7e 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; @@ -103,7 +103,7 @@ Please see LICENSE files in the repository root for full details. height: 12px; margin-left: -20px; margin-right: 8px; - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); mask-size: 100%; mask-repeat: no-repeat; background-color: $primary-content; diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 57196985a9..0f796dbc96 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details. /** Fixme - factor this out with the main header **/ .mx_RightPanel_threadsButton::before { - mask-image: url("$(res)/img/element-icons/room/thread.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/threads-solid.svg"); } .mx_RightPanel_notifsButton::before { @@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details. } .mx_RightPanel_roomSummaryButton::before { - mask-image: url("$(res)/img/element-icons/room/room-summary.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg"); mask-position: center; } diff --git a/res/css/structures/_RoomSearch.pcss b/res/css/structures/_RoomSearch.pcss index 61760c420f..08a46e1044 100644 --- a/res/css/structures/_RoomSearch.pcss +++ b/res/css/structures/_RoomSearch.pcss @@ -26,12 +26,13 @@ Please see LICENSE files in the repository root for full details. .mx_RoomSearch_icon { width: 16px; height: 16px; - mask: url("$(res)/img/element-icons/roomlist/search.svg"); + mask: url("@vector-im/compound-design-tokens/icons/search.svg"); mask-repeat: no-repeat; background-color: $secondary-content; margin-left: 7px; margin-bottom: 2px; flex-shrink: 0; + mask-size: 20px; } .mx_RoomSearch_spotlightTriggerText { diff --git a/res/css/structures/_RoomStatusBar.pcss b/res/css/structures/_RoomStatusBar.pcss index 2e5af46389..0f30401a6b 100644 --- a/res/css/structures/_RoomStatusBar.pcss +++ b/res/css/structures/_RoomStatusBar.pcss @@ -118,14 +118,14 @@ Please see LICENSE files in the repository root for full details. } &.mx_RoomStatusBar_unsentCancelAllBtn::before { - mask-image: url("$(res)/img/element-icons/trashcan.svg"); + 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("$(res)/img/element-icons/retry.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg"); } } } diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index 52fa523c4e..282abdad1a 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 089b0dab12..0be6c602c8 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 { @@ -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..7ea717554b 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 { @@ -207,15 +207,15 @@ Please see LICENSE files in the repository root for full details. } &.mx_SpaceButton_home .mx_SpaceButton_icon::before { - mask-image: url("$(res)/img/element-icons/home.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg"); } &.mx_SpaceButton_favourites .mx_SpaceButton_icon::before { - mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg"); } &.mx_SpaceButton_people .mx_SpaceButton_icon::before { - mask-image: url("$(res)/img/element-icons/room/members.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg"); } &.mx_SpaceButton_orphans .mx_SpaceButton_icon::before { @@ -229,7 +229,7 @@ Please see LICENSE files in the repository root for full details. &.mx_SpaceButton_new .mx_SpaceButton_icon { &::before { background-color: $primary-content; - mask-image: url("$(res)/img/element-icons/plus.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg"); transition: all 0.2s ease-in-out; /* TODO transition */ } } @@ -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; } } @@ -414,7 +414,7 @@ Please see LICENSE files in the repository root for full details. } .mx_SpacePanel_iconHome::before { - mask-image: url("$(res)/img/element-icons/home.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg"); } .mx_SpacePanel_iconInvite::before { @@ -422,19 +422,19 @@ Please see LICENSE files in the repository root for full details. } .mx_SpacePanel_iconSettings::before { - mask-image: url("$(res)/img/element-icons/settings.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg"); } .mx_SpacePanel_iconLeave::before { - mask-image: url("$(res)/img/element-icons/leave.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg"); } .mx_SpacePanel_iconMembers::before { - mask-image: url("$(res)/img/element-icons/room/members.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg"); } .mx_SpacePanel_iconPlus::before { - mask-image: url("$(res)/img/element-icons/plus.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg"); } .mx_SpacePanel_iconExplore::before { diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss index 356af1d938..b36572759d 100644 --- a/res/css/structures/_SpaceRoomView.pcss +++ b/res/css/structures/_SpaceRoomView.pcss @@ -221,7 +221,7 @@ Please see LICENSE files in the repository root for full details. width: 24px; background: $tertiary-content; mask-size: contain; - mask-image: url("$(res)/img/element-icons/settings.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg"); } } } @@ -247,7 +247,7 @@ Please see LICENSE files in the repository root for full details. } .mx_SpaceRoomView_privateScope_justMeButton::before { - mask-image: url("$(res)/img/element-icons/room/members.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg"); } .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before { diff --git a/res/css/structures/_UserMenu.pcss b/res/css/structures/_UserMenu.pcss index abc3ed2083..94b6b03b6d 100644 --- a/res/css/structures/_UserMenu.pcss +++ b/res/css/structures/_UserMenu.pcss @@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details. } .mx_UserMenu_iconHome::before { - mask-image: url("$(res)/img/element-icons/home.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg"); } .mx_UserMenu_iconDnd::before { @@ -185,11 +185,11 @@ Please see LICENSE files in the repository root for full details. } .mx_UserMenu_iconLock::before { - mask-image: url("$(res)/img/element-icons/security.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg"); } .mx_UserMenu_iconSettings::before { - mask-image: url("$(res)/img/element-icons/settings.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg"); } .mx_UserMenu_iconMessage::before { @@ -197,7 +197,7 @@ Please see LICENSE files in the repository root for full details. } .mx_UserMenu_iconSignOut::before { - mask-image: url("$(res)/img/element-icons/leave.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg"); } .mx_UserMenu_iconQr::before { 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..1bf5b87594 100644 --- a/res/css/views/context_menus/_MessageContextMenu.pcss +++ b/res/css/views/context_menus/_MessageContextMenu.pcss @@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageContextMenu_iconCollapse::before { - mask-image: url("$(res)/img/element-icons/message/chevron-up.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg"); } .mx_MessageContextMenu_iconReport::before { @@ -33,7 +33,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageContextMenu_iconLink::before { - mask-image: url("$(res)/img/element-icons/link.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/link.svg"); } .mx_MessageContextMenu_iconPermalink::before { @@ -49,19 +49,19 @@ 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 { - mask-image: url("$(res)/img/element-icons/message/fwd.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/forward.svg"); } .mx_MessageContextMenu_iconRedact::before { - mask-image: url("$(res)/img/element-icons/trashcan.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg"); } .mx_MessageContextMenu_iconResend::before { - mask-image: url("$(res)/img/element-icons/retry.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg"); } .mx_MessageContextMenu_iconSource::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 { @@ -94,11 +92,11 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageContextMenu_iconReply::before { - mask-image: url("$(res)/img/element-icons/room/message-bar/reply.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/reply.svg"); } .mx_MessageContextMenu_iconReplyInThread::before { - mask-image: url("$(res)/img/element-icons/message/thread.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg"); } .mx_MessageContextMenu_iconReact::before { diff --git a/res/css/views/context_menus/_RoomGeneralContextMenu.pcss b/res/css/views/context_menus/_RoomGeneralContextMenu.pcss index 4017a53f20..a8630d51aa 100644 --- a/res/css/views/context_menus/_RoomGeneralContextMenu.pcss +++ b/res/css/views/context_menus/_RoomGeneralContextMenu.pcss @@ -1,5 +1,5 @@ .mx_RoomGeneralContextMenu_iconStar::before { - mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg"); } .mx_RoomGeneralContextMenu_iconArrowDown::before { @@ -31,7 +31,7 @@ } .mx_RoomGeneralContextMenu_iconPeople::before { - mask-image: url("$(res)/img/element-icons/room/members.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg"); } .mx_RoomGeneralContextMenu_iconFiles::before { @@ -43,15 +43,15 @@ } .mx_RoomGeneralContextMenu_iconWidgets::before { - mask-image: url("$(res)/img/element-icons/room/apps.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg"); } .mx_RoomGeneralContextMenu_iconSettings::before { - mask-image: url("$(res)/img/element-icons/settings.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg"); } .mx_RoomGeneralContextMenu_iconExport::before { - mask-image: url("$(res)/img/element-icons/export.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg"); } .mx_RoomGeneralContextMenu_iconDeveloperTools::before { @@ -59,7 +59,7 @@ } .mx_RoomGeneralContextMenu_iconCopyLink::before { - mask-image: url("$(res)/img/element-icons/link.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/link.svg"); } .mx_RoomGeneralContextMenu_iconInvite::before { @@ -67,5 +67,5 @@ } .mx_RoomGeneralContextMenu_iconSignOut::before { - mask-image: url("$(res)/img/element-icons/leave.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg"); } diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss index 06005d5a0b..1656ca7e67 100644 --- a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss +++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss @@ -125,7 +125,7 @@ Please see LICENSE files in the repository root for full details. mask-repeat: no-repeat; mask-position: center; mask-size: contain; - mask-image: url("$(res)/img/element-icons/retry.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg"); width: 18px; height: 18px; left: 0; @@ -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/_ConfirmSpaceUserActionDialog.pcss b/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss index 7c1828183a..3b91eddc8b 100644 --- a/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss +++ b/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss @@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details. background-color: $secondary-content; mask-repeat: no-repeat; mask-size: contain; - mask-image: url("$(res)/img/element-icons/room/room-summary.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg"); mask-position: center; } } diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss index 9283d9d739..87e6b2a9ff 100644 --- a/res/css/views/dialogs/_InviteDialog.pcss +++ b/res/css/views/dialogs/_InviteDialog.pcss @@ -348,7 +348,7 @@ Please see LICENSE files in the repository root for full details. height: 24px; grid-column: 1; grid-row: 1; - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); mask-size: 100%; mask-repeat: no-repeat; position: absolute; diff --git a/res/css/views/dialogs/_JoinRuleDropdown.pcss b/res/css/views/dialogs/_JoinRuleDropdown.pcss index f6b5ed4748..10a533371d 100644 --- a/res/css/views/dialogs/_JoinRuleDropdown.pcss +++ b/res/css/views/dialogs/_JoinRuleDropdown.pcss @@ -41,7 +41,7 @@ Please see LICENSE files in the repository root for full details. .mx_JoinRuleDropdown_invite::before { box-sizing: border-box; - mask-image: url("$(res)/img/element-icons/lock.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg"); mask-size: contain; padding: 1px; } diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.pcss b/res/css/views/dialogs/_LeaveSpaceDialog.pcss index b332942f75..b3e3878276 100644 --- a/res/css/views/dialogs/_LeaveSpaceDialog.pcss +++ b/res/css/views/dialogs/_LeaveSpaceDialog.pcss @@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details. background-color: $secondary-content; mask-repeat: no-repeat; mask-size: contain; - mask-image: url("$(res)/img/element-icons/room/room-summary.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg"); mask-position: center; } } diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss index f6635b9791..a6b9fe0304 100644 --- a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss +++ b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss @@ -108,7 +108,7 @@ Please see LICENSE files in the repository root for full details. background-color: $secondary-content; mask-repeat: no-repeat; mask-size: contain; - mask-image: url("$(res)/img/element-icons/room/room-summary.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg"); mask-position: center; } } diff --git a/res/css/views/dialogs/_RoomSettingsDialog.pcss b/res/css/views/dialogs/_RoomSettingsDialog.pcss index 84036cab1e..544512d02a 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.pcss +++ b/res/css/views/dialogs/_RoomSettingsDialog.pcss @@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details. /* ========================================================== */ .mx_RoomSettingsDialog_settingsIcon::before { - mask-image: url("$(res)/img/element-icons/settings.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg"); } .mx_RoomSettingsDialog_voiceIcon::before { @@ -17,7 +17,7 @@ Please see LICENSE files in the repository root for full details. } .mx_RoomSettingsDialog_securityIcon::before { - mask-image: url("$(res)/img/element-icons/security.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg"); } .mx_RoomSettingsDialog_rolesIcon::before { @@ -56,7 +56,7 @@ Please see LICENSE files in the repository root for full details. /* show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings */ .mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before { - mask: url("$(res)/img/feather-customised/image.svg"); + mask: url("@vector-im/compound-design-tokens/icons/image.svg"); mask-repeat: no-repeat; mask-size: 36px; mask-position: center; diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss index 5837d01f05..d1990b5973 100644 --- a/res/css/views/dialogs/_SpaceSettingsDialog.pcss +++ b/res/css/views/dialogs/_SpaceSettingsDialog.pcss @@ -74,7 +74,7 @@ Please see LICENSE files in the repository root for full details. .mx_TabbedView_tabLabel { .mx_SpaceSettingsDialog_generalIcon::before { - mask-image: url("$(res)/img/element-icons/settings.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg"); } .mx_SpaceSettingsDialog_visibilityIcon::before { diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss index 102abed58f..c4f94bfde9 100644 --- a/res/css/views/dialogs/_SpotlightDialog.pcss +++ b/res/css/views/dialogs/_SpotlightDialog.pcss @@ -93,7 +93,7 @@ Please see LICENSE files in the repository root for full details. } &.mx_SpotlightDialog_filterPeople::before { - mask-image: url("$(res)/img/element-icons/room/members.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg"); } &.mx_SpotlightDialog_filterPublicRooms::before { @@ -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, @@ -402,7 +400,7 @@ Please see LICENSE files in the repository root for full details. } .mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before { - mask-image: url("$(res)/img/element-icons/link.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/link.svg"); } .mx_SpotlightDialog_createRoom .mx_AccessibleButton::before { @@ -434,7 +432,7 @@ Please see LICENSE files in the repository root for full details. } .mx_SpotlightDialog_startChat::before { - mask-image: url("$(res)/img/element-icons/room/members.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg"); } .mx_SpotlightDialog_joinRoomAlias::before { @@ -510,15 +508,15 @@ Please see LICENSE files in the repository root for full details. mask-size: contain; &.mx_SpotlightDialog_metaspaceResult_home-space { - mask-image: url("$(res)/img/element-icons/home.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg"); } &.mx_SpotlightDialog_metaspaceResult_favourites-space { - mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg"); } &.mx_SpotlightDialog_metaspaceResult_people-space { - mask-image: url("$(res)/img/element-icons/room/members.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg"); } &.mx_SpotlightDialog_metaspaceResult_orphans-space { diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss index 372b41042b..0b42281e3e 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss @@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details. color: $accent; &::before { - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); background-color: $accent; } } 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/_AccessibleButton.pcss b/res/css/views/elements/_AccessibleButton.pcss index 3101520bd4..27219d06b5 100644 --- a/res/css/views/elements/_AccessibleButton.pcss +++ b/res/css/views/elements/_AccessibleButton.pcss @@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details. background-color: var(--cpd-color-bg-action-primary-rest); &::before { - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); } } diff --git a/res/css/views/elements/_CopyableText.pcss b/res/css/views/elements/_CopyableText.pcss index 7c98d5911d..b97862a8d0 100644 --- a/res/css/views/elements/_CopyableText.pcss +++ b/res/css/views/elements/_CopyableText.pcss @@ -26,8 +26,8 @@ Please see LICENSE files in the repository root for full details. .mx_CopyableText_copyButton { flex-shrink: 0; /* using em here to adapt to the local font size */ - width: 1em; - height: 1em; + width: 20px; + height: 20px; cursor: pointer; padding-left: 12px; padding-right: 10px; @@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details. position: sticky; right: 0; /* center to first line */ - top: 0.15em; + top: 0; background-color: $background; &::before { @@ -46,8 +46,8 @@ Please see LICENSE files in the repository root for full details. mask-repeat: no-repeat; mask-size: contain; background-color: $message-action-bar-fg-color; - width: 1em; - height: 1em; + width: inherit; + height: inherit; display: block; background-repeat: no-repeat; } diff --git a/res/css/views/elements/_Dropdown.pcss b/res/css/views/elements/_Dropdown.pcss index 7a3ebb9c29..9ef8653495 100644 --- a/res/css/views/elements/_Dropdown.pcss +++ b/res/css/views/elements/_Dropdown.pcss @@ -39,11 +39,12 @@ Please see LICENSE files in the repository root for full details. } .mx_Dropdown_arrow { - width: 10px; - height: 6px; + width: 20px; + height: 20px; padding-right: 9px; - mask: url("$(res)/img/feather-customised/dropdown-arrow.svg"); + mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); mask-repeat: no-repeat; + mask-size: contain; background: $primary-content; } 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/_Field.pcss b/res/css/views/elements/_Field.pcss index 92f8e41f0a..71aab5a879 100644 --- a/res/css/views/elements/_Field.pcss +++ b/res/css/views/elements/_Field.pcss @@ -55,7 +55,7 @@ Please see LICENSE files in the repository root for full details. right: 10px; width: 10px; height: 6px; - mask: url("$(res)/img/feather-customised/dropdown-arrow.svg"); + mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); mask-repeat: no-repeat; background-color: $primary-content; z-index: 1; diff --git a/res/css/views/elements/_ImageView.pcss b/res/css/views/elements/_ImageView.pcss index 2d48dea994..d2355378a5 100644 --- a/res/css/views/elements/_ImageView.pcss +++ b/res/css/views/elements/_ImageView.pcss @@ -129,7 +129,7 @@ $button-gap: 24px; } .mx_ImageView_button_more::before { - mask-image: url("$(res)/img/image-view/more.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); } .mx_ImageView_button_close { diff --git a/res/css/views/elements/_InfoTooltip.pcss b/res/css/views/elements/_InfoTooltip.pcss index a9a4dd42e6..8dcbe87d90 100644 --- a/res/css/views/elements/_InfoTooltip.pcss +++ b/res/css/views/elements/_InfoTooltip.pcss @@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details. } .mx_InfoTooltip_icon_info::before { - mask-image: url("$(res)/img/element-icons/info.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/info.svg"); } .mx_InfoTooltip_icon_warning::before { diff --git a/res/css/views/elements/_StyledCheckbox.pcss b/res/css/views/elements/_StyledCheckbox.pcss index 1ea3c4d3f3..986889c6dc 100644 --- a/res/css/views/elements/_StyledCheckbox.pcss +++ b/res/css/views/elements/_StyledCheckbox.pcss @@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details. height: 100%; width: 100%; - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); mask-position: center; mask-size: 100%; mask-repeat: no-repeat; 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/elements/_Validation.pcss b/res/css/views/elements/_Validation.pcss index 24953216df..1f7c22ff05 100644 --- a/res/css/views/elements/_Validation.pcss +++ b/res/css/views/elements/_Validation.pcss @@ -44,7 +44,7 @@ Please see LICENSE files in the repository root for full details. color: $accent; &::before { - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); background-color: $accent; } } 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/messages/_RedactedBody.pcss b/res/css/views/messages/_RedactedBody.pcss index 65027ffb97..7939cc6d09 100644 --- a/res/css/views/messages/_RedactedBody.pcss +++ b/res/css/views/messages/_RedactedBody.pcss @@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details. height: 14px; width: 14px; background-color: $icon-button-color; - mask-image: url("$(res)/img/feather-customised/trash.custom.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; diff --git a/res/css/views/messages/_ViewSourceEvent.pcss b/res/css/views/messages/_ViewSourceEvent.pcss index b8b240816f..5e2f32a320 100644 --- a/res/css/views/messages/_ViewSourceEvent.pcss +++ b/res/css/views/messages/_ViewSourceEvent.pcss @@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details. width: var(--ViewSourceEvent_toggle-size); min-width: var(--ViewSourceEvent_toggle-size); background-color: $accent; - mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg"); .mx_EventTile:hover & { visibility: visible; @@ -49,6 +49,6 @@ Please see LICENSE files in the repository root for full details. height: var(--ViewSourceEvent_toggle-size); mask-position: 0 bottom; margin-bottom: 5px; - mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/collapse.svg"); } } diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss index 2adf71e25b..d09a280dfa 100644 --- a/res/css/views/right_panel/_BaseCard.pcss +++ b/res/css/views/right_panel/_BaseCard.pcss @@ -73,7 +73,7 @@ Please see LICENSE files in the repository root for full details. width: 100%; mask-repeat: no-repeat; mask-position: center; - mask-image: url("$(res)/img/element-icons/message/overflow-large.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); background-color: $secondary-content; } 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/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss index c350a450ad..1f9d1e0562 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; @@ -165,7 +165,7 @@ Please see LICENSE files in the repository root for full details. } .mx_ThreadPanel_copyLinkToThread::before { - mask-image: url("$(res)/img/element-icons/link.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/link.svg"); } .mx_ContextualMenu_wrapper { @@ -191,7 +191,7 @@ Please see LICENSE files in the repository root for full details. width: 12px; height: 12px; margin-right: 8px; - mask-image: url("$(res)/img/feather-customised/check.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); mask-size: 100%; mask-repeat: no-repeat; background-color: $primary-content; diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 92e4cf78ea..311e059166 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -982,11 +982,11 @@ $left-gutter: 64px; } .mx_EventTile_collapseButton { - mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/collapse.svg"); } .mx_EventTile_expandButton { - mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg"); } .mx_EventTile_tileError { diff --git a/res/css/views/rooms/_JumpToBottomButton.pcss b/res/css/views/rooms/_JumpToBottomButton.pcss index 7ca4efe5d0..6d7981dffe 100644 --- a/res/css/views/rooms/_JumpToBottomButton.pcss +++ b/res/css/views/rooms/_JumpToBottomButton.pcss @@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details. content: ""; position: absolute; inset: 0; - mask-image: url("$(res)/img/element-icons/message/chevron-up.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg"); mask-repeat: no-repeat; mask-size: 20px; mask-position: center 6px; diff --git a/res/css/views/rooms/_LegacyRoomHeader.pcss b/res/css/views/rooms/_LegacyRoomHeader.pcss index 2a2a402659..30577d5968 100644 --- a/res/css/views/rooms/_LegacyRoomHeader.pcss +++ b/res/css/views/rooms/_LegacyRoomHeader.pcss @@ -96,7 +96,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/feather-customised/chevron-down.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); background-color: $tertiary-content; } @@ -238,12 +238,12 @@ Please see LICENSE files in the repository root for full details. } .mx_LegacyRoomHeader_forgetButton::before { - mask-image: url("$(res)/img/element-icons/leave.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg"); width: 26px; } .mx_LegacyRoomHeader_appsButton::before { - mask-image: url("$(res)/img/element-icons/room/apps.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg"); } .mx_LegacyRoomHeader_appsButton_highlight::before { @@ -283,7 +283,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/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index 5e3e8b0303..8acbb0be40 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -277,7 +277,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageComposer_buttonMenu::before { - mask-image: url("$(res)/img/image-view/more.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); } .mx_MessageComposer_sendMessage { @@ -295,7 +295,7 @@ Please see LICENSE files in the repository root for full details. top: 8px; left: 9px; - mask-image: url("$(res)/img/element-icons/send-message.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/send-solid.svg"); mask-repeat: no-repeat; mask-size: contain; mask-position: center; 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/_RoomInfoLine.pcss b/res/css/views/rooms/_RoomInfoLine.pcss index 9bff47c282..23b7b9cf34 100644 --- a/res/css/views/rooms/_RoomInfoLine.pcss +++ b/res/css/views/rooms/_RoomInfoLine.pcss @@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details. &.mx_RoomInfoLine_private::before { width: 10px; mask-size: 10px; - mask-image: url("$(res)/img/element-icons/lock.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg"); } &.mx_RoomInfoLine_video::before { diff --git a/res/css/views/rooms/_RoomList.pcss b/res/css/views/rooms/_RoomList.pcss index 4ceba9a20a..97b1e76cef 100644 --- a/res/css/views/rooms/_RoomList.pcss +++ b/res/css/views/rooms/_RoomList.pcss @@ -29,7 +29,7 @@ Please see LICENSE files in the repository root for full details. mask-image: url("$(res)/img/element-icons/roomlist/dialpad.svg"); } .mx_RoomList_iconStartChat::before { - mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg"); } .mx_RoomList_iconInvite::before { mask-image: url("$(res)/img/element-icons/room/share.svg"); diff --git a/res/css/views/rooms/_RoomListHeader.pcss b/res/css/views/rooms/_RoomListHeader.pcss index e474cacfcd..560f7c6d7c 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"] { @@ -92,7 +92,7 @@ Please see LICENSE files in the repository root for full details. mask-image: url("$(res)/img/element-icons/room/invite.svg"); } .mx_RoomListHeader_iconStartChat::before { - mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg"); } .mx_RoomListHeader_iconNewRoom::before { mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg"); @@ -104,5 +104,5 @@ Please see LICENSE files in the repository root for full details. mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg"); } .mx_RoomListHeader_iconPlus::before { - mask-image: url("$(res)/img/element-icons/plus.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg"); } diff --git a/res/css/views/rooms/_RoomPreviewCard.pcss b/res/css/views/rooms/_RoomPreviewCard.pcss index 6b070de27f..f96b705cc2 100644 --- a/res/css/views/rooms/_RoomPreviewCard.pcss +++ b/res/css/views/rooms/_RoomPreviewCard.pcss @@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details. mask-repeat: no-repeat; mask-position: center; mask-size: contain; - mask-image: url("$(res)/img/element-icons/room/room-summary.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg"); background-color: $secondary-content; } } diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss index 9fae0e9bac..bcdfe3325c 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 { @@ -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/rooms/_RoomTile.pcss b/res/css/views/rooms/_RoomTile.pcss index 9db0134632..aca3fd6470 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) { @@ -182,7 +182,7 @@ Please see LICENSE files in the repository root for full details. .mx_RoomTile_contextMenu { .mx_RoomTile_iconStar::before { - mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg"); } .mx_RoomTile_iconArrowDown::before { @@ -206,7 +206,7 @@ Please see LICENSE files in the repository root for full details. } .mx_RoomTile_iconPeople::before { - mask-image: url("$(res)/img/element-icons/room/members.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg"); } .mx_RoomTile_iconFiles::before { @@ -218,19 +218,19 @@ Please see LICENSE files in the repository root for full details. } .mx_RoomTile_iconWidgets::before { - mask-image: url("$(res)/img/element-icons/room/apps.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg"); } .mx_RoomTile_iconSettings::before { - mask-image: url("$(res)/img/element-icons/settings.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg"); } .mx_RoomTile_iconExport::before { - mask-image: url("$(res)/img/element-icons/export.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg"); } .mx_RoomTile_iconCopyLink::before { - mask-image: url("$(res)/img/element-icons/link.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/link.svg"); } .mx_RoomTile_iconInvite::before { @@ -238,6 +238,6 @@ Please see LICENSE files in the repository root for full details. } .mx_RoomTile_iconSignOut::before { - mask-image: url("$(res)/img/element-icons/leave.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg"); } } diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.pcss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss index 01fa75ef04..735d98f5bb 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.pcss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.pcss @@ -41,7 +41,7 @@ Please see LICENSE files in the repository root for full details. position: absolute; width: 36px; height: 36px; - mask-image: url("$(res)/img/element-icons/message/chevron-up.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg"); mask-repeat: no-repeat; mask-size: 20px; mask-position: center; @@ -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/rooms/_VoiceRecordComposerTile.pcss b/res/css/views/rooms/_VoiceRecordComposerTile.pcss index 92a06f93f0..9e51dbea6c 100644 --- a/res/css/views/rooms/_VoiceRecordComposerTile.pcss +++ b/res/css/views/rooms/_VoiceRecordComposerTile.pcss @@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details. background-color: $voice-record-icon-color; mask-repeat: no-repeat; mask-size: contain; - mask-image: url("$(res)/img/element-icons/trashcan.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg"); } .mx_VoiceRecordComposerTile_uploadingState { diff --git a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss index 94cc7d949b..55052144cf 100644 --- a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss +++ b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss @@ -35,6 +35,6 @@ Please see LICENSE files in the repository root for full details. top: 0; left: 0; background-color: $alert; - mask-image: url("$(res)/img/feather-customised/alert-triangle.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/warning.svg"); } } diff --git a/res/css/views/spaces/_SpaceCreateMenu.pcss b/res/css/views/spaces/_SpaceCreateMenu.pcss index e501852e29..7772f327e9 100644 --- a/res/css/views/spaces/_SpaceCreateMenu.pcss +++ b/res/css/views/spaces/_SpaceCreateMenu.pcss @@ -43,8 +43,8 @@ Please see LICENSE files in the repository root for full details. } .mx_SpaceCreateMenuType_private::before { - mask-image: url("$(res)/img/element-icons/lock.svg"); - mask-size: 18px; + mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg"); + mask-size: 26px; } .mx_SpaceCreateMenu_back { @@ -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/spaces/_SpacePublicShare.pcss b/res/css/views/spaces/_SpacePublicShare.pcss index 58cf3659ae..ddda97b493 100644 --- a/res/css/views/spaces/_SpacePublicShare.pcss +++ b/res/css/views/spaces/_SpacePublicShare.pcss @@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details. @mixin SpacePillButton; &.mx_SpacePublicShare_shareButton::before { - mask-image: url("$(res)/img/element-icons/link.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/link.svg"); } &.mx_SpacePublicShare_inviteButton::before { 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/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss index d17e05bb05..def87caf5f 100644 --- a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss +++ b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss @@ -69,7 +69,7 @@ Please see LICENSE files in the repository root for full details. &::before { width: 14px; height: 14px; - mask-image: url("$(res)/img/element-icons/message/chevron-up.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg"); } &.mx_LegacyCallViewButtons_dropdownButton_collapsed::before { @@ -161,7 +161,7 @@ Please see LICENSE files in the repository root for full details. } &.mx_LegacyCallViewButtons_button_more::before { - mask-image: url("$(res)/img/voip/call-view/more.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); } /* Stateless buttons */ 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/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/compound/checkbox-32px.svg b/res/img/compound/checkbox-32px.svg deleted file mode 100644 index f1ee8b7dc2..0000000000 --- a/res/img/compound/checkbox-32px.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/compound/error-16px.svg b/res/img/compound/error-16px.svg deleted file mode 100644 index e2e68f431c..0000000000 --- a/res/img/compound/error-16px.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/compound/thread-16px.svg b/res/img/compound/thread-16px.svg deleted file mode 100644 index f1a678ebc9..0000000000 --- a/res/img/compound/thread-16px.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/compound/user.svg b/res/img/compound/user.svg deleted file mode 100644 index fa8bb87cd1..0000000000 --- a/res/img/compound/user.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/res/img/element-icons/Email-icon.svg b/res/img/element-icons/Email-icon.svg deleted file mode 100644 index c92b153cf0..0000000000 --- a/res/img/element-icons/Email-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/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/export.svg b/res/img/element-icons/export.svg deleted file mode 100644 index 038866c294..0000000000 --- a/res/img/element-icons/export.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/res/img/element-icons/home.svg b/res/img/element-icons/home.svg deleted file mode 100644 index ae5aceaec2..0000000000 --- a/res/img/element-icons/home.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/info.svg b/res/img/element-icons/info.svg deleted file mode 100644 index b5769074ab..0000000000 --- a/res/img/element-icons/info.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/element-icons/leave.svg b/res/img/element-icons/leave.svg deleted file mode 100644 index 773e27d4ce..0000000000 --- a/res/img/element-icons/leave.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/res/img/element-icons/link.svg b/res/img/element-icons/link.svg deleted file mode 100644 index 07dbdc0ccc..0000000000 --- a/res/img/element-icons/link.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/location.svg b/res/img/element-icons/location.svg deleted file mode 100644 index fc8337a43b..0000000000 --- a/res/img/element-icons/location.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/lock.svg b/res/img/element-icons/lock.svg deleted file mode 100644 index 5ad69d9f1a..0000000000 --- a/res/img/element-icons/lock.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/img/element-icons/maximise-expand.svg b/res/img/element-icons/maximise-expand.svg deleted file mode 100644 index a63f7e0022..0000000000 --- a/res/img/element-icons/maximise-expand.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/message/chevron-up.svg b/res/img/element-icons/message/chevron-up.svg deleted file mode 100644 index 4eb5ecc33e..0000000000 --- a/res/img/element-icons/message/chevron-up.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/img/element-icons/message/fwd.svg b/res/img/element-icons/message/fwd.svg deleted file mode 100644 index 8bcc70d092..0000000000 --- a/res/img/element-icons/message/fwd.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/message/overflow-large.svg b/res/img/element-icons/message/overflow-large.svg deleted file mode 100644 index 65a52e4aa2..0000000000 --- a/res/img/element-icons/message/overflow-large.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/message/thread.svg b/res/img/element-icons/message/thread.svg deleted file mode 100644 index dc23d8c14a..0000000000 --- a/res/img/element-icons/message/thread.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/img/element-icons/minimise-collapse.svg b/res/img/element-icons/minimise-collapse.svg deleted file mode 100644 index 535c56a36b..0000000000 --- a/res/img/element-icons/minimise-collapse.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/plus.svg b/res/img/element-icons/plus.svg deleted file mode 100644 index ea1972237d..0000000000 --- a/res/img/element-icons/plus.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/retry.svg b/res/img/element-icons/retry.svg deleted file mode 100644 index 6e5b8651fc..0000000000 --- a/res/img/element-icons/retry.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/res/img/element-icons/room/apps.svg b/res/img/element-icons/room/apps.svg deleted file mode 100644 index c90704752c..0000000000 --- a/res/img/element-icons/room/apps.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - 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/room/members.svg b/res/img/element-icons/room/members.svg deleted file mode 100644 index 50aa0aa466..0000000000 --- a/res/img/element-icons/room/members.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/res/img/element-icons/room/message-bar/reply.svg b/res/img/element-icons/room/message-bar/reply.svg deleted file mode 100644 index c32848a0b0..0000000000 --- a/res/img/element-icons/room/message-bar/reply.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/element-icons/room/room-summary.svg b/res/img/element-icons/room/room-summary.svg deleted file mode 100644 index b6ac258b18..0000000000 --- a/res/img/element-icons/room/room-summary.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/room/thread.svg b/res/img/element-icons/room/thread.svg deleted file mode 100644 index d1b8b35c91..0000000000 --- a/res/img/element-icons/room/thread.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file 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/element-icons/roomlist/favorite.svg b/res/img/element-icons/roomlist/favorite.svg deleted file mode 100644 index c601b69808..0000000000 --- a/res/img/element-icons/roomlist/favorite.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/roomlist/member-plus.svg b/res/img/element-icons/roomlist/member-plus.svg deleted file mode 100644 index 71269b54ca..0000000000 --- a/res/img/element-icons/roomlist/member-plus.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/roomlist/search.svg b/res/img/element-icons/roomlist/search.svg deleted file mode 100644 index b6a1ad100f..0000000000 --- a/res/img/element-icons/roomlist/search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/security.svg b/res/img/element-icons/security.svg deleted file mode 100644 index 3fe62b7af9..0000000000 --- a/res/img/element-icons/security.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/send-message.svg b/res/img/element-icons/send-message.svg deleted file mode 100644 index ce35bf8bc8..0000000000 --- a/res/img/element-icons/send-message.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/settings.svg b/res/img/element-icons/settings.svg deleted file mode 100644 index 05d640df27..0000000000 --- a/res/img/element-icons/settings.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/trashcan.svg b/res/img/element-icons/trashcan.svg deleted file mode 100644 index 4d0c4a6065..0000000000 --- a/res/img/element-icons/trashcan.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/img/feather-customised/alert-triangle.svg b/res/img/feather-customised/alert-triangle.svg deleted file mode 100644 index ceb664790f..0000000000 --- a/res/img/feather-customised/alert-triangle.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/feather-customised/check.svg b/res/img/feather-customised/check.svg deleted file mode 100644 index 85cd196511..0000000000 --- a/res/img/feather-customised/check.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - 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/dropdown-arrow.svg b/res/img/feather-customised/dropdown-arrow.svg deleted file mode 100644 index 24645d2bba..0000000000 --- a/res/img/feather-customised/dropdown-arrow.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/res/img/feather-customised/files.svg b/res/img/feather-customised/files.svg deleted file mode 100644 index e3bfe30ab0..0000000000 --- a/res/img/feather-customised/files.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/res/img/feather-customised/help-circle.svg b/res/img/feather-customised/help-circle.svg deleted file mode 100644 index 61b853aae8..0000000000 --- a/res/img/feather-customised/help-circle.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/res/img/feather-customised/image.svg b/res/img/feather-customised/image.svg deleted file mode 100644 index 9690aecf36..0000000000 --- a/res/img/feather-customised/image.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/feather-customised/plus.svg b/res/img/feather-customised/plus.svg deleted file mode 100644 index c747253139..0000000000 --- a/res/img/feather-customised/plus.svg +++ /dev/null @@ -1,4 +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/feather-customised/trash.custom.svg b/res/img/feather-customised/trash.custom.svg deleted file mode 100644 index dc1985ddb2..0000000000 --- a/res/img/feather-customised/trash.custom.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/res/img/feather-customised/warning-triangle.svg b/res/img/feather-customised/warning-triangle.svg deleted file mode 100644 index 4d7bfe0798..0000000000 --- a/res/img/feather-customised/warning-triangle.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - diff --git a/res/img/format/bold.svg b/res/img/format/bold.svg deleted file mode 100644 index 634d735031..0000000000 --- a/res/img/format/bold.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/format/code.svg b/res/img/format/code.svg deleted file mode 100644 index 0a29bcd7bd..0000000000 --- a/res/img/format/code.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/res/img/format/italics.svg b/res/img/format/italics.svg deleted file mode 100644 index 841afadffd..0000000000 --- a/res/img/format/italics.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/format/quote.svg b/res/img/format/quote.svg deleted file mode 100644 index 82d3403314..0000000000 --- a/res/img/format/quote.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/format/strikethrough.svg b/res/img/format/strikethrough.svg deleted file mode 100644 index fc02b0aae2..0000000000 --- a/res/img/format/strikethrough.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/res/img/icon-address-delete.svg b/res/img/icon-address-delete.svg deleted file mode 100644 index 1289d5aafc..0000000000 --- a/res/img/icon-address-delete.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 943783E9-DBD7-4D4E-BAC9-35437C17C2C4 - Created with sketchtool. - - - - - - - - - - diff --git a/res/img/icon-email-user.svg b/res/img/icon-email-user.svg deleted file mode 100644 index 2d41e06f98..0000000000 --- a/res/img/icon-email-user.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - 6F488856-F8EF-479C-9747-AB6E0945C7DE - Created with sketchtool. - - - - - - - - - - - - diff --git a/res/img/icon-invite-people.svg b/res/img/icon-invite-people.svg deleted file mode 100644 index 73500ebe06..0000000000 --- a/res/img/icon-invite-people.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/icon-return.svg b/res/img/icon-return.svg deleted file mode 100644 index 80da0f82aa..0000000000 --- a/res/img/icon-return.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - B542A09B-DBBF-41D4-A5FD-D05EE1E6BBC4 - Created with sketchtool. - - - - - - - - - - - - - \ No newline at end of file diff --git a/res/img/icon_context_delete.svg b/res/img/icon_context_delete.svg deleted file mode 100644 index 896b94ad13..0000000000 --- a/res/img/icon_context_delete.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/res/img/icons-create-room.svg b/res/img/icons-create-room.svg deleted file mode 100644 index 78c45563d1..0000000000 --- a/res/img/icons-create-room.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/icons-room-add.svg b/res/img/icons-room-add.svg deleted file mode 100644 index f0b7584df9..0000000000 --- a/res/img/icons-room-add.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/res/img/image-view/more.svg b/res/img/image-view/more.svg deleted file mode 100644 index 4f5fa6f9b9..0000000000 --- a/res/img/image-view/more.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/plus.svg b/res/img/plus.svg deleted file mode 100644 index e1d59ec6f4..0000000000 --- a/res/img/plus.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - Line + Line - Created with Sketch. - - - - - - - - diff --git a/res/img/voip/call-view/more.svg b/res/img/voip/call-view/more.svg deleted file mode 100644 index af15cf1630..0000000000 --- a/res/img/voip/call-view/more.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - 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/structures/AutocompleteInput.tsx b/src/components/structures/AutocompleteInput.tsx index 71d81c4ce5..b2ebd0ab7a 100644 --- a/src/components/structures/AutocompleteInput.tsx +++ b/src/components/structures/AutocompleteInput.tsx @@ -8,13 +8,13 @@ Please see LICENSE files in the repository root for full details. import React, { useState, ReactNode, ChangeEvent, KeyboardEvent, useRef, ReactElement } from "react"; import classNames from "classnames"; +import SearchIcon from "@vector-im/compound-design-tokens/assets/web/icons/search"; import Autocompleter from "../../autocomplete/AutocompleteProvider"; import { Key } from "../../Keyboard"; import { ICompletion } from "../../autocomplete/Autocompleter"; import AccessibleButton from "../../components/views/elements/AccessibleButton"; import { Icon as PillRemoveIcon } from "../../../res/img/icon-pill-remove.svg"; -import { Icon as SearchIcon } from "../../../res/img/element-icons/roomlist/search.svg"; import useFocus from "../../hooks/useFocus"; interface AutocompleteInputProps { diff --git a/src/components/structures/ErrorMessage.tsx b/src/components/structures/ErrorMessage.tsx index f9292c499c..9d633f40a6 100644 --- a/src/components/structures/ErrorMessage.tsx +++ b/src/components/structures/ErrorMessage.tsx @@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React, { ReactNode } from "react"; - -import { Icon as WarningBadgeIcon } from "../../../res/img/compound/error-16px.svg"; +import WarningBadgeIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"; interface ErrorMessageProps { message: string | ReactNode | null; diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index a3f8ac5165..2ac6c8d01b 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -17,8 +17,8 @@ import { SyncState, SyncStateData, } from "matrix-js-sdk/src/matrix"; +import WarningIcon from "@vector-im/compound-design-tokens/assets/web/icons/warning"; -import { Icon as WarningIcon } from "../../../res/img/feather-customised/warning-triangle.svg"; import { _t, _td } from "../../languageHandler"; import Resend from "../../Resend"; import dis from "../../dispatcher/dispatcher"; diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx index 006ec424bc..24e0c648ea 100644 --- a/src/components/structures/auth/ForgotPassword.tsx +++ b/src/components/structures/auth/ForgotPassword.tsx @@ -11,6 +11,7 @@ Please see LICENSE files in the repository root for full details. import React, { ReactNode } from "react"; import { logger } from "matrix-js-sdk/src/logger"; import { sleep } from "matrix-js-sdk/src/utils"; +import CheckboxIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; import { _t, _td } from "../../../languageHandler"; import Modal from "../../../Modal"; @@ -23,7 +24,6 @@ import AuthBody from "../../views/auth/AuthBody"; import PassphraseConfirmField from "../../views/auth/PassphraseConfirmField"; import StyledCheckbox from "../../views/elements/StyledCheckbox"; import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig"; -import { Icon as CheckboxIcon } from "../../../../res/img/compound/checkbox-32px.svg"; import { Icon as LockIcon } from "../../../../res/img/compound/padlock-32px.svg"; import QuestionDialog from "../../views/dialogs/QuestionDialog"; import { EnterEmail } from "./forgot-password/EnterEmail"; diff --git a/src/components/structures/auth/forgot-password/EnterEmail.tsx b/src/components/structures/auth/forgot-password/EnterEmail.tsx index 98e091ec2a..a4a6fa84f1 100644 --- a/src/components/structures/auth/forgot-password/EnterEmail.tsx +++ b/src/components/structures/auth/forgot-password/EnterEmail.tsx @@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details. */ import React, { ReactNode, useRef } from "react"; +import EmailIcon from "@vector-im/compound-design-tokens/assets/web/icons/email-solid"; -import { Icon as EmailIcon } from "../../../../../res/img/element-icons/Email-icon.svg"; import { _t, _td } from "../../../../languageHandler"; import EmailField from "../../../views/auth/EmailField"; import { ErrorMessage } from "../../ErrorMessage"; 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/dialogs/UploadConfirmDialog.tsx b/src/components/views/dialogs/UploadConfirmDialog.tsx index eefc8625be..829fb89fc4 100644 --- a/src/components/views/dialogs/UploadConfirmDialog.tsx +++ b/src/components/views/dialogs/UploadConfirmDialog.tsx @@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; +import FileIcon from "@vector-im/compound-design-tokens/assets/web/icons/files"; -import { Icon as FileIcon } from "../../../../res/img/feather-customised/files.svg"; import { _t } from "../../../languageHandler"; import { getBlobSafeMimeType } from "../../../utils/blobs"; import BaseDialog from "./BaseDialog"; diff --git a/src/components/views/elements/AppPermission.tsx b/src/components/views/elements/AppPermission.tsx index b5b4feee42..34f6a7af26 100644 --- a/src/components/views/elements/AppPermission.tsx +++ b/src/components/views/elements/AppPermission.tsx @@ -11,6 +11,7 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import { RoomMember } from "matrix-js-sdk/src/matrix"; import { Tooltip } from "@vector-im/compound-web"; +import HelpIcon from "@vector-im/compound-design-tokens/assets/web/icons/help"; import { _t } from "../../../languageHandler"; import SdkConfig from "../../../SdkConfig"; @@ -21,7 +22,6 @@ import BaseAvatar from "../avatars/BaseAvatar"; import Heading from "../typography/Heading"; import AccessibleButton from "./AccessibleButton"; import { parseUrl } from "../../../utils/UrlUtils"; -import { Icon as HelpIcon } from "../../../../res/img/feather-customised/help-circle.svg"; interface IProps { url: string; diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 011f9a446e..075d097569 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -16,6 +16,9 @@ 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 MaximiseIcon from "@vector-im/compound-design-tokens/assets/web/icons/expand"; +import CollapseIcon from "@vector-im/compound-design-tokens/assets/web/icons/collapse"; import AccessibleButton from "./AccessibleButton"; import { _t } from "../../../languageHandler"; @@ -33,11 +36,8 @@ import { showContextMenu, WidgetContextMenu } from "../context_menus/WidgetConte import WidgetAvatar from "../avatars/WidgetAvatar"; import LegacyCallHandler from "../../../LegacyCallHandler"; import { IApp, isAppWidget } from "../../../stores/WidgetStore"; -import { Icon as CollapseIcon } from "../../../../res/img/element-icons/minimise-collapse.svg"; -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/Pill.tsx b/src/components/views/elements/Pill.tsx index 569dcdf313..3761ad982d 100644 --- a/src/components/views/elements/Pill.tsx +++ b/src/components/views/elements/Pill.tsx @@ -10,6 +10,7 @@ import React, { ReactElement } from "react"; import classNames from "classnames"; import { Room, RoomMember } from "matrix-js-sdk/src/matrix"; import { Tooltip } from "@vector-im/compound-web"; +import UserIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile-solid"; import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; @@ -18,7 +19,6 @@ import { usePermalink } from "../../../hooks/usePermalink"; import RoomAvatar from "../avatars/RoomAvatar"; import MemberAvatar from "../avatars/MemberAvatar"; import { _t } from "../../../languageHandler"; -import { Icon as UserIcon } from "../../../../res/img/compound/user.svg"; export enum PillType { UserMention = "TYPE_USER_MENTION", 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/MapFallback.tsx b/src/components/views/location/MapFallback.tsx index cb1a579764..101a5d8066 100644 --- a/src/components/views/location/MapFallback.tsx +++ b/src/components/views/location/MapFallback.tsx @@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import classNames from "classnames"; +import LocationMarkerIcon from "@vector-im/compound-design-tokens/assets/web/icons/location-pin-solid"; -import { Icon as LocationMarkerIcon } from "../../../../res/img/element-icons/location.svg"; import { Icon as MapFallbackImage } from "../../../../res/img/location/map.svg"; import Spinner from "../elements/Spinner"; diff --git a/src/components/views/location/Marker.tsx b/src/components/views/location/Marker.tsx index 93a5c28831..58e1ce30fb 100644 --- a/src/components/views/location/Marker.tsx +++ b/src/components/views/location/Marker.tsx @@ -9,8 +9,8 @@ Please see LICENSE files in the repository root for full details. import React, { ReactNode, useState } from "react"; import classNames from "classnames"; import { RoomMember } from "matrix-js-sdk/src/matrix"; +import LocationIcon from "@vector-im/compound-design-tokens/assets/web/icons/location-pin-solid"; -import { Icon as LocationIcon } from "../../../../res/img/element-icons/location.svg"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; import MemberAvatar from "../avatars/MemberAvatar"; 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/location/ShareType.tsx b/src/components/views/location/ShareType.tsx index f580d4638d..0aa31b7bd4 100644 --- a/src/components/views/location/ShareType.tsx +++ b/src/components/views/location/ShareType.tsx @@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React, { HTMLAttributes, useContext } from "react"; +import LocationIcon from "@vector-im/compound-design-tokens/assets/web/icons/location-pin-solid"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { _t } from "../../../languageHandler"; @@ -14,7 +15,6 @@ import { OwnProfileStore } from "../../../stores/OwnProfileStore"; import BaseAvatar from "../avatars/BaseAvatar"; import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import Heading from "../typography/Heading"; -import { Icon as LocationIcon } from "../../../../res/img/element-icons/location.svg"; import { LocationShareType } from "./shareLocation"; import StyledLiveBeaconIcon from "../beacon/StyledLiveBeaconIcon"; diff --git a/src/components/views/location/ZoomButtons.tsx b/src/components/views/location/ZoomButtons.tsx index 2ba3d6a598..314a3cd2a4 100644 --- a/src/components/views/location/ZoomButtons.tsx +++ b/src/components/views/location/ZoomButtons.tsx @@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import * as maplibregl from "maplibre-gl"; +import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus"; import { _t } from "../../../languageHandler"; import AccessibleButton from "../elements/AccessibleButton"; -import { Icon as PlusIcon } from "../../../../res/img/element-icons/plus-button.svg"; import { Icon as MinusIcon } from "../../../../res/img/element-icons/minus-button.svg"; interface Props { diff --git a/src/components/views/messages/DecryptionFailureBody.tsx b/src/components/views/messages/DecryptionFailureBody.tsx index 9cdc2eac7b..6143befccf 100644 --- a/src/components/views/messages/DecryptionFailureBody.tsx +++ b/src/components/views/messages/DecryptionFailureBody.tsx @@ -10,11 +10,11 @@ import classNames from "classnames"; import React, { forwardRef, ForwardRefExoticComponent, useContext } from "react"; import { MatrixEvent } from "matrix-js-sdk/src/matrix"; import { DecryptionFailureCode } from "matrix-js-sdk/src/crypto-api"; +import WarningIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"; import { _t } from "../../../languageHandler"; import { IBodyProps } from "./IBodyProps"; import { LocalDeviceVerificationStateContext } from "../../../contexts/LocalDeviceVerificationStateContext"; -import { Icon as WarningBadgeIcon } from "../../../../res/img/compound/error-16px.svg"; function getErrorMessage(mxEvent: MatrixEvent, isVerified: boolean | undefined): string | React.JSX.Element { switch (mxEvent.decryptionFailureReason) { @@ -41,7 +41,7 @@ function getErrorMessage(mxEvent: MatrixEvent, isVerified: boolean | undefined): case DecryptionFailureCode.SENDER_IDENTITY_PREVIOUSLY_VERIFIED: return ( - + {_t("timeline|decryption_failure|sender_identity_previously_verified")} ); diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index 8bddee8352..9fe026dcbf 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -23,14 +23,14 @@ 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 ThreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads"; +import ReplyIcon from "@vector-im/compound-design-tokens/assets/web/icons/reply"; +import ContextMenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal"; +import ResendIcon from "@vector-im/compound-design-tokens/assets/web/icons/restart"; +import TrashcanIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete"; -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"; -import { Icon as ThreadIcon } from "../../../../res/img/element-icons/message/thread.svg"; -import { Icon as TrashcanIcon } from "../../../../res/img/element-icons/trashcan.svg"; -import { Icon as ReplyIcon } from "../../../../res/img/element-icons/room/message-bar/reply.svg"; 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 type { Relations } from "matrix-js-sdk/src/matrix"; 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/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx index 2a9af902dd..e9cbeec987 100644 --- a/src/components/views/rooms/EntityTile.tsx +++ b/src/components/views/rooms/EntityTile.tsx @@ -141,7 +141,7 @@ export default class EntityTile extends React.PureComponent {
{_t("action|invite")} diff --git a/src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx b/src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx index 603bc9953e..ad1a6ce9a6 100644 --- a/src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx +++ b/src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx @@ -7,11 +7,11 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; +import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link"; import { RovingAccessibleButton } from "../../../../accessibility/RovingTabIndex"; import Toolbar from "../../../../accessibility/Toolbar"; import { _t } from "../../../../languageHandler"; -import { Icon as LinkIcon } from "../../../../../res/img/element-icons/link.svg"; import { Icon as ViewInRoomIcon } from "../../../../../res/img/element-icons/view-in-room.svg"; import { ButtonEvent } from "../../elements/AccessibleButton"; 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/rooms/RoomKnocksBar.tsx b/src/components/views/rooms/RoomKnocksBar.tsx index 9bffe6c654..5ebc64d801 100644 --- a/src/components/views/rooms/RoomKnocksBar.tsx +++ b/src/components/views/rooms/RoomKnocksBar.tsx @@ -10,8 +10,8 @@ import { EventTimeline, JoinRule, MatrixError, Room, RoomStateEvent } from "matr import { KnownMembership } from "matrix-js-sdk/src/types"; import React, { ReactElement, ReactNode, useCallback, useState, VFC } from "react"; import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; +import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; -import { Icon as CheckIcon } from "../../../../res/img/feather-customised/check.svg"; import dis from "../../../dispatcher/dispatcher"; import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter"; import { _t } from "../../../languageHandler"; diff --git a/src/components/views/rooms/RoomTileSubtitle.tsx b/src/components/views/rooms/RoomTileSubtitle.tsx index 2295fbe6a0..aec6f2e9c7 100644 --- a/src/components/views/rooms/RoomTileSubtitle.tsx +++ b/src/components/views/rooms/RoomTileSubtitle.tsx @@ -8,12 +8,12 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import classNames from "classnames"; +import ThreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid"; import { MessagePreview } from "../../../stores/room-list/MessagePreviewStore"; import { Call } from "../../../models/Call"; import { RoomTileCallSummary } from "./RoomTileCallSummary"; import { VoiceBroadcastRoomSubtitle } from "../../../voice-broadcast"; -import { Icon as ThreadIcon } from "../../../../res/img/compound/thread-16px.svg"; interface Props { call: Call | null; diff --git a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx index d99a2e5d31..ecad85e889 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 CaretIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down"; -import { Icon as CaretIcon } from "../../../../../res/img/feather-customised/dropdown-arrow.svg"; import { _t } from "../../../../languageHandler"; import AccessibleButton from "../../elements/AccessibleButton"; diff --git a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx index 8de8bad7e7..bb7a2bab90 100644 --- a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx +++ b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx @@ -10,8 +10,8 @@ import { EventTimeline, MatrixError, Room, RoomMember, RoomStateEvent } from "ma import { KnownMembership } from "matrix-js-sdk/src/types"; import React, { useCallback, useState, VFC } from "react"; import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; +import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; -import { Icon as CheckIcon } from "../../../../../../res/img/feather-customised/check.svg"; import { formatRelativeTime } from "../../../../../DateUtils"; import { useTypedEventEmitterState } from "../../../../../hooks/useEventEmitter"; import { _t } from "../../../../../languageHandler"; diff --git a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx index b6a85d08bd..3ed5ce4671 100644 --- a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx @@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details. import React, { ChangeEvent, useMemo } from "react"; import CameraCircle from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid"; +import MembersIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile-solid"; +import FavoriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite-solid"; +import HomeIcon from "@vector-im/compound-design-tokens/assets/web/icons/home-solid"; -import { Icon as HomeIcon } from "../../../../../../res/img/element-icons/home.svg"; -import { Icon as FavoriteIcon } from "../../../../../../res/img/element-icons/roomlist/favorite.svg"; -import { Icon as MembersIcon } from "../../../../../../res/img/element-icons/room/members.svg"; import { Icon as HashCircleIcon } from "../../../../../../res/img/element-icons/roomlist/hash-circle.svg"; import { _t } from "../../../../../languageHandler"; import SettingsStore from "../../../../../settings/SettingsStore"; diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index d300eb6214..0494134ccd 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -8,6 +8,9 @@ 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 MembersIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile-solid"; +import FavoriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite-solid"; import { _t } from "../../../languageHandler"; import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu"; @@ -21,9 +24,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"; import DevtoolsDialog from "../dialogs/DevtoolsDialog"; import { SdkContextClass } from "../../../contexts/SDKContext"; diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx index acca95b07c..19edc90075 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx @@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; - -import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg"; +import WarningIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"; interface Props { message: string; diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx index 4c7d261102..638f312ddc 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx @@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; +import WarningIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"; -import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg"; import { _t } from "../../../languageHandler"; export const VoiceBroadcastRecordingConnectionError: React.FC = () => { diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 05094a2ca1..d939b4be95 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -174,9 +174,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" + > + +
@@ -259,9 +268,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" + > + +
@@ -409,9 +427,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/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap b/test/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap index 1f1c5dff73..fe153adcb9 100644 --- a/test/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap +++ b/test/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/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap b/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap index f78f2e4642..c7a0523519 100644 --- a/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap +++ b/test/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/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap index 6c7bec7cf1..421fa08822 100644 --- a/test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap +++ b/test/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/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap index 93f53a7ece..1d9fd387e7 100644 --- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap +++ b/test/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/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap index a8d2de3400..d81597f757 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap +++ b/test/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/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap index 275f4430c7..b3e54429bd 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap +++ b/test/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" + > + +