sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Update critical gradient for room status bar (#32575)

Browse Source 
* Update critical gradient for room status bar

As per design request, this has been updated to be much more subtle
https://github.com/element-hq/compound-design-tokens/pull/232

* update shared-component

* Cleanup

* Update snaps

* description fix color

* More cleanup

* Use the correct border color

* new snaps

* fix border, button placement, fonts etc

* update lock

* Update status bar

* Update playwright snaps

* Update snap icon

* Update other banners

* update snap

* fixup
This commit is contained in:
Will Hunt
2026-02-26 15:10:54 +00:00
committed by GitHub
parent 26a3d75d4d
commit f82a3ef1bb
28 changed files with 93 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/shared-components/src/composer/Banner/Banner.module.css
+4 -15
View File
@@ -9,7 +9,6 @@
container-type: inline-size;
container-name: banner;
display: flex;
align-items: center;
justify-content: start;
gap: var(--cpd-space-3x);
padding: var(--cpd-space-4x);
@@ -24,7 +23,7 @@
.banner[data-type="critical"] {
background: var(--cpd-color-gradient-critical-linear);
border-color: var(--cpd-color-border-critical-primary);
border-color: var(--cpd-color-border-critical-subtle);
}
.banner[data-type="info"] {
@@ -49,19 +48,9 @@
}
.icon {
/* lock icon dimensions */
min-width: 32px;
min-height: 32px;
max-width: 32px;
max-height: 32px;
margin: 4px;
/* centre svg icons, as they are not full width */
flex: 0;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
align-items: flex-start;
}
.icon img {
@@ -74,7 +63,7 @@
flex: 0;
display: flex;
flex-direction: row;
gap: var(--cpd-space-1x);
gap: var(--cpd-space-4x);
align-self: center;
white-space: nowrap;
packages/shared-components/src/composer/Banner/Banner.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ import React, {
} from "react";
import { Button } from "@vector-im/compound-web";
import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle";
import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
import styles from "./Banner.module.css";
packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap
+1 -1
View File
@@ -123,7 +123,7 @@ exports[`AvatarWithDetails > renders a critical banner 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
/>
</svg>
</div>
packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.module.css
+13 -1
View File
@@ -6,6 +6,18 @@
}
}
.secondaryAction svg {
color: var(--cpd-color-text-secondary) !important;
}
.primaryAction svg {
color: var(--cpd-color-text-on-solid-primary) !important;
}
.title {
color: var(--cpd-color-text-critical-primary);
}
.description {
color: var(--cpd-color-text-secondary);
color: var(--cpd-color-text-primary);
}
packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.stories.tsx
+6
View File
@@ -47,6 +47,12 @@ const meta = {
onRetryRoomCreationClick: fn(),
onTermsAndConditionsClicked: fn(),
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=11019-2353&t=p8SkJGh9tJx09MTJ-4",
},
},
} satisfies Meta<typeof RoomStatusBarViewWrapper>;
export default meta;
packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.tsx
+16 -16
View File
@@ -161,10 +161,10 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
return (
<Banner type="critical" role="status" aria-labelledby={bannerTitleId}>
<div className={styles.container}>
<Text id={bannerTitleId} weight="semibold">
<Text className={styles.title} id={bannerTitleId} weight="medium">
{_t("room|status_bar|server_connectivity_lost_title")}
</Text>
<Text className={styles.description} size="sm">
<Text className={styles.description}>
{_t("room|status_bar|server_connectivity_lost_description")}
</Text>
</div>
@@ -179,7 +179,8 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
actions={
<Button
onClick={termsAndConditionsClicked}
kind="secondary"
className={styles.primaryAction}
kind="primary"
size="sm"
as="a"
href={snapshot.consentUri}
@@ -191,7 +192,7 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
}
>
<div className={styles.container}>
<Text id={bannerTitleId} weight="semibold">
<Text className={styles.title} id={bannerTitleId} weight="medium">
{_t("room|status_bar|requires_consent_agreement_title")}
</Text>
</div>
@@ -219,13 +220,13 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
}
>
<div className={styles.container}>
<Text id={bannerTitleId} weight="semibold">
<Text className={styles.title} id={bannerTitleId} weight="medium">
{{
monthly_active_user: _t("room|status_bar|monthly_user_limit_reached_title"),
hs_disabled: _t("room|status_bar|homeserver_blocked_title"),
}[snapshot.resourceLimit] || _t("room|status_bar|exceeded_resource_limit_title")}
</Text>
<Text className={styles.description} size="sm">
<Text className={styles.description}>
{_t("room|status_bar|exceeded_resource_limit_description")}
</Text>
</div>
@@ -240,8 +241,8 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
actions={
<Button
size="sm"
kind="secondary"
className={styles.container}
kind="primary"
className={styles.primaryAction}
Icon={RestartIcon}
onClick={retryRoomCreationClick}
>
@@ -249,7 +250,7 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
</Button>
}
>
<Text id={bannerTitleId} weight="semibold" className={styles.container}>
<Text className={styles.title} id={bannerTitleId} weight="medium">
{_t("room|status_bar|failed_to_create_room_title")}
</Text>
</Banner>
@@ -267,9 +268,10 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
{vm.onDeleteAllClick && (
<Button
size="sm"
kind="destructive"
kind="secondary"
Icon={DeleteIcon}
disabled={snapshot.isResending}
className={styles.secondaryAction}
onClick={deleteAllClick}
>
{_t("room|status_bar|delete_all")}
@@ -278,11 +280,11 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
{vm.onResendAllClick && (
<Button
size="sm"
kind="secondary"
kind="primary"
Icon={RestartIcon}
disabled={snapshot.isResending}
onClick={resendClick}
className={styles.container}
className={styles.primaryAction}
>
{_t("room|status_bar|retry_all")}
</Button>
@@ -293,12 +295,10 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
aria-labelledby={bannerTitleId}
>
<div className={styles.container}>
<Text id={bannerTitleId} weight="semibold">
<Text className={styles.title} id={bannerTitleId} weight="medium">
{_t("room|status_bar|some_messages_not_sent")}
</Text>
<Text className={styles.description} size="sm">
{_t("room|status_bar|select_messages_to_retry")}
</Text>
<Text className={styles.description}>{_t("room|status_bar|select_messages_to_retry")}</Text>
</div>
</Banner>
);
packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap
+32 -32
View File
@@ -20,7 +20,7 @@ exports[`RoomStatusBarView > renders connection lost 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
/>
</svg>
</div>
@@ -31,13 +31,13 @@ exports[`RoomStatusBarView > renders connection lost 1`] = `
class="container"
>
<p
class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
id="_r_0_"
>
Connectivity to the server has been lost.
</p>
<p
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 description"
class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
>
Sent messages will be stored until your connection has returned.
</p>
@@ -70,7 +70,7 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
/>
</svg>
</div>
@@ -81,7 +81,7 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
class="container"
>
<p
class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
id="_r_2_"
>
You can't send any messages until you review and agree to our terms and conditions.
@@ -92,8 +92,8 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
class="actions"
>
<a
class="_button_13vu4_8"
data-kind="secondary"
class="_button_13vu4_8 primaryAction"
data-kind="primary"
data-size="sm"
href="#example"
rel="noreferrer noopener"
@@ -128,7 +128,7 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
/>
</svg>
</div>
@@ -136,7 +136,7 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
class="content"
>
<p
class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55 container"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
id="_r_6_"
>
Could not start a chat with this user
@@ -146,8 +146,8 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
class="actions"
>
<button
class="_button_13vu4_8 container _has-icon_13vu4_60"
data-kind="secondary"
class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
data-kind="primary"
data-size="sm"
role="button"
tabindex="0"
@@ -191,7 +191,7 @@ exports[`RoomStatusBarView > renders resource limit error 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
/>
</svg>
</div>
@@ -202,13 +202,13 @@ exports[`RoomStatusBarView > renders resource limit error 1`] = `
class="container"
>
<p
class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
id="_r_1_"
>
Your message wasn't sent because this homeserver has been blocked by its administrator.
</p>
<p
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 description"
class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
>
Please contact your service administrator to continue using the service.
</p>
@@ -254,7 +254,7 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
/>
</svg>
</div>
@@ -265,13 +265,13 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
class="container"
>
<p
class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
id="_r_3_"
>
Some of your messages have not been sent
</p>
<p
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 description"
class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
>
You can select all or individual messages to retry or delete
</p>
@@ -282,7 +282,7 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
>
<button
aria-disabled="false"
class="_button_13vu4_8 _has-icon_13vu4_60 _destructive_13vu4_110"
class="_button_13vu4_8 secondaryAction _has-icon_13vu4_60"
data-kind="secondary"
data-size="sm"
role="button"
@@ -304,8 +304,8 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
</button>
<button
aria-disabled="false"
class="_button_13vu4_8 container _has-icon_13vu4_60"
data-kind="secondary"
class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
data-kind="primary"
data-size="sm"
role="button"
tabindex="0"
@@ -349,7 +349,7 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
/>
</svg>
</div>
@@ -360,13 +360,13 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
class="container"
>
<p
class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
id="_r_4_"
>
Some of your messages have not been sent
</p>
<p
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 description"
class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
>
You can select all or individual messages to retry or delete
</p>
@@ -377,7 +377,7 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
>
<button
aria-disabled="false"
class="_button_13vu4_8 _has-icon_13vu4_60 _destructive_13vu4_110"
class="_button_13vu4_8 secondaryAction _has-icon_13vu4_60"
data-kind="secondary"
data-size="sm"
role="button"
@@ -399,8 +399,8 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
</button>
<button
aria-disabled="false"
class="_button_13vu4_8 container _has-icon_13vu4_60"
data-kind="secondary"
class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
data-kind="primary"
data-size="sm"
role="button"
tabindex="0"
@@ -444,7 +444,7 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12t2.325 5.675T12 20"
/>
</svg>
</div>
@@ -455,13 +455,13 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
class="container"
>
<p
class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
id="_r_5_"
>
Some of your messages have not been sent
</p>
<p
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 description"
class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
>
You can select all or individual messages to retry or delete
</p>
@@ -472,7 +472,7 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
>
<button
aria-disabled="false"
class="_button_13vu4_8 _has-icon_13vu4_60 _destructive_13vu4_110"
class="_button_13vu4_8 secondaryAction _has-icon_13vu4_60"
data-kind="secondary"
data-size="sm"
role="button"
@@ -494,8 +494,8 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
</button>
<button
aria-disabled="false"
class="_button_13vu4_8 container _has-icon_13vu4_60"
data-kind="secondary"
class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
data-kind="primary"
data-size="sm"
role="button"
tabindex="0"