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/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-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/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/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/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss index ecb4c55a92..1bf5b87594 100644 --- a/res/css/views/context_menus/_MessageContextMenu.pcss +++ b/res/css/views/context_menus/_MessageContextMenu.pcss @@ -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 { diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss index f68d7cc416..c4f94bfde9 100644 --- a/res/css/views/dialogs/_SpotlightDialog.pcss +++ b/res/css/views/dialogs/_SpotlightDialog.pcss @@ -121,13 +121,11 @@ 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: 14px; + width: inherit; + height: inherit; position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); + left: 0; mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); } } diff --git a/res/css/views/directory/_NetworkDropdown.pcss b/res/css/views/directory/_NetworkDropdown.pcss index b786950668..df82d17555 100644 --- a/res/css/views/directory/_NetworkDropdown.pcss +++ b/res/css/views/directory/_NetworkDropdown.pcss @@ -64,9 +64,9 @@ 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%; 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/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/_ReplyPreview.pcss b/res/css/views/rooms/_ReplyPreview.pcss index f6ee9f9e48..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("@vector-im/compound-design-tokens/icons/close.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/_TopUnreadMessagesBar.pcss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss index cdd013c743..735d98f5bb 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.pcss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.pcss @@ -65,6 +65,7 @@ Please see LICENSE files in the repository root for full details. height: 18px; mask-image: url("@vector-im/compound-design-tokens/icons/close.svg"); mask-repeat: no-repeat; - mask-size: contain; + mask-size: 16px; + mask-position: center; background: var(--cpd-color-icon-tertiary); } diff --git a/res/css/views/user-onboarding/_UserOnboardingButton.pcss b/res/css/views/user-onboarding/_UserOnboardingButton.pcss index f38c362e8f..01e27aa143 100644 --- a/res/css/views/user-onboarding/_UserOnboardingButton.pcss +++ b/res/css/views/user-onboarding/_UserOnboardingButton.pcss @@ -52,13 +52,12 @@ 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%); + 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 bdeb39c2a4..4056d45d02 100644 --- a/res/css/views/user-onboarding/_UserOnboardingTask.pcss +++ b/res/css/views/user-onboarding/_UserOnboardingTask.pcss @@ -75,12 +75,12 @@ Please see LICENSE files in the repository root for full details. content: ""; mask-repeat: no-repeat; mask-position: center; - mask-size: contain; - width: 24px; - height: 24px; + mask-size: 24px; + width: inherit; + height: inherit; position: absolute; - left: calc(50% - 12px); - top: calc(50% - 12px); + left: 0; + top: 0; mask-image: url("@vector-im/compound-design-tokens/icons/check.svg"); animation-duration: 300ms; diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index b6a0c8d661..075d097569 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -16,7 +16,7 @@ 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 MenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal"; +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"; @@ -806,7 +806,7 @@ export default class AppTile extends React.Component { ref={this.contextMenuButton} onClick={this.onContextMenuClick} > - + )} diff --git a/src/components/views/elements/Tag.tsx b/src/components/views/elements/Tag.tsx index 0c4d60cdf1..b9f8780628 100644 --- a/src/components/views/elements/Tag.tsx +++ b/src/components/views/elements/Tag.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React, { DetailedHTMLProps, HTMLAttributes } from "react"; -import CancelRounded from "@vector-im/compound-design-tokens/assets/web/icons/close"; +import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; import AccessibleButton from "./AccessibleButton"; @@ -30,7 +30,7 @@ export const Tag: React.FC = ({ icon, label, onDeleteClick, disabled = f onClick={onDeleteClick} disabled={disabled} > - + )} diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx index 7a6a54a5b5..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/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" + > + +