PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Prefer wrapped Compound React icon assets (#122)

Browse source 
* 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>
This commit is contained in:
Michael Telatynski 2024-10-04 13:42:15 +01:00 committed by GitHub
parent 0a9b4aecd3
commit 7ef8663388
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
34 changed files with 835 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.eslintrc.js
View file

@ -46,6 +46,7 @@ module.exports = {
"import/no-duplicates": ["error"], "import/no-duplicates": ["error"],
// Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell. // 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": [ "no-restricted-imports": [
"error", "error",
{ {
@ -150,6 +151,10 @@ module.exports = {
message: 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.", "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",
},
], ],
}, },
], ],

2
src/components/structures/RoomStatusBar.tsx
View file

@ -269,7 +269,7 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
<div className="mx_RoomStatusBar"> <div className="mx_RoomStatusBar">
<div role="alert"> <div role="alert">
<div className="mx_RoomStatusBar_connectionLostBar"> <div className="mx_RoomStatusBar_connectionLostBar">
<WarningIcon width="24" height="24" /> <WarningIcon width="24px" height="24px" />
<div> <div>
<div className="mx_RoomStatusBar_connectionLostBar_title"> <div className="mx_RoomStatusBar_connectionLostBar_title">
{_t("room|status_bar|server_connectivity_lost_title")} {_t("room|status_bar|server_connectivity_lost_title")}

4
src/components/views/auth/LoginWithQRFlow.tsx
View file

@ -12,8 +12,8 @@ import {
LegacyRendezvousFailureReason, LegacyRendezvousFailureReason,
MSC4108FailureReason, MSC4108FailureReason,
} from "matrix-js-sdk/src/rendezvous"; } from "matrix-js-sdk/src/rendezvous";
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 { Icon as CheckCircleSolidIcon } from "@vector-im/compound-design-tokens/icons/check-circle-solid.svg"; 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 ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
import { Heading, MFAInput, Text } from "@vector-im/compound-web"; import { Heading, MFAInput, Text } from "@vector-im/compound-web";
import classNames from "classnames"; import classNames from "classnames";

4
src/components/views/messages/MessageActionBar.tsx
View file

@ -21,8 +21,8 @@ import {
EventType, EventType,
} from "matrix-js-sdk/src/matrix"; } from "matrix-js-sdk/src/matrix";
import classNames from "classnames"; import classNames from "classnames";
import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin.svg"; import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg"; 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 ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
import { Icon as EditIcon } from "../../../../res/img/element-icons/room/message-bar/edit.svg"; import { Icon as EditIcon } from "../../../../res/img/element-icons/room/message-bar/edit.svg";

4
src/components/views/messages/PinnedMessageBadge.tsx
View file

@ -7,7 +7,7 @@
*/ */
import React, { JSX } from "react"; 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"; import { _t } from "../../../languageHandler.tsx";
@ -17,7 +17,7 @@ import { _t } from "../../../languageHandler.tsx";
export function PinnedMessageBadge(): JSX.Element { export function PinnedMessageBadge(): JSX.Element {
return ( return (
<div className="mx_PinnedMessageBadge"> <div className="mx_PinnedMessageBadge">
<PinIcon width="16" /> <PinIcon width="16px" height="16px" />
{_t("room|pinned_message_badge")} {_t("room|pinned_message_badge")}
</div> </div>
); );

2
src/components/views/right_panel/BaseCard.tsx
View file

@ -10,7 +10,7 @@ import React, { forwardRef, ReactNode, KeyboardEvent, Ref, MouseEvent } from "re
import classNames from "classnames"; import classNames from "classnames";
import { IconButton, Text } from "@vector-im/compound-web"; import { IconButton, Text } from "@vector-im/compound-web";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; 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 AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";

4
src/components/views/right_panel/ExtensionsCard.tsx
View file

@ -10,8 +10,8 @@ import React, { useEffect, useMemo, useState } from "react";
import { Room } from "matrix-js-sdk/src/matrix"; import { Room } from "matrix-js-sdk/src/matrix";
import classNames from "classnames"; import classNames from "classnames";
import { Button, Link, Separator, Text } from "@vector-im/compound-web"; import { Button, Link, Separator, Text } from "@vector-im/compound-web";
import { Icon as PlusIcon } from "@vector-im/compound-design-tokens/icons/plus.svg"; import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus";
import { Icon as ExtensionsIcon } from "@vector-im/compound-design-tokens/icons/extensions.svg"; import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
import BaseCard from "./BaseCard"; import BaseCard from "./BaseCard";
import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils"; import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils";

10
src/components/views/right_panel/RoomSummaryCard.tsx
View file

@ -21,10 +21,10 @@ import {
Form, Form,
} from "@vector-im/compound-web"; } from "@vector-im/compound-web";
import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite"; 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 LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/settings"; 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 LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files"; import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files";
import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions"; 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 ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls"; 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 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 LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-solid";
import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg"; 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 PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"; 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 { EventType, JoinRule, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import MatrixClientContext from "../../../contexts/MatrixClientContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext";

6
src/components/views/right_panel/UserInfo.tsx
View file

@ -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 CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share"; 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 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 BlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/block";
import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete"; 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 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 ChatProblemIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-problem";
import { Icon as VisibilityOffIcon } from "@vector-im/compound-design-tokens/icons/visibility-off.svg"; 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 LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
import dis from "../../../dispatcher/dispatcher"; import dis from "../../../dispatcher/dispatcher";

2
src/components/views/rooms/MemberList.tsx
View file

@ -26,7 +26,7 @@ import {
import { KnownMembership } from "matrix-js-sdk/src/types"; import { KnownMembership } from "matrix-js-sdk/src/types";
import { throttle } from "lodash"; import { throttle } from "lodash";
import { Button, Tooltip } from "@vector-im/compound-web"; 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 { _t } from "../../../languageHandler";
import dis from "../../../dispatcher/dispatcher"; import dis from "../../../dispatcher/dispatcher";

12
src/components/views/rooms/PinnedEventTile.tsx
View file

@ -10,12 +10,12 @@ Please see LICENSE files in the repository root for full details.
import React, { JSX, useCallback, useState } from "react"; import React, { JSX, useCallback, useState } from "react";
import { EventTimeline, EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; import { EventTimeline, EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import { IconButton, Menu, MenuItem, Separator, Tooltip } from "@vector-im/compound-web"; 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 ViewIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-on";
import { Icon as UnpinIcon } from "@vector-im/compound-design-tokens/icons/unpin.svg"; import UnpinIcon from "@vector-im/compound-design-tokens/assets/web/icons/unpin";
import { Icon as ForwardIcon } from "@vector-im/compound-design-tokens/icons/forward.svg"; import ForwardIcon from "@vector-im/compound-design-tokens/assets/web/icons/forward";
import { Icon as TriggerIcon } from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"; import TriggerIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg"; import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
import { Icon as ThreadIcon } from "@vector-im/compound-design-tokens/icons/threads.svg"; import ThreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
import classNames from "classnames"; import classNames from "classnames";
import dis from "../../../dispatcher/dispatcher"; import dis from "../../../dispatcher/dispatcher";

4
src/components/views/rooms/PinnedMessageBanner.tsx
View file

@ -7,7 +7,7 @@
*/ */
import React, { JSX, useEffect, useMemo, useState } from "react"; 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 { Button } from "@vector-im/compound-web";
import { M_POLL_START, MatrixEvent, MsgType, Room } from "matrix-js-sdk/src/matrix"; import { M_POLL_START, MatrixEvent, MsgType, Room } from "matrix-js-sdk/src/matrix";
import classNames from "classnames"; import classNames from "classnames";
@ -92,7 +92,7 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
> >
<div className="mx_PinnedMessageBanner_content"> <div className="mx_PinnedMessageBanner_content">
<Indicators count={eventCount} currentIndex={currentEventIndex} /> <Indicators count={eventCount} currentIndex={currentEventIndex} />
<PinIcon width="20" className="mx_PinnedMessageBanner_PinIcon" /> <PinIcon width="20px" height="20px" className="mx_PinnedMessageBanner_PinIcon" />
{!isSinglePinnedEvent && ( {!isSinglePinnedEvent && (
<div className="mx_PinnedMessageBanner_title" data-testid="banner-counter"> <div className="mx_PinnedMessageBanner_title" data-testid="banner-counter">
{_t( {_t(

10
src/components/views/rooms/RoomHeader.tsx
View file

@ -8,12 +8,12 @@ Please see LICENSE files in the repository root for full details.
import React, { useCallback, useContext, useMemo, useState } from "react"; import React, { useCallback, useContext, useMemo, useState } from "react";
import { Body as BodyText, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web"; 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 VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg"; 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 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 ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
import { Icon as RoomInfoIcon } from "@vector-im/compound-design-tokens/icons/info-solid.svg"; import RoomInfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info-solid";
import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg"; 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 VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified";
import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"; import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public"; import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";

2
src/components/views/rooms/RoomHeader/VideoRoomChatButton.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/ */
import React, { useContext } from "react"; 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 { Room } from "matrix-js-sdk/src/matrix";
import { IconButton, Tooltip } from "@vector-im/compound-web"; import { IconButton, Tooltip } from "@vector-im/compound-web";

2
src/components/views/rooms/ThreadSummary.tsx
View file

@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React, { useContext, useState } from "react"; import React, { useContext, useState } from "react";
import { Thread, ThreadEvent, IContent, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix"; import { Thread, ThreadEvent, IContent, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
import { IndicatorIcon } from "@vector-im/compound-web"; 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 { _t } from "../../../languageHandler";
import { CardContext } from "../right_panel/context"; import { CardContext } from "../right_panel/context";

4
src/components/views/settings/UserProfileSettings.tsx
View file

@ -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 React, { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web"; import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
import { Icon as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg"; import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
import { Icon as SignOutIcon } from "@vector-im/compound-design-tokens/icons/sign-out.svg"; import SignOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import { OwnProfileStore } from "../../../stores/OwnProfileStore"; import { OwnProfileStore } from "../../../stores/OwnProfileStore";

2
src/components/views/settings/devices/LoginWithQRSection.tsx
View file

@ -17,7 +17,7 @@ import {
MatrixClient, MatrixClient,
DEVICE_CODE_SCOPE, DEVICE_CODE_SCOPE,
} from "matrix-js-sdk/src/matrix"; } 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 { _t } from "../../../../languageHandler";
import AccessibleButton from "../../elements/AccessibleButton"; import AccessibleButton from "../../elements/AccessibleButton";

2
src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/ */
import React, { ChangeEvent, useMemo } from "react"; 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 HomeIcon } from "../../../../../../res/img/element-icons/home.svg";
import { Icon as FavoriteIcon } from "../../../../../../res/img/element-icons/roomlist/favorite.svg"; import { Icon as FavoriteIcon } from "../../../../../../res/img/element-icons/roomlist/favorite.svg";

4
src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
View file

@ -7,7 +7,7 @@
*/ */
import React, { ComponentProps, forwardRef } from "react"; 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 classNames from "classnames";
import { IconButton, Text, Tooltip } from "@vector-im/compound-web"; import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
@ -51,7 +51,7 @@ export const ThreadsActivityCentreButton = forwardRef<HTMLButtonElement, Threads
ref={ref} ref={ref}
> >
<> <>
<Icon className="mx_ThreadsActivityCentreButton_Icon" /> <ThreadsSolidIcon className="mx_ThreadsActivityCentreButton_Icon" />
{/* This is dirty, but we need to add the label to the indicator icon */} {/* This is dirty, but we need to add the label to the indicator icon */}
{displayLabel && ( {displayLabel && (
<Text <Text

2
src/toasts/IncomingCallToast.tsx
View file

@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix"; import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
import { Button, Tooltip } from "@vector-im/compound-web"; import { Button, Tooltip } from "@vector-im/compound-web";
import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg"; import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
import { _t } from "../languageHandler"; import { _t } from "../languageHandler";
import RoomAvatar from "../components/views/avatars/RoomAvatar"; import RoomAvatar from "../components/views/avatars/RoomAvatar";

228
test/components/structures/__snapshots__/RoomView-test.tsx.snap
View file

@ -61,7 +61,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -76,7 +86,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -90,7 +110,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -104,7 +134,17 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -234,7 +274,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -249,7 +299,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -263,7 +323,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -277,7 +347,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -492,7 +572,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -507,7 +597,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -521,7 +621,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -535,7 +645,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -827,7 +947,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -842,7 +972,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -856,7 +996,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -870,7 +1020,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -1199,7 +1359,17 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -1213,7 +1383,17 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.95 16.3 1.5 21.25a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.737 9.737 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.737 9.737 0 0 0 12 2a9.737 9.737 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a10.179 10.179 0 0 0 .95 4.3Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -1227,7 +1407,17 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>

14
test/components/views/messages/__snapshots__/PinnedMessageBadge-test.tsx.snap
View file

@ -5,9 +5,17 @@ exports[`PinnedMessageBadge should render 1`] = `
<div <div
class="mx_PinnedMessageBadge" class="mx_PinnedMessageBadge"
> >
<div <svg
width="16" fill="currentColor"
/> height="16px"
viewBox="0 0 24 24"
width="16px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
/>
</svg>
Pinned message Pinned message
</div> </div>
</DocumentFragment> </DocumentFragment>

33
test/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
View file

@ -54,21 +54,35 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
fill="currentColor"
height="20" height="20"
viewBox="0 0 24 24"
width="20" width="20"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 13H6a.967.967 0 0 1-.713-.287A.968.968 0 0 1 5 12c0-.283.096-.52.287-.713A.967.967 0 0 1 6 11h5V6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5c.283 0 .52.096.713.287.191.192.287.43.287.713v5h5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 18 13h-5v5a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 19a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 18v-5Z"
/>
</svg>
Add extensions Add extensions
</button> </button>
<div <div
class="mx_Flex mx_EmptyState" class="mx_Flex mx_EmptyState"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);" style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
> >
<div <svg
fill="currentColor"
height="32px" height="32px"
viewBox="0 0 24 24"
width="32px" width="32px"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.25 11.672a.907.907 0 0 1-.663-.282L12.61 7.413a.907.907 0 0 1-.282-.663c0-.254.094-.475.282-.663l3.977-3.977a.907.907 0 0 1 .663-.282c.254 0 .475.094.663.282l3.977 3.977a.907.907 0 0 1 .282.663.907.907 0 0 1-.282.663l-3.977 3.977a.907.907 0 0 1-.663.282Zm2.475-4.922L17.25 4.275 14.775 6.75l2.475 2.475 2.475-2.475ZM4 11a.967.967 0 0 1-.712-.287A.968.968 0 0 1 3 10V4c0-.283.096-.52.288-.712A.968.968 0 0 1 4 3h6a.97.97 0 0 1 .713.288A.968.968 0 0 1 11 4v6c0 .283-.096.52-.287.713A.968.968 0 0 1 10 11H4Zm5-2V5H5v4h4Zm5 12a.968.968 0 0 1-.713-.288A.968.968 0 0 1 13 20v-6c0-.283.096-.52.287-.713A.968.968 0 0 1 14 13h6a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.968.968 0 0 1 20 21h-6Zm5-2v-4h-4v4h4ZM4 21a.967.967 0 0 1-.712-.288A.968.968 0 0 1 3 20v-6a.97.97 0 0 1 .288-.713A.967.967 0 0 1 4 13h6c.283 0 .52.096.713.287.191.192.287.43.287.713v6a.97.97 0 0 1-.287.712A.968.968 0 0 1 10 21H4Zm5-2v-4H5v4h4Z"
/>
</svg>
<p <p
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83" class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
> >
@ -139,11 +153,18 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
fill="currentColor"
height="20" height="20"
viewBox="0 0 24 24"
width="20" width="20"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 13H6a.967.967 0 0 1-.713-.287A.968.968 0 0 1 5 12c0-.283.096-.52.287-.713A.967.967 0 0 1 6 11h5V6c0-.283.096-.52.287-.713A.968.968 0 0 1 12 5c.283 0 .52.096.713.287.191.192.287.43.287.713v5h5a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 18 13h-5v5a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 19a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 18v-5Z"
/>
</svg>
Add extensions Add extensions
</button> </button>
<div <div

48
test/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
View file

@ -175,7 +175,17 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -241,7 +251,17 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -371,7 +391,17 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -437,7 +467,17 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>

126
test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View file

@ -74,9 +74,17 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17" class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
data-kind="default" data-kind="default"
> >
<div <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em" width="1em"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 22c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.587-1.412.212-.212.446-.366.703-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 0 1-1.414 1.414l-.896-.896A1.935 1.935 0 0 1 18 22H6Zm14-4.834V10c0-.55-.196-1.02-.587-1.412A1.926 1.926 0 0 0 18 8h-1V6c0-1.383-.488-2.563-1.463-3.538C14.563 1.487 13.383 1 12 1s-2.563.488-3.538 1.462A4.876 4.876 0 0 0 7.243 4.41L9 6.166V6c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 12 3c.833 0 1.542.292 2.125.875S15 5.167 15 6v2h-4.166L20 17.166Z"
/>
</svg>
Not encrypted Not encrypted
</span> </span>
</section> </section>
@ -107,7 +115,17 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -182,12 +200,19 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
data-kind="primary" data-kind="primary"
role="menuitem" role="menuitem"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm7 1h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >
@ -504,12 +529,19 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
data-kind="primary" data-kind="primary"
role="menuitem" role="menuitem"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V6.5c0-.25.042-.475.125-.675.083-.2.192-.392.325-.575l1.4-1.7c.133-.183.3-.32.5-.412C5.55 3.046 5.767 3 6 3h12c.233 0 .45.046.65.138.2.091.367.229.5.412l1.4 1.7c.133.183.242.375.325.575.083.2.125.425.125.675V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM5 19h14V8H5v11Zm7-1.425c.133 0 .258-.02.375-.063a.877.877 0 0 0 .325-.212l2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V11a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 10a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 11v3.2l-.9-.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.6 2.6c.1.1.208.17.325.212.117.042.242.063.375.063Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >
@ -695,9 +727,17 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17" class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
data-kind="default" data-kind="default"
> >
<div <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em" width="1em"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 22c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.587-1.412.212-.212.446-.366.703-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 0 1-1.414 1.414l-.896-.896A1.935 1.935 0 0 1 18 22H6Zm14-4.834V10c0-.55-.196-1.02-.587-1.412A1.926 1.926 0 0 0 18 8h-1V6c0-1.383-.488-2.563-1.463-3.538C14.563 1.487 13.383 1 12 1s-2.563.488-3.538 1.462A4.876 4.876 0 0 0 7.243 4.41L9 6.166V6c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 12 3c.833 0 1.542.292 2.125.875S15 5.167 15 6v2h-4.166L20 17.166Z"
/>
</svg>
Not encrypted Not encrypted
</span> </span>
</section> </section>
@ -776,12 +816,19 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
data-kind="primary" data-kind="primary"
role="menuitem" role="menuitem"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm7 1h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >
@ -1098,12 +1145,19 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
data-kind="primary" data-kind="primary"
role="menuitem" role="menuitem"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V6.5c0-.25.042-.475.125-.675.083-.2.192-.392.325-.575l1.4-1.7c.133-.183.3-.32.5-.412C5.55 3.046 5.767 3 6 3h12c.233 0 .45.046.65.138.2.091.367.229.5.412l1.4 1.7c.133.183.242.375.325.575.083.2.125.425.125.675V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM5 19h14V8H5v11Zm7-1.425c.133 0 .258-.02.375-.063a.877.877 0 0 0 .325-.212l2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V11a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 10a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 11v3.2l-.9-.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.6 2.6c.1.1.208.17.325.212.117.042.242.063.375.063Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >
@ -1289,9 +1343,17 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17" class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50 _badge_qipht_17"
data-kind="default" data-kind="default"
> >
<div <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em" width="1em"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 22c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 4 20V10c0-.55.196-1.02.587-1.412.212-.212.446-.366.703-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 0 1-1.414 1.414l-.896-.896A1.935 1.935 0 0 1 18 22H6Zm14-4.834V10c0-.55-.196-1.02-.587-1.412A1.926 1.926 0 0 0 18 8h-1V6c0-1.383-.488-2.563-1.463-3.538C14.563 1.487 13.383 1 12 1s-2.563.488-3.538 1.462A4.876 4.876 0 0 0 7.243 4.41L9 6.166V6c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 12 3c.833 0 1.542.292 2.125.875S15 5.167 15 6v2h-4.166L20 17.166Z"
/>
</svg>
Not encrypted Not encrypted
</span> </span>
</section> </section>
@ -1322,7 +1384,17 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -1397,12 +1469,19 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
data-kind="primary" data-kind="primary"
role="menuitem" role="menuitem"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 12c-1.1 0-2.042-.392-2.825-1.175C6.392 10.042 6 9.1 6 8s.392-2.042 1.175-2.825C7.958 4.392 8.9 4 10 4s2.042.392 2.825 1.175C13.608 5.958 14 6.9 14 8s-.392 2.042-1.175 2.825C12.042 11.608 11.1 12 10 12Zm-8 6v-.8c0-.567.146-1.087.438-1.563A2.911 2.911 0 0 1 3.6 14.55a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 10 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.163 1.087.291.476.437.996.437 1.563v.8c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 16 20H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18Zm2 0h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C11.804 9.021 12 8.55 12 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 10 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 8 8c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588Zm7 1h2v2c0 .283.096.52.288.713.191.191.429.287.712.287s.52-.096.712-.287A.968.968 0 0 0 21 13v-2h2a.97.97 0 0 0 .712-.287A.968.968 0 0 0 24 10a.967.967 0 0 0-.288-.713A.968.968 0 0 0 23 9h-2V7a.967.967 0 0 0-.288-.713A.968.968 0 0 0 20 6a.968.968 0 0 0-.712.287A.967.967 0 0 0 19 7v2h-2a.968.968 0 0 0-.712.287A.967.967 0 0 0 16 10c0 .283.096.52.288.713A.968.968 0 0 0 17 11Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >
@ -1719,12 +1798,19 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
data-kind="primary" data-kind="primary"
role="menuitem" role="menuitem"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V6.5c0-.25.042-.475.125-.675.083-.2.192-.392.325-.575l1.4-1.7c.133-.183.3-.32.5-.412C5.55 3.046 5.767 3 6 3h12c.233 0 .45.046.65.138.2.091.367.229.5.412l1.4 1.7c.133.183.242.375.325.575.083.2.125.425.125.675V19c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm.4-15h13.2l-.85-1H6.25L5.4 6ZM5 19h14V8H5v11Zm7-1.425c.133 0 .258-.02.375-.063a.877.877 0 0 0 .325-.212l2.6-2.6a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275l-.9.9V11a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 10a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 11v3.2l-.9-.9a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.6 2.6c.1.1.208.17.325.212.117.042.242.063.375.063Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >

12
test/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
View file

@ -14,7 +14,17 @@ exports[`<VideoRoomChatButton /> renders button with an unread marker when room
data-indicator="default" data-indicator="default"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.95 16.3 1.5 21.25a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.737 9.737 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.737 9.737 0 0 0 12 2a9.737 9.737 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a10.179 10.179 0 0 0 .95 4.3Z"
/>
</svg>
</div> </div>
</button> </button>
`; `;

110
test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
View file

@ -46,7 +46,17 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -111,7 +121,17 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -128,7 +148,20 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
<div <div
class="mx_PinnedEventTile_thread" class="mx_PinnedEventTile_thread"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 10a.968.968 0 0 1-.713-.287A.968.968 0 0 1 6 9c0-.283.096-.52.287-.713A.968.968 0 0 1 7 8h10a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 17 10H7Zm0 4a.967.967 0 0 1-.713-.287A.968.968 0 0 1 6 13c0-.283.096-.52.287-.713A.967.967 0 0 1 7 12h6c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 13 14H7Z"
/>
<path
d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293ZM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17Z"
/>
</svg>
<span> <span>
Reply to a Reply to a
<button <button
@ -168,12 +201,19 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >
@ -201,12 +241,24 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M5.457 2.083a1 1 0 0 0-1.414 1.414L8.04 7.494v2.25a.5.5 0 0 1-.15.356l-3.7 3.644a.5.5 0 0 0-.15.356v1.4a.5.5 0 0 0 .5.5h6.5v6a1 1 0 0 0 2 0v-6h3.506l4.497 4.497a1 1 0 0 0 1.414-1.414l-17-17ZM14.546 14 10.04 9.494v.25a2.5 2.5 0 0 1-.746 1.781L6.78 14h7.766Z"
fill-rule="evenodd"
/>
<path
d="M14.04 4v3.85l2.015 2.015a.5.5 0 0 1-.015-.12V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857h-9.73l2 2h3.849Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >
@ -234,12 +286,19 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.39.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.054H8.487C6.599 10.666 5 12.27 5 14.333 5.002 16.396 6.6 18 8.488 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.092 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >
@ -273,12 +332,19 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 21c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 19V6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 4 5c0-.283.096-.52.287-.713A.968.968 0 0 1 5 4h4a.97.97 0 0 1 .287-.712A.968.968 0 0 1 10 3h4a.97.97 0 0 1 .713.288A.968.968 0 0 1 15 4h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 19 6v13c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 21H7ZM7 6v13h10V6H7Zm2 10c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 11 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 10 8a.968.968 0 0 0-.713.287A.968.968 0 0 0 9 9v7Zm4 0c0 .283.096.52.287.712.192.192.43.288.713.288s.52-.096.713-.288A.968.968 0 0 0 15 16V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 14 8a.968.968 0 0 0-.713.287A.967.967 0 0 0 13 9v7Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >
@ -326,12 +392,19 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 16c1.25 0 2.313-.438 3.188-1.313.874-.874 1.312-1.937 1.312-3.187 0-1.25-.438-2.313-1.313-3.188C14.313 7.439 13.25 7 12 7c-1.25 0-2.312.438-3.187 1.313C7.938 9.187 7.5 10.25 7.5 11.5c0 1.25.438 2.313 1.313 3.188C9.688 15.562 10.75 16 12 16Zm0-1.8c-.75 0-1.387-.262-1.912-.787A2.604 2.604 0 0 1 9.3 11.5c0-.75.263-1.387.787-1.912A2.604 2.604 0 0 1 12 8.8c.75 0 1.387.262 1.912.787.525.526.788 1.163.788 1.913s-.262 1.387-.787 1.912A2.604 2.604 0 0 1 12 14.2Zm0 4.8c-2.317 0-4.433-.613-6.35-1.837-1.917-1.226-3.367-2.88-4.35-4.963a.812.812 0 0 1-.1-.313 2.93 2.93 0 0 1 0-.774.812.812 0 0 1 .1-.313c.983-2.083 2.433-3.738 4.35-4.963C7.567 4.614 9.683 4 12 4c2.317 0 4.433.612 6.35 1.838 1.917 1.224 3.367 2.879 4.35 4.962a.81.81 0 0 1 .1.313 2.925 2.925 0 0 1 0 .774.81.81 0 0 1-.1.313c-.983 2.083-2.433 3.738-4.35 4.963C16.433 18.387 14.317 19 12 19Zm0-2a9.544 9.544 0 0 0 5.188-1.488A9.773 9.773 0 0 0 20.8 11.5a9.773 9.773 0 0 0-3.613-4.013A9.544 9.544 0 0 0 12 6a9.545 9.545 0 0 0-5.187 1.487A9.773 9.773 0 0 0 3.2 11.5a9.773 9.773 0 0 0 3.613 4.012A9.544 9.544 0 0 0 12 17Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >
@ -359,12 +432,19 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"
> >
<div <svg
aria-hidden="true" aria-hidden="true"
class="_icon_1gwvj_44" class="_icon_1gwvj_44"
fill="currentColor"
height="24" height="24"
viewBox="0 0 24 24"
width="24" width="24"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.597 5.708a1.004 1.004 0 0 1 0-1.416.996.996 0 0 1 1.412 0l4.699 4.714c.39.39.39 1.025 0 1.416l-4.7 4.714a.996.996 0 0 1-1.411 0 1.004 1.004 0 0 1 0-1.416l3.043-3.054H8.487C6.599 10.666 5 12.27 5 14.333 5.002 16.396 6.6 18 8.488 18h2.093a1 1 0 1 1 0 2H8.487C5.42 20 3 17.425 3 14.333c0-3.092 2.42-5.666 5.486-5.666h9.059l-2.95-2.959Z"
/>
</svg>
<span <span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53" class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
> >

126
test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
View file

@ -24,10 +24,18 @@ exports[`<PinnedMessageBanner /> should display display a poll event 1`] = `
data-testid="banner-indicator" data-testid="banner-indicator"
/> />
</div> </div>
<div <svg
class="mx_PinnedMessageBanner_PinIcon" class="mx_PinnedMessageBanner_PinIcon"
width="20" fill="currentColor"
/> height="20px"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
/>
</svg>
<span <span
class="mx_PinnedMessageBanner_message" class="mx_PinnedMessageBanner_message"
data-testid="banner-message" data-testid="banner-message"
@ -79,10 +87,18 @@ exports[`<PinnedMessageBanner /> should display the last message when the pinned
data-testid="banner-indicator" data-testid="banner-indicator"
/> />
</div> </div>
<div <svg
class="mx_PinnedMessageBanner_PinIcon" class="mx_PinnedMessageBanner_PinIcon"
width="20" fill="currentColor"
/> height="20px"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
/>
</svg>
<div <div
class="mx_PinnedMessageBanner_title" class="mx_PinnedMessageBanner_title"
data-testid="banner-counter" data-testid="banner-counter"
@ -141,10 +157,18 @@ exports[`<PinnedMessageBanner /> should display the m.audio event type 1`] = `
data-testid="banner-indicator" data-testid="banner-indicator"
/> />
</div> </div>
<div <svg
class="mx_PinnedMessageBanner_PinIcon" class="mx_PinnedMessageBanner_PinIcon"
width="20" fill="currentColor"
/> height="20px"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
/>
</svg>
<span <span
class="mx_PinnedMessageBanner_message" class="mx_PinnedMessageBanner_message"
data-testid="banner-message" data-testid="banner-message"
@ -188,10 +212,18 @@ exports[`<PinnedMessageBanner /> should display the m.file event type 1`] = `
data-testid="banner-indicator" data-testid="banner-indicator"
/> />
</div> </div>
<div <svg
class="mx_PinnedMessageBanner_PinIcon" class="mx_PinnedMessageBanner_PinIcon"
width="20" fill="currentColor"
/> height="20px"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
/>
</svg>
<span <span
class="mx_PinnedMessageBanner_message" class="mx_PinnedMessageBanner_message"
data-testid="banner-message" data-testid="banner-message"
@ -235,10 +267,18 @@ exports[`<PinnedMessageBanner /> should display the m.image event type 1`] = `
data-testid="banner-indicator" data-testid="banner-indicator"
/> />
</div> </div>
<div <svg
class="mx_PinnedMessageBanner_PinIcon" class="mx_PinnedMessageBanner_PinIcon"
width="20" fill="currentColor"
/> height="20px"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
/>
</svg>
<span <span
class="mx_PinnedMessageBanner_message" class="mx_PinnedMessageBanner_message"
data-testid="banner-message" data-testid="banner-message"
@ -282,10 +322,18 @@ exports[`<PinnedMessageBanner /> should display the m.video event type 1`] = `
data-testid="banner-indicator" data-testid="banner-indicator"
/> />
</div> </div>
<div <svg
class="mx_PinnedMessageBanner_PinIcon" class="mx_PinnedMessageBanner_PinIcon"
width="20" fill="currentColor"
/> height="20px"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
/>
</svg>
<span <span
class="mx_PinnedMessageBanner_message" class="mx_PinnedMessageBanner_message"
data-testid="banner-message" data-testid="banner-message"
@ -333,10 +381,18 @@ exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
data-testid="banner-indicator" data-testid="banner-indicator"
/> />
</div> </div>
<div <svg
class="mx_PinnedMessageBanner_PinIcon" class="mx_PinnedMessageBanner_PinIcon"
width="20" fill="currentColor"
/> height="20px"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
/>
</svg>
<div <div
class="mx_PinnedMessageBanner_title" class="mx_PinnedMessageBanner_title"
data-testid="banner-counter" data-testid="banner-counter"
@ -403,10 +459,18 @@ exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
data-testid="banner-indicator" data-testid="banner-indicator"
/> />
</div> </div>
<div <svg
class="mx_PinnedMessageBanner_PinIcon" class="mx_PinnedMessageBanner_PinIcon"
width="20" fill="currentColor"
/> height="20px"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
/>
</svg>
<div <div
class="mx_PinnedMessageBanner_title" class="mx_PinnedMessageBanner_title"
data-testid="banner-counter" data-testid="banner-counter"
@ -465,10 +529,18 @@ exports[`<PinnedMessageBanner /> should render a single pinned event 1`] = `
data-testid="banner-indicator" data-testid="banner-indicator"
/> />
</div> </div>
<div <svg
class="mx_PinnedMessageBanner_PinIcon" class="mx_PinnedMessageBanner_PinIcon"
width="20" fill="currentColor"
/> height="20px"
viewBox="0 0 24 24"
width="20px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357L5.77 2.857Z"
/>
</svg>
<span <span
class="mx_PinnedMessageBanner_message" class="mx_PinnedMessageBanner_message"
data-testid="banner-message" data-testid="banner-message"

36
test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
View file

@ -82,7 +82,17 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);" style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20.958 16.374.039 3.527c0 .285-.11.537-.33.756-.22.22-.472.33-.756.33a15.97 15.97 0 0 1-6.57-1.105 16.223 16.223 0 0 1-5.563-3.663 16.084 16.084 0 0 1-3.653-5.573 16.313 16.313 0 0 1-1.115-6.56c0-.285.11-.537.33-.757.22-.22.471-.329.755-.329l3.528.039a1.069 1.069 0 0 1 1.085.93l.543 3.954c.026.181.013.349-.039.504a1.088 1.088 0 0 1-.271.426l-1.64 1.64c.337.672.721 1.308 1.154 1.909.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444c.6.433 1.237.817 1.909 1.153l1.64-1.64a1.08 1.08 0 0 1 .426-.27c.155-.052.323-.065.504-.04l3.954.543a1.069 1.069 0 0 1 .93 1.085Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -96,7 +106,17 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
</div> </div>
</button> </button>
<button <button
@ -110,7 +130,17 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>

72
test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
View file

@ -487,9 +487,17 @@ exports[`<LoginWithQRFlow /> errors renders other_device_already_signed_in 1`] =
<div <div
class="mx_LoginWithQR_icon" class="mx_LoginWithQR_icon"
> >
<div <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="32px" width="32px"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
</div> </div>
<h1 <h1
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102" class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
@ -1029,7 +1037,17 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</div> </div>
<div <div
class="mx_LoginWithQR_breadcrumbs" class="mx_LoginWithQR_breadcrumbs"
@ -1230,7 +1248,17 @@ exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</div> </div>
<div <div
class="mx_LoginWithQR_breadcrumbs" class="mx_LoginWithQR_breadcrumbs"
@ -1284,7 +1312,17 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</div> </div>
<div <div
class="mx_LoginWithQR_breadcrumbs" class="mx_LoginWithQR_breadcrumbs"
@ -1350,7 +1388,17 @@ exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</div> </div>
<div <div
class="mx_LoginWithQR_breadcrumbs" class="mx_LoginWithQR_breadcrumbs"
@ -1407,7 +1455,17 @@ exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
/>
</svg>
</div> </div>
<div <div
class="mx_LoginWithQR_breadcrumbs" class="mx_LoginWithQR_breadcrumbs"

38
test/components/views/settings/devices/__snapshots__/LoginWithQRSection-test.tsx.snap
View file

@ -36,10 +36,25 @@ exports[`<LoginWithQRSection /> MSC3906 should render panel get_login_token + .w
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
fill="currentColor"
height="20" height="20"
viewBox="0 0 24 24"
width="20" width="20"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
fill-rule="evenodd"
/>
<path
d="M15 16v-3h-2v3h2Z"
/>
<path
d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
/>
</svg>
Show QR code Show QR code
</div> </div>
</div> </div>
@ -78,10 +93,25 @@ exports[`<LoginWithQRSection /> MSC3906 should render panel get_login_token + MS
role="button" role="button"
tabindex="0" tabindex="0"
> >
<div <svg
fill="currentColor"
height="20" height="20"
viewBox="0 0 24 24"
width="20" width="20"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
fill-rule="evenodd"
/>
<path
d="M15 16v-3h-2v3h2Z"
/>
<path
d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
/>
</svg>
Show QR code Show QR code
</div> </div>
</div> </div>

24
test/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
View file

@ -221,7 +221,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
<div <div
class="mx_SettingsSubsection_text" class="mx_SettingsSubsection_text"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
/>
</svg>
Video rooms and conferences Video rooms and conferences
</div> </div>
<div <div
@ -462,7 +472,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
<div <div
class="mx_SettingsSubsection_text" class="mx_SettingsSubsection_text"
> >
<div /> <svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z"
/>
</svg>
Video rooms and conferences Video rooms and conferences
</div> </div>
<div <div

13
test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
View file

@ -243,9 +243,18 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div <svg
class="mx_ThreadsActivityCentreButton_Icon" class="mx_ThreadsActivityCentreButton_Icon"
/> fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
/>
</svg>
</div> </div>
</button> </button>
<span <span

26
test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
View file

@ -162,9 +162,18 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div <svg
class="mx_ThreadsActivityCentreButton_Icon" class="mx_ThreadsActivityCentreButton_Icon"
/> fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
/>
</svg>
</div> </div>
</button> </button>
</div> </div>
@ -446,9 +455,18 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
class="_indicator-icon_133tf_26" class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;" style="--cpd-icon-button-size: 100%;"
> >
<div <svg
class="mx_ThreadsActivityCentreButton_Icon" class="mx_ThreadsActivityCentreButton_Icon"
/> fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2Zm3 7h10a.97.97 0 0 0 .712-.287A.967.967 0 0 0 18 9a.967.967 0 0 0-.288-.713A.968.968 0 0 0 17 8H7a.968.968 0 0 0-.713.287A.968.968 0 0 0 6 9c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 4h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 14 13a.968.968 0 0 0-.287-.713A.968.968 0 0 0 13 12H7a.967.967 0 0 0-.713.287A.968.968 0 0 0 6 13c0 .283.096.52.287.713.192.191.43.287.713.287Z"
/>
</svg>
</div> </div>
</button> </button>
<span <span