Update toast styles to match Figma (#12833)

* Warn users on unsupported browsers before they lack features Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update Learn more link Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update toast styles to match Figma Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove test code Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-11-21 16:55:34 +03:00 · 2024-07-30 13:57:15 +01:00 · 2024-07-30 13:57:15 +01:00 · b0392b8fc3
commit b0392b8fc3
parent a1897583b1
29 changed files with 156 additions and 114 deletions
--- a/package.json
+++ b/package.json
@ -83,7 +83,7 @@
        "@sentry/browser": "^8.0.0",
        "@testing-library/react-hooks": "^8.0.1",
        "@vector-im/compound-design-tokens": "^1.6.1",
-        "@vector-im/compound-web": "^5.4.0",
+        "@vector-im/compound-web": "^5.5.0",
        "@zxcvbn-ts/core": "^3.0.4",
        "@zxcvbn-ts/language-common": "^3.0.4",
        "@zxcvbn-ts/language-en": "^3.0.2",
--- a/playwright/pages/toasts.ts
+++ b/playwright/pages/toasts.ts
@ -45,7 +45,7 @@ export class Toasts {
     */
    public async acceptToast(expectedTitle: string): Promise<void> {
        const toast = await this.getToast(expectedTitle);
-        await toast.locator(".mx_Toast_buttons .mx_AccessibleButton_kind_primary").click();
+        await toast.locator('.mx_Toast_buttons button[data-kind="primary"]').click();
    }

    /**
@ -55,6 +55,6 @@ export class Toasts {
     */
    public async rejectToast(expectedTitle: string): Promise<void> {
        const toast = await this.getToast(expectedTitle);
-        await toast.locator(".mx_Toast_buttons .mx_AccessibleButton_kind_danger_outline").click();
+        await toast.locator('.mx_Toast_buttons button[data-kind="secondary"]').click();
    }
 }
--- a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Threads-Activity-Centre-linux.png
+++ b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Threads-Activity-Centre-linux.png
--- a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
+++ b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
--- a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
+++ b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
--- a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
+++ b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
--- a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png
+++ b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png
--- a/res/css/structures/_ToastContainer.pcss
+++ b/res/css/structures/_ToastContainer.pcss
@ -154,6 +154,7 @@ limitations under the License.
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 4px 0 11px 0;
+            color: $secondary-content;
            font: var(--cpd-font-body-sm-regular);

            a {
@ -161,10 +162,6 @@ limitations under the License.
            }
        }

-        .mx_Toast_detail {
-            color: $secondary-content;
-        }
-
        .mx_Toast_deviceID {
            font-size: $font-10px;
        }
--- a/src/SupportedBrowser.ts
+++ b/src/SupportedBrowser.ts
@ -17,6 +17,7 @@ limitations under the License.
 import { logger } from "matrix-js-sdk/src/logger";
 import browserlist from "browserslist";
 import electronToChromium from "electron-to-chromium/versions";
+import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";

 import { DeviceType, parseUserAgent } from "./utils/device/parseUserAgent";
 import ToastStore from "./stores/ToastStore";
@ -112,10 +113,11 @@ export function checkBrowserSupport(): void {
        title: _t("unsupported_browser|title", { brand }),
        props: {
            description: _t("unsupported_browser|description", { brand }),
-            acceptLabel: _t("action|learn_more"),
-            onAccept: onLearnMoreClick,
-            rejectLabel: _t("action|dismiss"),
-            onReject: onDismissClick,
+            secondaryLabel: _t("action|learn_more"),
+            SecondaryIcon: PopOutIcon,
+            onSecondaryClick: onLearnMoreClick,
+            primaryLabel: _t("action|dismiss"),
+            onPrimaryClick: onDismissClick,
        },
        component: GenericToast,
        priority: 40,
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@ -1390,8 +1390,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                    title: userNotice.title,
                    props: {
                        description: <Linkify>{userNotice.description}</Linkify>,
-                        acceptLabel: _t("action|ok"),
-                        onAccept: () => {
+                        primaryLabel: _t("action|ok"),
+                        onPrimaryClick: () => {
                            ToastStore.sharedInstance().dismissToast(key);
                            localStorage.setItem(key, "1");
                        },
--- a/src/components/structures/ToastContainer.tsx
+++ b/src/components/structures/ToastContainer.tsx
@ -16,6 +16,7 @@ limitations under the License.

 import * as React from "react";
 import classNames from "classnames";
+import { Text } from "@vector-im/compound-web";

 import ToastStore, { IToast } from "../../stores/ToastStore";

@ -78,7 +79,9 @@ export default class ToastContainer extends React.Component<{}, IState> {
            if (title) {
                titleElement = (
                    <div className="mx_Toast_title">
-                        <h2>{title}</h2>
+                        <Text size="lg" weight="semibold" as="h2">
+                            {title}
+                        </Text>
                        <span className="mx_Toast_title_countIndicator">{countIndicator}</span>
                    </div>
                );
--- a/src/components/views/toasts/GenericExpiringToast.tsx
+++ b/src/components/views/toasts/GenericExpiringToast.tsx
@ -31,9 +31,9 @@ const SECOND = 1000;

 const GenericExpiringToast: React.FC<IProps> = ({
    description,
-    acceptLabel,
+    primaryLabel,
    dismissLabel,
-    onAccept,
+    onPrimaryClick,
    onDismiss,
    toastKey,
    numSeconds,
@ -52,10 +52,10 @@ const GenericExpiringToast: React.FC<IProps> = ({
    return (
        <GenericToast
            description={description}
-            acceptLabel={acceptLabel}
-            onAccept={onAccept}
-            rejectLabel={rejectLabel}
-            onReject={onReject}
+            primaryLabel={primaryLabel}
+            onPrimaryClick={onPrimaryClick}
+            secondaryLabel={rejectLabel}
+            onSecondaryClick={onReject}
        />
    );
 };
--- a/src/components/views/toasts/GenericToast.tsx
+++ b/src/components/views/toasts/GenericToast.tsx
@ -14,31 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, { ReactNode } from "react";
+import React, { ComponentType, ReactNode } from "react";
+import { Button } from "@vector-im/compound-web";

-import AccessibleButton from "../elements/AccessibleButton";
 import { XOR } from "../../../@types/common";

 export interface IProps {
    description: ReactNode;
    detail?: ReactNode;
-    acceptLabel: string;
+    primaryLabel: string;
+    PrimaryIcon?: ComponentType<React.SVGAttributes<SVGElement>>;

-    onAccept(): void;
+    onPrimaryClick(): void;
 }

 interface IPropsExtended extends IProps {
-    rejectLabel: string;
-    onReject(): void;
+    secondaryLabel: string;
+    SecondaryIcon?: ComponentType<React.SVGAttributes<SVGElement>>;
+    destructive?: "primary" | "secondary";
+    onSecondaryClick(): void;
 }

 const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
    description,
    detail,
-    acceptLabel,
-    rejectLabel,
-    onAccept,
-    onReject,
+    primaryLabel,
+    PrimaryIcon,
+    secondaryLabel,
+    SecondaryIcon,
+    destructive,
+    onPrimaryClick,
+    onSecondaryClick,
 }) => {
    const detailContent = detail ? <div className="mx_Toast_detail">{detail}</div> : null;

@ -49,14 +55,24 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
                {detailContent}
            </div>
            <div className="mx_Toast_buttons" aria-live="off">
-                {onReject && rejectLabel && (
-                    <AccessibleButton kind="danger_outline" onClick={onReject}>
-                        {rejectLabel}
-                    </AccessibleButton>
+                {onSecondaryClick && secondaryLabel && (
+                    <Button
+                        onClick={onSecondaryClick}
+                        kind={destructive === "secondary" ? "destructive" : "secondary"}
+                        Icon={SecondaryIcon}
+                        size="sm"
+                    >
+                        {secondaryLabel}
+                    </Button>
                )}
-                <AccessibleButton onClick={onAccept} kind="primary">
-                    {acceptLabel}
-                </AccessibleButton>
+                <Button
+                    onClick={onPrimaryClick}
+                    kind={destructive === "primary" ? "destructive" : "primary"}
+                    Icon={PrimaryIcon}
+                    size="sm"
+                >
+                    {primaryLabel}
+                </Button>
            </div>
        </div>
    );
--- a/src/components/views/toasts/VerificationRequestToast.tsx
+++ b/src/components/views/toasts/VerificationRequestToast.tsx
@ -185,14 +185,14 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
            <GenericToast
                description={description}
                detail={detail}
-                acceptLabel={
+                primaryLabel={
                    request.isSelfVerification || !request.roomId
                        ? _t("encryption|verification|request_toast_accept")
                        : _t("encryption|verification|request_toast_accept_user")
                }
-                onAccept={this.accept}
-                rejectLabel={declineLabel}
-                onReject={this.cancel}
+                onPrimaryClick={this.accept}
+                secondaryLabel={declineLabel}
+                onSecondaryClick={this.cancel}
            />
        );
    }
--- a/src/stores/LifecycleStore.ts
+++ b/src/stores/LifecycleStore.ts
@ -114,8 +114,8 @@ async function checkServerVersions(): Promise<void> {
                    version: MINIMUM_MATRIX_VERSION,
                    brand: SdkConfig.get().brand,
                }),
-                acceptLabel: _t("action|ok"),
-                onAccept: () => {
+                primaryLabel: _t("action|ok"),
+                onPrimaryClick: () => {
                    ToastStore.sharedInstance().dismissToast(toastKey);
                },
            },
--- a/src/toasts/AnalyticsToast.tsx
+++ b/src/toasts/AnalyticsToast.tsx
@ -87,10 +87,10 @@ export const showToast = (): void => {
        // them to opt in again.
        props = {
            description: _t("analytics|consent_migration"),
-            acceptLabel: _t("analytics|accept_button"),
-            onAccept,
-            rejectLabel: _t("action|learn_more"),
-            onReject: onLearnMorePreviouslyOptedIn,
+            primaryLabel: _t("analytics|accept_button"),
+            onPrimaryClick: onAccept,
+            secondaryLabel: _t("action|learn_more"),
+            onSecondaryClick: onLearnMorePreviouslyOptedIn,
        };
    } else if (legacyAnalyticsOptIn === null || legacyAnalyticsOptIn === undefined) {
        // The user had no analytics setting previously set, so we just need to prompt to opt-in, rather than
@ -102,10 +102,10 @@ export const showToast = (): void => {
        );
        props = {
            description: _t("analytics|learn_more", {}, { LearnMoreLink: learnMoreLink }),
-            acceptLabel: _t("action|yes"),
-            onAccept,
-            rejectLabel: _t("action|no"),
-            onReject,
+            primaryLabel: _t("action|yes"),
+            onPrimaryClick: onAccept,
+            secondaryLabel: _t("action|no"),
+            onSecondaryClick: onReject,
        };
    } else {
        // false
--- a/src/toasts/BulkUnverifiedSessionsToast.ts
+++ b/src/toasts/BulkUnverifiedSessionsToast.ts
@ -44,10 +44,10 @@ export const showToast = (deviceIds: Set<string>): void => {
        icon: "verification_warning",
        props: {
            description: _t("encryption|verification|unverified_sessions_toast_description"),
-            acceptLabel: _t("action|review"),
-            onAccept,
-            rejectLabel: _t("encryption|verification|unverified_sessions_toast_reject"),
-            onReject,
+            primaryLabel: _t("action|review"),
+            onPrimaryClick: onAccept,
+            secondaryLabel: _t("encryption|verification|unverified_sessions_toast_reject"),
+            onSecondaryClick: onReject,
        },
        component: GenericToast,
        priority: 50,
--- a/src/toasts/DesktopNotificationsToast.ts
+++ b/src/toasts/DesktopNotificationsToast.ts
@ -44,10 +44,10 @@ export const showToast = (fromMessageSend: boolean): void => {
            : _t("notifications|enable_prompt_toast_title"),
        props: {
            description: _t("notifications|enable_prompt_toast_description"),
-            acceptLabel: _t("action|enable"),
-            onAccept,
-            rejectLabel: _t("action|dismiss"),
-            onReject,
+            primaryLabel: _t("action|enable"),
+            onPrimaryClick: onAccept,
+            secondaryLabel: _t("action|dismiss"),
+            onSecondaryClick: onReject,
        },
        component: GenericToast,
        priority: 30,
--- a/src/toasts/MobileGuideToast.ts
+++ b/src/toasts/MobileGuideToast.ts
@ -45,10 +45,10 @@ export const showToast = (): void => {
        title: _t("mobile_guide|toast_title"),
        props: {
            description: _t("mobile_guide|toast_description", { brand }),
-            acceptLabel: _t("mobile_guide|toast_accept"),
-            onAccept,
-            rejectLabel: _t("action|dismiss"),
-            onReject,
+            primaryLabel: _t("mobile_guide|toast_accept"),
+            onPrimaryClick: onAccept,
+            secondaryLabel: _t("action|dismiss"),
+            onSecondaryClick: onReject,
        },
        component: GenericToast,
        priority: 99,
--- a/src/toasts/ServerLimitToast.tsx
+++ b/src/toasts/ServerLimitToast.tsx
@ -47,8 +47,8 @@ export const showToast = (
                    {errorText} {contactText}
                </React.Fragment>
            ),
-            acceptLabel: _t("action|ok"),
-            onAccept: () => {
+            primaryLabel: _t("action|ok"),
+            onPrimaryClick: () => {
                hideToast();
                if (onHideToast) onHideToast();
            },
--- a/src/toasts/SetupEncryptionToast.ts
+++ b/src/toasts/SetupEncryptionToast.ts
@ -114,10 +114,11 @@ export const showToast = (kind: Kind): void => {
        icon: getIcon(kind),
        props: {
            description: getDescription(kind),
-            acceptLabel: getSetupCaption(kind),
-            onAccept,
-            rejectLabel: _t("encryption|verification|unverified_sessions_toast_reject"),
-            onReject,
+            primaryLabel: getSetupCaption(kind),
+            onPrimaryClick: onAccept,
+            secondaryLabel: _t("encryption|verification|unverified_sessions_toast_reject"),
+            onSecondaryClick: onReject,
+            destructive: "secondary",
        },
        component: GenericToast,
        priority: kind === Kind.VERIFY_THIS_SESSION ? 95 : 40,
--- a/src/toasts/UnverifiedSessionToast.tsx
+++ b/src/toasts/UnverifiedSessionToast.tsx
@ -59,10 +59,11 @@ export const showToast = async (deviceId: string): Promise<void> => {
        props: {
            description: device.display_name,
            detail: <DeviceMetaData device={extendedDevice} />,
-            acceptLabel: _t("encryption|verification|unverified_session_toast_accept"),
-            onAccept,
-            rejectLabel: _t("action|no"),
-            onReject,
+            primaryLabel: _t("encryption|verification|unverified_session_toast_accept"),
+            onPrimaryClick: onAccept,
+            secondaryLabel: _t("action|no"),
+            onSecondaryClick: onReject,
+            destructive: "secondary",
        },
        component: GenericToast,
        priority: 80,
--- a/src/toasts/UpdateToast.tsx
+++ b/src/toasts/UpdateToast.tsx
@ -83,10 +83,10 @@ export const showToast = (version: string, newVersion: string, releaseNotes?: st
        title: _t("update|toast_title", { brand }),
        props: {
            description: _t("update|toast_description", { brand }),
-            acceptLabel,
-            onAccept,
-            rejectLabel: _t("action|dismiss"),
-            onReject,
+            primaryLabel: acceptLabel,
+            onPrimaryClick: onAccept,
+            secondaryLabel: _t("action|dismiss"),
+            onSecondaryClick: onReject,
        },
        component: GenericToast,
        priority: 20,
--- a/test/components/views/toasts/GenericToast-test.tsx
+++ b/test/components/views/toasts/GenericToast-test.tsx
@ -21,11 +21,11 @@ import GenericToast from "../../../../src/components/views/toasts/GenericToast";

 const renderGenericToast = (props: Partial<ComponentProps<typeof GenericToast>> = {}): RenderResult => {
    const propsWithDefaults = {
-        acceptLabel: "Accept",
+        primaryLabel: "Accept",
        description: <div>Description</div>,
-        onAccept: () => {},
-        onReject: () => {},
-        rejectLabel: "Reject",
+        onPrimaryClick: () => {},
+        onSecondaryClick: () => {},
+        secondaryLabel: "Reject",
        ...props,
    };

--- a/test/components/views/toasts/snapshots/GenericToast-test.tsx.snap
+++ b/test/components/views/toasts/snapshots/GenericToast-test.tsx.snap
@ -14,20 +14,24 @@ exports[`GenericToast should render as expected with detail content 1`] = `
      aria-live="off"
      class="mx_Toast_buttons"
    >
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+      <button
+        class="_button_zt6rp_17"
+        data-kind="secondary"
+        data-size="sm"
        role="button"
        tabindex="0"
      >
        Reject
-      </div>
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+      </button>
+      <button
+        class="_button_zt6rp_17"
+        data-kind="primary"
+        data-size="sm"
        role="button"
        tabindex="0"
      >
        Accept
-      </div>
+      </button>
    </div>
  </div>
 </DocumentFragment>
@ -52,20 +56,24 @@ exports[`GenericToast should render as expected without detail content 1`] = `
      aria-live="off"
      class="mx_Toast_buttons"
    >
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+      <button
+        class="_button_zt6rp_17"
+        data-kind="secondary"
+        data-size="sm"
        role="button"
        tabindex="0"
      >
        Reject
-      </div>
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+      </button>
+      <button
+        class="_button_zt6rp_17"
+        data-kind="primary"
+        data-size="sm"
        role="button"
        tabindex="0"
      >
        Accept
-      </div>
+      </button>
    </div>
  </div>
 </DocumentFragment>
--- a/test/components/views/toasts/snapshots/VerificationRequestToast-test.tsx.snap
+++ b/test/components/views/toasts/snapshots/VerificationRequestToast-test.tsx.snap
@ -12,20 +12,24 @@ exports[`VerificationRequestToast should render a cross-user verification 1`] =
      aria-live="off"
      class="mx_Toast_buttons"
    >
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+      <button
+        class="_button_zt6rp_17"
+        data-kind="secondary"
+        data-size="sm"
        role="button"
        tabindex="0"
      >
        Ignore
-      </div>
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+      </button>
+      <button
+        class="_button_zt6rp_17"
+        data-kind="primary"
+        data-size="sm"
        role="button"
        tabindex="0"
      >
        Verify Session
-      </div>
+      </button>
    </div>
  </div>
 </div>
@ -48,20 +52,24 @@ exports[`VerificationRequestToast should render a self-verification 1`] = `
      aria-live="off"
      class="mx_Toast_buttons"
    >
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+      <button
+        class="_button_zt6rp_17"
+        data-kind="secondary"
+        data-size="sm"
        role="button"
        tabindex="0"
      >
        Ignore
-      </div>
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+      </button>
+      <button
+        class="_button_zt6rp_17"
+        data-kind="primary"
+        data-size="sm"
        role="button"
        tabindex="0"
      >
        Verify Session
-      </div>
+      </button>
    </div>
  </div>
 </div>
--- a/test/stores/LifecycleStore-test.ts
+++ b/test/stores/LifecycleStore-test.ts
@ -80,7 +80,7 @@ describe("LifecycleStore", () => {

        await sleep(0);

-        addOrReplaceToast.mock.calls[0][0].props.onAccept();
+        addOrReplaceToast.mock.calls[0][0].props.onPrimaryClick();

        expect(dismissToast).toHaveBeenCalledWith(addOrReplaceToast.mock.calls[0][0].key);
    });
--- a/test/toasts/snapshots/UnverifiedSessionToast-test.tsx.snap
+++ b/test/toasts/snapshots/UnverifiedSessionToast-test.tsx.snap
@ -13,7 +13,9 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
        <div
          class="mx_Toast_title"
        >
-          <h2>
+          <h2
+            class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
+          >
            New login. Was this you?
          </h2>
          <span
@ -47,20 +49,24 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
              aria-live="off"
              class="mx_Toast_buttons"
            >
-              <div
-                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+              <button
+                class="_button_zt6rp_17 _destructive_zt6rp_111"
+                data-kind="secondary"
+                data-size="sm"
                role="button"
                tabindex="0"
              >
                No
-              </div>
-              <div
-                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+              </button>
+              <button
+                class="_button_zt6rp_17"
+                data-kind="primary"
+                data-size="sm"
                role="button"
                tabindex="0"
              >
                Yes, it was me
-              </div>
+              </button>
            </div>
          </div>
        </div>
--- a/yarn.lock
+++ b/yarn.lock
@ -3017,7 +3017,7 @@
  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.6.1.tgz#3f1bb5b2b9f8aff10144aab19dfa11165c3c927b"
  integrity sha512-u5xG/8AN7QkPPWhugj0ZrQtWsAjuKHzuOoP0s3bbDg7ZkKTE9l5tM29bdOHnSv9mEYKO+KVMMfsl0W1rlaTmAw==

-"@vector-im/compound-web@^5.4.0":
+"@vector-im/compound-web@^5.5.0":
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-5.5.0.tgz#c646cd8c59aa7e5df527d843ad3b7b7c064d5224"
  integrity sha512-Z+QSXOkJE4/LYk9j9FMVE2m5noz3gEA4yRxetjSJyXB5mDpyIJ1OYAweuZJXS3foxqygVDeB82YgTw1JgDtUvg==