Iterate design of right panel empty state (#12796)

* Add reusable empty state for the right panel

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve coverage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-19 18:17:40 +01:00 committed by GitHub
parent d202295015
commit 0fc1c53a8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 266 additions and 280 deletions

View file

@ -16,6 +16,7 @@ limitations under the License.
import React from "react";
import { logger } from "matrix-js-sdk/src/logger";
import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications.svg";
import { _t } from "../../languageHandler";
import { MatrixClientPeg } from "../../MatrixClientPeg";
@ -26,6 +27,7 @@ import { Layout } from "../../settings/enums/Layout";
import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
import Measured from "../views/elements/Measured";
import Heading from "../views/typography/Heading";
import EmptyState from "../views/right_panel/EmptyState";
interface IProps {
onClose(): void;
@ -57,10 +59,11 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
public render(): React.ReactNode {
const emptyState = (
<div className="mx_RightPanel_empty mx_NotificationPanel_empty">
<h2>{_t("notif_panel|empty_heading")}</h2>
<p>{_t("notif_panel|empty_description")}</p>
</div>
<EmptyState
Icon={NotificationsIcon}
title={_t("notif_panel|empty_heading")}
description={_t("notif_panel|empty_description")}
/>
);
let content: JSX.Element;