From 7ef8663388d447e0eb6c9f0ab54566b4852854e7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 4 Oct 2024 13:42:15 +0100 Subject: [PATCH] Prefer wrapped Compound React icon assets (#122) * Prefer wrapped Compound React icon assets Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add eslint rule for CDT svg imports Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix height Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .eslintrc.js | 5 + src/components/structures/RoomStatusBar.tsx | 2 +- src/components/views/auth/LoginWithQRFlow.tsx | 4 +- .../views/messages/MessageActionBar.tsx | 4 +- .../views/messages/PinnedMessageBadge.tsx | 4 +- src/components/views/right_panel/BaseCard.tsx | 2 +- .../views/right_panel/ExtensionsCard.tsx | 4 +- .../views/right_panel/RoomSummaryCard.tsx | 10 +- src/components/views/right_panel/UserInfo.tsx | 6 +- src/components/views/rooms/MemberList.tsx | 2 +- .../views/rooms/PinnedEventTile.tsx | 12 +- .../views/rooms/PinnedMessageBanner.tsx | 4 +- src/components/views/rooms/RoomHeader.tsx | 10 +- .../rooms/RoomHeader/VideoRoomChatButton.tsx | 2 +- src/components/views/rooms/ThreadSummary.tsx | 2 +- .../views/settings/UserProfileSettings.tsx | 4 +- .../settings/devices/LoginWithQRSection.tsx | 2 +- .../tabs/user/SidebarUserSettingsTab.tsx | 2 +- .../ThreadsActivityCentreButton.tsx | 4 +- src/toasts/IncomingCallToast.tsx | 2 +- .../__snapshots__/RoomView-test.tsx.snap | 228 ++++++++++++++++-- .../PinnedMessageBadge-test.tsx.snap | 14 +- .../ExtensionsCard-test.tsx.snap | 33 ++- .../PinnedMessagesCard-test.tsx.snap | 48 +++- .../RoomSummaryCard-test.tsx.snap | 126 ++++++++-- .../VideoRoomChatButton-test.tsx.snap | 12 +- .../PinnedEventTile-test.tsx.snap | 110 +++++++-- .../PinnedMessageBanner-test.tsx.snap | 126 +++++++--- .../__snapshots__/RoomHeader-test.tsx.snap | 36 ++- .../LoginWithQRFlow-test.tsx.snap | 72 +++++- .../LoginWithQRSection-test.tsx.snap | 38 ++- .../SidebarUserSettingsTab-test.tsx.snap | 24 +- .../__snapshots__/SpacePanel-test.tsx.snap | 13 +- .../ThreadsActivityCentre-test.tsx.snap | 26 +- 34 files changed, 835 insertions(+), 158 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index a1fe472db2..10e8238a77 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -46,6 +46,7 @@ module.exports = { "import/no-duplicates": ["error"], // Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell. + // Ban compound-design-tokens raw svg imports in favour of their React component counterparts "no-restricted-imports": [ "error", { @@ -150,6 +151,10 @@ module.exports = { message: "This regex doesn't actually test for emoji. See the docs at https://emojibase.dev/docs/regex/ and prefer our own EMOJI_REGEX from HtmlUtils.", }, + { + group: ["@vector-im/compound-design-tokens/icons/*"], + message: "Please use @vector-im/compound-design-tokens/assets/web/icons/* instead", + }, ], }, ], diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index cb47fd97d7..a3f8ac5165 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -269,7 +269,7 @@ export default class RoomStatusBar extends React.PureComponent {
- +
{_t("room|status_bar|server_connectivity_lost_title")} diff --git a/src/components/views/auth/LoginWithQRFlow.tsx b/src/components/views/auth/LoginWithQRFlow.tsx index 92a397d239..72511f2ccb 100644 --- a/src/components/views/auth/LoginWithQRFlow.tsx +++ b/src/components/views/auth/LoginWithQRFlow.tsx @@ -12,8 +12,8 @@ import { LegacyRendezvousFailureReason, MSC4108FailureReason, } from "matrix-js-sdk/src/rendezvous"; -import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg"; -import { Icon as CheckCircleSolidIcon } from "@vector-im/compound-design-tokens/icons/check-circle-solid.svg"; +import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left"; +import CheckCircleSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid"; import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"; import { Heading, MFAInput, Text } from "@vector-im/compound-web"; import classNames from "classnames"; diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index ee7ce93243..8bddee8352 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -21,8 +21,8 @@ import { EventType, } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; -import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin.svg"; -import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg"; +import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin"; +import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin"; import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg"; import { Icon as EditIcon } from "../../../../res/img/element-icons/room/message-bar/edit.svg"; diff --git a/src/components/views/messages/PinnedMessageBadge.tsx b/src/components/views/messages/PinnedMessageBadge.tsx index bfe1919597..e1d9411a9e 100644 --- a/src/components/views/messages/PinnedMessageBadge.tsx +++ b/src/components/views/messages/PinnedMessageBadge.tsx @@ -7,7 +7,7 @@ */ import React, { JSX } from "react"; -import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-solid.svg"; +import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid"; import { _t } from "../../../languageHandler.tsx"; @@ -17,7 +17,7 @@ import { _t } from "../../../languageHandler.tsx"; export function PinnedMessageBadge(): JSX.Element { return (
- + {_t("room|pinned_message_badge")}
); diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index 99cf5cdbf3..30ec02a247 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -10,7 +10,7 @@ import React, { forwardRef, ReactNode, KeyboardEvent, Ref, MouseEvent } from "re import classNames from "classnames"; import { IconButton, Text } from "@vector-im/compound-web"; import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; -import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg"; +import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left"; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import { _t } from "../../../languageHandler"; diff --git a/src/components/views/right_panel/ExtensionsCard.tsx b/src/components/views/right_panel/ExtensionsCard.tsx index 83c44b0c2d..0c6b3ecde0 100644 --- a/src/components/views/right_panel/ExtensionsCard.tsx +++ b/src/components/views/right_panel/ExtensionsCard.tsx @@ -10,8 +10,8 @@ import React, { useEffect, useMemo, useState } from "react"; import { Room } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; import { Button, Link, Separator, Text } from "@vector-im/compound-web"; -import { Icon as PlusIcon } from "@vector-im/compound-design-tokens/icons/plus.svg"; -import { Icon as ExtensionsIcon } from "@vector-im/compound-design-tokens/icons/extensions.svg"; +import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus"; +import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions"; import BaseCard from "./BaseCard"; import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils"; diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index d1c3d2df72..fc879c3254 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -21,10 +21,10 @@ import { Form, } from "@vector-im/compound-web"; import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite"; -import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg"; +import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add"; import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link"; import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/settings"; -import { Icon as ExportArchiveIcon } from "@vector-im/compound-design-tokens/icons/export-archive.svg"; +import ExportArchiveIcon from "@vector-im/compound-design-tokens/assets/web/icons/export-archive"; import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave"; import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files"; import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions"; @@ -32,11 +32,11 @@ import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/ import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads"; import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls"; import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin"; -import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg"; -import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg"; +import LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-solid"; +import LockOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-off"; import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public"; import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"; -import { Icon as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg"; +import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down"; import { EventType, JoinRule, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index e2d928b1d7..dd4752b783 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -31,12 +31,12 @@ import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat"; import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share"; import MentionIcon from "@vector-im/compound-design-tokens/assets/web/icons/mention"; -import { Icon as InviteIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg"; +import InviteIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add"; import BlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/block"; import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete"; import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; -import { Icon as ChatProblemIcon } from "@vector-im/compound-design-tokens/icons/chat-problem.svg"; -import { Icon as VisibilityOffIcon } from "@vector-im/compound-design-tokens/icons/visibility-off.svg"; +import ChatProblemIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-problem"; +import VisibilityOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-off"; import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave"; import dis from "../../../dispatcher/dispatcher"; diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx index 64028ee77c..cfce672b40 100644 --- a/src/components/views/rooms/MemberList.tsx +++ b/src/components/views/rooms/MemberList.tsx @@ -26,7 +26,7 @@ import { import { KnownMembership } from "matrix-js-sdk/src/types"; import { throttle } from "lodash"; import { Button, Tooltip } from "@vector-im/compound-web"; -import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg"; +import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid"; import { _t } from "../../../languageHandler"; import dis from "../../../dispatcher/dispatcher"; diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx index 491199b67a..217571df95 100644 --- a/src/components/views/rooms/PinnedEventTile.tsx +++ b/src/components/views/rooms/PinnedEventTile.tsx @@ -10,12 +10,12 @@ Please see LICENSE files in the repository root for full details. import React, { JSX, useCallback, useState } from "react"; import { EventTimeline, EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; import { IconButton, Menu, MenuItem, Separator, Tooltip } from "@vector-im/compound-web"; -import { Icon as ViewIcon } from "@vector-im/compound-design-tokens/icons/visibility-on.svg"; -import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg"; -import { Icon as ForwardIcon } from "@vector-im/compound-design-tokens/icons/forward.svg"; -import { Icon as TriggerIcon } from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"; -import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg"; -import { Icon as ThreadIcon } from "@vector-im/compound-design-tokens/icons/threads.svg"; +import ViewIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-on"; +import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin"; +import ForwardIcon from "@vector-im/compound-design-tokens/assets/web/icons/forward"; +import TriggerIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal"; +import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete"; +import ThreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads"; import classNames from "classnames"; import dis from "../../../dispatcher/dispatcher"; diff --git a/src/components/views/rooms/PinnedMessageBanner.tsx b/src/components/views/rooms/PinnedMessageBanner.tsx index 4679912c44..6360870dbf 100644 --- a/src/components/views/rooms/PinnedMessageBanner.tsx +++ b/src/components/views/rooms/PinnedMessageBanner.tsx @@ -7,7 +7,7 @@ */ import React, { JSX, useEffect, useMemo, useState } from "react"; -import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-solid.svg"; +import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid"; import { Button } from "@vector-im/compound-web"; import { M_POLL_START, MatrixEvent, MsgType, Room } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; @@ -92,7 +92,7 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan >
- + {!isSinglePinnedEvent && (
{_t( diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index b09d4c70e2..a2af9bdd19 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -8,12 +8,12 @@ Please see LICENSE files in the repository root for full details. import React, { useCallback, useContext, useMemo, useState } from "react"; import { Body as BodyText, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web"; -import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg"; -import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg"; +import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid"; +import VoiceCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/voice-call"; import CloseCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; -import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg"; -import { Icon as RoomInfoIcon } from "@vector-im/compound-design-tokens/icons/info-solid.svg"; -import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg"; +import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid"; +import RoomInfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info-solid"; +import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-solid"; import VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified"; import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"; import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public"; diff --git a/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx b/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx index 8f79ef8ba8..af664f6841 100644 --- a/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx +++ b/src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React, { useContext } from "react"; -import { Icon as ChatIcon } from "@vector-im/compound-design-tokens/icons/chat-solid.svg"; +import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-solid"; import { Room } from "matrix-js-sdk/src/matrix"; import { IconButton, Tooltip } from "@vector-im/compound-web"; diff --git a/src/components/views/rooms/ThreadSummary.tsx b/src/components/views/rooms/ThreadSummary.tsx index 34f9bd801a..ea76dd0d36 100644 --- a/src/components/views/rooms/ThreadSummary.tsx +++ b/src/components/views/rooms/ThreadSummary.tsx @@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details. import React, { useContext, useState } from "react"; import { Thread, ThreadEvent, IContent, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix"; import { IndicatorIcon } from "@vector-im/compound-web"; -import { Icon as ThreadIconSolid } from "@vector-im/compound-design-tokens/icons/threads-solid.svg"; +import ThreadIconSolid from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid"; import { _t } from "../../../languageHandler"; import { CardContext } from "../right_panel/context"; diff --git a/src/components/views/settings/UserProfileSettings.tsx b/src/components/views/settings/UserProfileSettings.tsx index 59eb2f9351..18cd0870e0 100644 --- a/src/components/views/settings/UserProfileSettings.tsx +++ b/src/components/views/settings/UserProfileSettings.tsx @@ -9,8 +9,8 @@ Please see LICENSE files in the repository root for full details. import React, { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } from "react"; import { logger } from "matrix-js-sdk/src/logger"; import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web"; -import { Icon as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg"; -import { Icon as SignOutIcon } from "@vector-im/compound-design-tokens/icons/sign-out.svg"; +import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out"; +import SignOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/sign-out"; import { _t } from "../../../languageHandler"; import { OwnProfileStore } from "../../../stores/OwnProfileStore"; diff --git a/src/components/views/settings/devices/LoginWithQRSection.tsx b/src/components/views/settings/devices/LoginWithQRSection.tsx index 41510a8e22..f776d69765 100644 --- a/src/components/views/settings/devices/LoginWithQRSection.tsx +++ b/src/components/views/settings/devices/LoginWithQRSection.tsx @@ -17,7 +17,7 @@ import { MatrixClient, DEVICE_CODE_SCOPE, } from "matrix-js-sdk/src/matrix"; -import { Icon as QrCodeIcon } from "@vector-im/compound-design-tokens/icons/qr-code.svg"; +import QrCodeIcon from "@vector-im/compound-design-tokens/assets/web/icons/qr-code"; import { _t } from "../../../../languageHandler"; import AccessibleButton from "../../elements/AccessibleButton"; diff --git a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx index bf18451083..b6a85d08bd 100644 --- a/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React, { ChangeEvent, useMemo } from "react"; -import { Icon as CameraCircle } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg"; +import CameraCircle from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid"; import { Icon as HomeIcon } from "../../../../../../res/img/element-icons/home.svg"; import { Icon as FavoriteIcon } from "../../../../../../res/img/element-icons/roomlist/favorite.svg"; diff --git a/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx b/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx index e130498b52..801a6050c3 100644 --- a/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx +++ b/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx @@ -7,7 +7,7 @@ */ import React, { ComponentProps, forwardRef } from "react"; -import { Icon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg"; +import ThreadsSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid"; import classNames from "classnames"; import { IconButton, Text, Tooltip } from "@vector-im/compound-web"; @@ -51,7 +51,7 @@ export const ThreadsActivityCentreButton = forwardRef <> - + {/* This is dirty, but we need to add the label to the indicator icon */} {displayLabel && ( -
+ + +
@@ -234,7 +274,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`] class="_indicator-icon_133tf_26" style="--cpd-icon-button-size: 100%;" > -
+ + +
@@ -492,7 +572,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] = class="_indicator-icon_133tf_26" style="--cpd-icon-button-size: 100%;" > -
+ + +
@@ -827,7 +947,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t class="_indicator-icon_133tf_26" style="--cpd-icon-button-size: 100%;" > -
+ + +
@@ -1199,7 +1359,17 @@ exports[`RoomView video rooms should render joined video room view 1`] = ` class="_indicator-icon_133tf_26" style="--cpd-icon-button-size: 100%;" > -
+ + +
diff --git a/test/components/views/messages/__snapshots__/PinnedMessageBadge-test.tsx.snap b/test/components/views/messages/__snapshots__/PinnedMessageBadge-test.tsx.snap index 6a2beb4864..31e192628a 100644 --- a/test/components/views/messages/__snapshots__/PinnedMessageBadge-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/PinnedMessageBadge-test.tsx.snap @@ -5,9 +5,17 @@ exports[`PinnedMessageBadge should render 1`] = `
-
+ + + Pinned message
diff --git a/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap index 0cbda3ab64..f6d9479027 100644 --- a/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap @@ -54,21 +54,35 @@ exports[` should render empty state 1`] = ` role="button" tabindex="0" > -