diff --git a/playwright/e2e/timeline/timeline.spec.ts b/playwright/e2e/timeline/timeline.spec.ts index 1abf229e2e..e8ef0e577c 100644 --- a/playwright/e2e/timeline/timeline.spec.ts +++ b/playwright/e2e/timeline/timeline.spec.ts @@ -653,7 +653,7 @@ test.describe("Timeline", () => { const toggleEventButton = viewSourceEventExpanded.getByRole("button", { name: "toggle event" }); // Check size and position of toggle on expanded view source event // See: _ViewSourceEvent.pcss - await expect(toggleEventButton).toHaveCSS("height", "12px"); // --ViewSourceEvent_toggle-size + await expect(toggleEventButton).toHaveCSS("height", "16px"); // --ViewSourceEvent_toggle-size await expect(toggleEventButton).toHaveCSS("align-self", "flex-end"); // Click again to collapse the source await toggleEventButton.click({ position: { x: 0, y: 0 } }); @@ -679,7 +679,7 @@ test.describe("Timeline", () => { ); // Click view source event toggle - await viewSourceEventIrc.getByRole("button", { name: "toggle event" }).click({ position: { x: 0, y: 0 } }); + await viewSourceEventIrc.getByRole("button", { name: "toggle event" }).click({ position: { x: 8, y: 8 } }); // Make sure the expand toggle worked await expect(page.locator(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded")).toBeVisible(); diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png index c195186db8..2f9c3841ac 100644 Binary files a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png differ diff --git a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png index 9a38579e21..bbc29d4be3 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png differ diff --git a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png index f5bc02ef1e..120b80320b 100644 Binary files a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png and b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-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 d8e7d62819..e7f09c67fb 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/widgets/layout.spec.ts/apps-drawer-linux.png b/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png index 20618f5d66..203991bc32 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/components/views/location/_ZoomButtons.pcss b/res/css/components/views/location/_ZoomButtons.pcss index e44c929432..4e9d3b124b 100644 --- a/res/css/components/views/location/_ZoomButtons.pcss +++ b/res/css/components/views/location/_ZoomButtons.pcss @@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details. box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25); .mx_ZoomButtons_icon { - $ZoomButtons_icon-size: 10px; + $ZoomButtons_icon-size: 12px; height: $ZoomButtons_icon-size; width: $ZoomButtons_icon-size; diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index f3bd82cc96..7875e62973 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -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 */ } } @@ -434,7 +434,7 @@ Please see LICENSE files in the repository root for full details. } .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/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss index 85b415ae2b..20d7ed1d13 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 { diff --git a/res/css/views/elements/_InviteReason.pcss b/res/css/views/elements/_InviteReason.pcss index 3060e8a16e..c57c59ae1f 100644 --- a/res/css/views/elements/_InviteReason.pcss +++ b/res/css/views/elements/_InviteReason.pcss @@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details. content: ""; margin-right: 8px; background-color: $secondary-content; - mask-image: url("$(res)/img/feather-customised/eye.svg"); + mask-image: url("$(res)/img/element-icons/eye.svg"); display: inline-block; width: 18px; height: 14px; diff --git a/res/css/views/messages/_MImageBody.pcss b/res/css/views/messages/_MImageBody.pcss index bb6ca1b782..6a6f31948a 100644 --- a/res/css/views/messages/_MImageBody.pcss +++ b/res/css/views/messages/_MImageBody.pcss @@ -100,7 +100,7 @@ Please see LICENSE files in the repository root for full details. margin-right: 8px; background-color: $accent; - mask-image: url("$(res)/img/feather-customised/eye.svg"); + mask-image: url("$(res)/img/element-icons/eye.svg"); display: inline-block; width: 18px; height: 14px; diff --git a/res/css/views/messages/_ViewSourceEvent.pcss b/res/css/views/messages/_ViewSourceEvent.pcss index b8b240816f..6b497719d9 100644 --- a/res/css/views/messages/_ViewSourceEvent.pcss +++ b/res/css/views/messages/_ViewSourceEvent.pcss @@ -25,19 +25,18 @@ Please see LICENSE files in the repository root for full details. } .mx_ViewSourceEvent_toggle { - --ViewSourceEvent_toggle-size: 12px; + --ViewSourceEvent_toggle-size: 16px; visibility: hidden; - /* override styles from AccessibleButton */ - border-radius: 0; /* icon */ - mask-repeat: no-repeat; - mask-position: 0 center; - mask-size: auto var(--ViewSourceEvent_toggle-size); width: var(--ViewSourceEvent_toggle-size); min-width: var(--ViewSourceEvent_toggle-size); - background-color: $accent; - mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); + + svg { + color: $accent; + width: var(--ViewSourceEvent_toggle-size); + height: var(--ViewSourceEvent_toggle-size); + } .mx_EventTile:hover & { visibility: visible; @@ -47,8 +46,5 @@ Please see LICENSE files in the repository root for full details. &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle { align-self: flex-end; height: var(--ViewSourceEvent_toggle-size); - mask-position: 0 bottom; - margin-bottom: 5px; - mask-image: url("$(res)/img/element-icons/minimise-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/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..89aac3c58b 100644 --- a/res/css/views/rooms/_JumpToBottomButton.pcss +++ b/res/css/views/rooms/_JumpToBottomButton.pcss @@ -53,9 +53,9 @@ 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-size: 24px; mask-position: center 6px; transform: rotate(180deg); background: var(--cpd-color-icon-tertiary); diff --git a/res/css/views/rooms/_RoomListHeader.pcss b/res/css/views/rooms/_RoomListHeader.pcss index e474cacfcd..07aa1cbf5b 100644 --- a/res/css/views/rooms/_RoomListHeader.pcss +++ b/res/css/views/rooms/_RoomListHeader.pcss @@ -75,7 +75,7 @@ Please see LICENSE files in the repository root for full details. mask-size: contain; mask-repeat: no-repeat; background-color: $secondary-content; - mask-image: url("$(res)/img/element-icons/roomlist/plus.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg"); } &:hover { @@ -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/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss index 2e90c68f87..d4d6f05719 100644 --- a/res/css/views/rooms/_RoomSublist.pcss +++ b/res/css/views/rooms/_RoomSublist.pcss @@ -127,7 +127,7 @@ Please see LICENSE files in the repository root for full details. } .mx_RoomSublist_auxButton::before { - mask-image: url("$(res)/img/element-icons/roomlist/plus.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg"); } .mx_RoomSublist_menuButton::before { diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.pcss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss index 95164105d3..dafe192e76 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.pcss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.pcss @@ -41,9 +41,9 @@ 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-size: 24px; mask-position: center; background: var(--cpd-color-icon-tertiary); } diff --git a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss index 369527b79f..a96fe20ec2 100644 --- a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss +++ b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss @@ -67,9 +67,9 @@ Please see LICENSE files in the repository root for full details. bottom: 0; &::before { - width: 14px; - height: 14px; - mask-image: url("$(res)/img/element-icons/message/chevron-up.svg"); + width: 16px; + height: 16px; + mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg"); } &.mx_LegacyCallViewButtons_dropdownButton_collapsed::before { diff --git a/res/img/element-icons/add-photo.svg b/res/img/element-icons/add-photo.svg deleted file mode 100644 index bde5253bea..0000000000 --- a/res/img/element-icons/add-photo.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/community-rooms.svg b/res/img/element-icons/community-rooms.svg deleted file mode 100644 index 570b45a488..0000000000 --- a/res/img/element-icons/community-rooms.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - 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/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/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/minus-button.svg b/res/img/element-icons/minus-button.svg deleted file mode 100644 index 6e7ea87c0b..0000000000 --- a/res/img/element-icons/minus-button.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/plus-button.svg b/res/img/element-icons/plus-button.svg deleted file mode 100644 index 9a14c85ee5..0000000000 --- a/res/img/element-icons/plus-button.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/roomlist/archived.svg b/res/img/element-icons/roomlist/archived.svg deleted file mode 100644 index 4d30195082..0000000000 --- a/res/img/element-icons/roomlist/archived.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/roomlist/plus.svg b/res/img/element-icons/roomlist/plus.svg deleted file mode 100644 index f6d80ac7ef..0000000000 --- a/res/img/element-icons/roomlist/plus.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - 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/eye.svg b/res/img/feather-customised/eye.svg deleted file mode 100644 index fd06bf7b21..0000000000 --- a/res/img/feather-customised/eye.svg +++ /dev/null @@ -1,6 +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/widget/external-link.svg b/res/img/feather-customised/widget/external-link.svg deleted file mode 100644 index e2df9883fa..0000000000 --- a/res/img/feather-customised/widget/external-link.svg +++ /dev/null @@ -1,5 +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/subtract.svg b/res/img/subtract.svg deleted file mode 100644 index 55e25831ef..0000000000 --- a/res/img/subtract.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index becd4cdecd..4803ac5272 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -16,7 +16,12 @@ 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 { + OverflowHorizontalIcon, + MinusIcon, + ExpandIcon, + CollapseIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import AccessibleButton from "./AccessibleButton"; import { _t } from "../../../languageHandler"; @@ -34,10 +39,7 @@ 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 PopoutIcon } from "../../../../res/img/external-link.svg"; import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore"; import { OwnProfileStore } from "../../../stores/OwnProfileStore"; import { UPDATE_EVENT } from "../../../stores/AsyncStore"; @@ -762,7 +764,7 @@ export default class AppTile extends React.Component { {isMaximised ? ( ) : ( - + )} , ); @@ -774,7 +776,7 @@ export default class AppTile extends React.Component { title={_t("action|minimise")} onClick={this.onMinimiseClicked} > - + , ); } @@ -809,7 +811,7 @@ export default class AppTile extends React.Component { ref={this.contextMenuButton} onClick={this.onContextMenuClick} > - + )} diff --git a/src/components/views/location/ZoomButtons.tsx b/src/components/views/location/ZoomButtons.tsx index 2ba3d6a598..1b370744de 100644 --- a/src/components/views/location/ZoomButtons.tsx +++ b/src/components/views/location/ZoomButtons.tsx @@ -8,11 +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, MinusIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; 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 { map: maplibregl.Map; diff --git a/src/components/views/messages/ViewSourceEvent.tsx b/src/components/views/messages/ViewSourceEvent.tsx index 6f8dd7f270..8352f0f7e2 100644 --- a/src/components/views/messages/ViewSourceEvent.tsx +++ b/src/components/views/messages/ViewSourceEvent.tsx @@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; +import { CollapseIcon, ExpandIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { _t } from "../../../languageHandler"; @@ -73,7 +74,9 @@ export default class ViewSourceEvent extends React.PureComponent title={_t("devtools|toggle_event")} className="mx_ViewSourceEvent_toggle" onClick={this.onToggle} - /> + > + {expanded ? : } + ); } diff --git a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 520c0ee191..01302e920a 100644 --- a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -153,9 +153,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" + > + +
-
+ + +