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 2214206cab..198e4dfe08 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/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss index 823b96af2c..9002a3229c 100644 --- a/res/css/views/context_menus/_MessageContextMenu.pcss +++ b/res/css/views/context_menus/_MessageContextMenu.pcss @@ -65,11 +65,11 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageContextMenu_iconSource::before { - mask-image: url("$(res)/img/element-icons/room/format-bar/code.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg"); } .mx_MessageContextMenu_iconQuote::before { - mask-image: url("$(res)/img/element-icons/room/format-bar/quote.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg"); } .mx_MessageContextMenu_iconPin::before { diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index c8f4105ed2..dde96afd6a 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -265,11 +265,11 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageComposer_rich_text::before { - mask-image: url("$(res)/img/element-icons/room/composer/rich_text.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg"); } .mx_MessageComposer_location::before { - mask-image: url("$(res)/img/element-icons/room/composer/location.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/location-pin-solid.svg"); } .mx_MessageComposer_stickers::before { diff --git a/res/css/views/rooms/_MessageComposerFormatBar.pcss b/res/css/views/rooms/_MessageComposerFormatBar.pcss index cb412ff829..36bfe477d7 100644 --- a/res/css/views/rooms/_MessageComposerFormatBar.pcss +++ b/res/css/views/rooms/_MessageComposerFormatBar.pcss @@ -55,6 +55,7 @@ Please see LICENSE files in the repository root for full details. width: 100%; mask-repeat: no-repeat; mask-position: center; + mask-size: 20px; background-color: var(--cpd-color-icon-secondary); } @@ -63,28 +64,27 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageComposerFormatBar_buttonIconBold::after { - mask-image: url("$(res)/img/element-icons/room/format-bar/bold.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/bold.svg"); } .mx_MessageComposerFormatBar_buttonIconItalic::after { - mask-image: url("$(res)/img/element-icons/room/format-bar/italic.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/italic.svg"); } .mx_MessageComposerFormatBar_buttonIconStrikethrough::after { - mask-image: url("$(res)/img/element-icons/room/format-bar/strikethrough.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/strikethrough.svg"); } .mx_MessageComposerFormatBar_buttonIconQuote::after { - mask-image: url("$(res)/img/element-icons/room/format-bar/quote.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg"); } .mx_MessageComposerFormatBar_buttonIconCode::after { - mask-image: url("$(res)/img/element-icons/room/format-bar/code.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg"); } .mx_MessageComposerFormatBar_buttonIconInsertLink::after { - mask-image: url("$(res)/img/element-icons/link.svg"); - mask-size: 18px; + mask-image: url("@vector-im/compound-design-tokens/icons/link.svg"); } } diff --git a/res/img/element-icons/room/composer/bold.svg b/res/img/element-icons/room/composer/bold.svg deleted file mode 100644 index 043f9c064c..0000000000 --- a/res/img/element-icons/room/composer/bold.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/room/composer/bulleted_list.svg b/res/img/element-icons/room/composer/bulleted_list.svg deleted file mode 100644 index df07604567..0000000000 --- a/res/img/element-icons/room/composer/bulleted_list.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/res/img/element-icons/room/composer/code_block.svg b/res/img/element-icons/room/composer/code_block.svg deleted file mode 100644 index e2949ec8c7..0000000000 --- a/res/img/element-icons/room/composer/code_block.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/room/composer/indent_decrease.svg b/res/img/element-icons/room/composer/indent_decrease.svg deleted file mode 100644 index 660c3e55ca..0000000000 --- a/res/img/element-icons/room/composer/indent_decrease.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/res/img/element-icons/room/composer/indent_increase.svg b/res/img/element-icons/room/composer/indent_increase.svg deleted file mode 100644 index f40162e05d..0000000000 --- a/res/img/element-icons/room/composer/indent_increase.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/res/img/element-icons/room/composer/inline_code.svg b/res/img/element-icons/room/composer/inline_code.svg deleted file mode 100644 index d9f75fde0c..0000000000 --- a/res/img/element-icons/room/composer/inline_code.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/room/composer/italic.svg b/res/img/element-icons/room/composer/italic.svg deleted file mode 100644 index c6cd755d94..0000000000 --- a/res/img/element-icons/room/composer/italic.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/room/composer/link.svg b/res/img/element-icons/room/composer/link.svg deleted file mode 100644 index 8c7429e16a..0000000000 --- a/res/img/element-icons/room/composer/link.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/room/composer/location.svg b/res/img/element-icons/room/composer/location.svg deleted file mode 100644 index 7118645443..0000000000 --- a/res/img/element-icons/room/composer/location.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/room/composer/numbered_list.svg b/res/img/element-icons/room/composer/numbered_list.svg deleted file mode 100644 index 5748c97766..0000000000 --- a/res/img/element-icons/room/composer/numbered_list.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/res/img/element-icons/room/composer/quote.svg b/res/img/element-icons/room/composer/quote.svg deleted file mode 100644 index e83480a6ee..0000000000 --- a/res/img/element-icons/room/composer/quote.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/res/img/element-icons/room/composer/rich_text.svg b/res/img/element-icons/room/composer/rich_text.svg deleted file mode 100644 index d2da9d2551..0000000000 --- a/res/img/element-icons/room/composer/rich_text.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/res/img/element-icons/room/composer/strikethrough.svg b/res/img/element-icons/room/composer/strikethrough.svg deleted file mode 100644 index 9a9761729b..0000000000 --- a/res/img/element-icons/room/composer/strikethrough.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/element-icons/room/composer/underline.svg b/res/img/element-icons/room/composer/underline.svg deleted file mode 100644 index f253c874ea..0000000000 --- a/res/img/element-icons/room/composer/underline.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/room/format-bar/bold.svg b/res/img/element-icons/room/format-bar/bold.svg deleted file mode 100644 index e21210c525..0000000000 --- a/res/img/element-icons/room/format-bar/bold.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/room/format-bar/code.svg b/res/img/element-icons/room/format-bar/code.svg deleted file mode 100644 index 38f94457e8..0000000000 --- a/res/img/element-icons/room/format-bar/code.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/room/format-bar/italic.svg b/res/img/element-icons/room/format-bar/italic.svg deleted file mode 100644 index 270c4f5f15..0000000000 --- a/res/img/element-icons/room/format-bar/italic.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/room/format-bar/quote.svg b/res/img/element-icons/room/format-bar/quote.svg deleted file mode 100644 index 3d3d444487..0000000000 --- a/res/img/element-icons/room/format-bar/quote.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/res/img/element-icons/room/format-bar/strikethrough.svg b/res/img/element-icons/room/format-bar/strikethrough.svg deleted file mode 100644 index 775e0cf8ec..0000000000 --- a/res/img/element-icons/room/format-bar/strikethrough.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx index ace96388a8..569dcdf313 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 LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; @@ -17,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 LinkIcon } from "../../../../res/img/element-icons/room/composer/link.svg"; import { Icon as UserIcon } from "../../../../res/img/compound/user.svg"; export enum PillType { diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx index 85f1ad79bd..619037a89f 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx @@ -9,19 +9,19 @@ Please see LICENSE files in the repository root for full details. import React, { MouseEventHandler, ReactNode } from "react"; import { FormattingFunctions, AllActionStates, ActionState } from "@matrix-org/matrix-wysiwyg"; import classNames from "classnames"; +import BoldIcon from "@vector-im/compound-design-tokens/assets/web/icons/bold"; +import BulletedListIcon from "@vector-im/compound-design-tokens/assets/web/icons/list-bulleted"; +import CodeBlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/code"; +import UnIndentIcon from "@vector-im/compound-design-tokens/assets/web/icons/indent-decrease"; +import IndentIcon from "@vector-im/compound-design-tokens/assets/web/icons/indent-increase"; +import InlineCodeIcon from "@vector-im/compound-design-tokens/assets/web/icons/inline-code"; +import ItalicIcon from "@vector-im/compound-design-tokens/assets/web/icons/italic"; +import NumberedListIcon from "@vector-im/compound-design-tokens/assets/web/icons/list-numbered"; +import QuoteIcon from "@vector-im/compound-design-tokens/assets/web/icons/quote"; +import StrikeThroughIcon from "@vector-im/compound-design-tokens/assets/web/icons/strikethrough"; +import UnderlineIcon from "@vector-im/compound-design-tokens/assets/web/icons/underline"; +import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link"; -import { Icon as BoldIcon } from "../../../../../../res/img/element-icons/room/composer/bold.svg"; -import { Icon as ItalicIcon } from "../../../../../../res/img/element-icons/room/composer/italic.svg"; -import { Icon as UnderlineIcon } from "../../../../../../res/img/element-icons/room/composer/underline.svg"; -import { Icon as StrikeThroughIcon } from "../../../../../../res/img/element-icons/room/composer/strikethrough.svg"; -import { Icon as QuoteIcon } from "../../../../../../res/img/element-icons/room/composer/quote.svg"; -import { Icon as InlineCodeIcon } from "../../../../../../res/img/element-icons/room/composer/inline_code.svg"; -import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/composer/link.svg"; -import { Icon as BulletedListIcon } from "../../../../../../res/img/element-icons/room/composer/bulleted_list.svg"; -import { Icon as NumberedListIcon } from "../../../../../../res/img/element-icons/room/composer/numbered_list.svg"; -import { Icon as CodeBlockIcon } from "../../../../../../res/img/element-icons/room/composer/code_block.svg"; -import { Icon as IndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_increase.svg"; -import { Icon as UnIndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_decrease.svg"; import { _t } from "../../../../../languageHandler"; import AccessibleButton, { ButtonEvent } from "../../../elements/AccessibleButton"; import { openLinkModal } from "./LinkModal"; diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx index ea4019f8d4..f7e5b24c14 100644 --- a/test/components/views/messages/TextualBody-test.tsx +++ b/test/components/views/messages/TextualBody-test.tsx @@ -204,7 +204,7 @@ describe("", () => { const { container } = getComponent({ mxEvent: ev }); const content = container.querySelector(".mx_EventTile_body"); expect(content.innerHTML).toMatchInlineSnapshot( - `"Visit
#room:example.com"`, + `"Visit #room:example.com"`, ); }); diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap index 56de44137f..56c6f9f81e 100644 --- a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap @@ -399,9 +399,18 @@ exports[` renders plain-text m.text correctly should pillify a pe class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/!abc123" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + diff --git a/test/components/views/rooms/wysiwyg_composer/components/__snapshots__/FormattingButtons-test.tsx.snap b/test/components/views/rooms/wysiwyg_composer/components/__snapshots__/FormattingButtons-test.tsx.snap index c11e624598..6516542879 100644 --- a/test/components/views/rooms/wysiwyg_composer/components/__snapshots__/FormattingButtons-test.tsx.snap +++ b/test/components/views/rooms/wysiwyg_composer/components/__snapshots__/FormattingButtons-test.tsx.snap @@ -11,9 +11,18 @@ exports[`FormattingButtons renders in german 1`] = ` role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +