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..318bfe6547 100644 --- a/res/css/views/rooms/_MessageComposerFormatBar.pcss +++ b/res/css/views/rooms/_MessageComposerFormatBar.pcss @@ -63,27 +63,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-image: url("@vector-im/compound-design-tokens/icons/link.svg"); mask-size: 18px; } } 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";