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 1c88bb4c1f..0ec66fa4ef 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/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png b/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png index afe3331d2e..7e1195c82d 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png and b/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png index 76a9308b35..bceaa4a283 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ diff --git a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png index 4652833628..d8e7d62819 100644 Binary files a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png index 4745d81d22..6e8ffeee8e 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png index 273be0a269..d69fca4738 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png index 594ac521e0..5701a63fcf 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png index 1c83d343d0..c2e8afbd7b 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png index 4745d81d22..6e8ffeee8e 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png index c69649ed0e..1defab7208 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png index 78ecc64c71..2015220013 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png differ diff --git a/res/css/structures/_GenericDropdownMenu.pcss b/res/css/structures/_GenericDropdownMenu.pcss index 7f7342416f..d58c29f81a 100644 --- a/res/css/structures/_GenericDropdownMenu.pcss +++ b/res/css/structures/_GenericDropdownMenu.pcss @@ -99,11 +99,11 @@ Please see LICENSE files in the repository root for full details. &[aria-checked="true"]::before { content: ""; - width: 12px; - height: 12px; - margin-left: -20px; - margin-right: 8px; - mask-image: url("$(res)/img/feather-customised/check.svg"); + width: 16px; + height: 16px; + margin-left: -22px; + margin-right: 6px; + 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/_RoomStatusBar.pcss b/res/css/structures/_RoomStatusBar.pcss index 2e5af46389..b131009868 100644 --- a/res/css/structures/_RoomStatusBar.pcss +++ b/res/css/structures/_RoomStatusBar.pcss @@ -118,7 +118,7 @@ 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 { diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss index 268280f08d..85b415ae2b 100644 --- a/res/css/views/context_menus/_MessageContextMenu.pcss +++ b/res/css/views/context_menus/_MessageContextMenu.pcss @@ -57,7 +57,7 @@ Please see LICENSE files in the repository root for full details. } .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 { @@ -92,7 +92,7 @@ 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 { diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss index 7a3ca6bd3c..753e4155cf 100644 --- a/res/css/views/dialogs/_InviteDialog.pcss +++ b/res/css/views/dialogs/_InviteDialog.pcss @@ -351,7 +351,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/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/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/_ImageView.pcss b/res/css/views/elements/_ImageView.pcss index 2d48dea994..03041fe255 100644 --- a/res/css/views/elements/_ImageView.pcss +++ b/res/css/views/elements/_ImageView.pcss @@ -129,7 +129,8 @@ $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"); + mask-size: 28px; } .mx_ImageView_button_close { 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/_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/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss index b8333defdf..4fe68f08d0 100644 --- a/res/css/views/messages/_MessageActionBar.pcss +++ b/res/css/views/messages/_MessageActionBar.pcss @@ -122,4 +122,8 @@ Please see LICENSE files in the repository root for full details. --MessageActionBar-icon-size: 12px; } } + + .mx_MessageActionBar_optionsButton { + --MessageActionBar-icon-size: 22px; + } } 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/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss index c350a450ad..a9743d945b 100644 --- a/res/css/views/right_panel/_ThreadPanel.pcss +++ b/res/css/views/right_panel/_ThreadPanel.pcss @@ -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/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index 5e3e8b0303..d176a0d627 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -277,7 +277,8 @@ 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"); + mask-size: 24px; } .mx_MessageComposer_sendMessage { 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/voip/LegacyCallView/_LegacyCallViewButtons.pcss b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss index d17e05bb05..369527b79f 100644 --- a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss +++ b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss @@ -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/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/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/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/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/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/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/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index a3f8ac5165..bd236f2286 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"; -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/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx index 12cec19a42..14093587ad 100644 --- a/src/components/views/elements/Pill.tsx +++ b/src/components/views/elements/Pill.tsx @@ -10,7 +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 LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link"; +import { LinkIcon, UserSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; @@ -18,7 +18,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", @@ -63,7 +62,7 @@ const PillMemberAvatar: React.FC<{ if (member) { return