Iterate design of right panel empty state

playwright/e2e/right-panel/file-panel.spec.ts

@@ -50,7 +50,7 @@ test.describe("FilePanel", () => {
     test.describe("render", () => {
         test("should render empty state", async ({ page }) => {
             // Wait until the information about the empty state is rendered
-            await expect(page.locator(".mx_FilePanel_empty")).toBeVisible();
+            await expect(page.locator(".mx_EmptyState")).toBeVisible();
 
             // Take a snapshot of RightPanel - fix https://github.com/vector-im/element-web/issues/25332
             await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("empty.png");

playwright/e2e/right-panel/notification-panel.spec.ts

@@ -35,7 +35,7 @@ test.describe("NotificationPanel", () => {
         await page.getByRole("button", { name: "Notifications" }).click();
 
         // Wait until the information about the empty state is rendered
-        await expect(page.locator(".mx_NotificationPanel_empty")).toBeVisible();
+        await expect(page.locator(".mx_EmptyState")).toBeVisible();
 
         // Take a snapshot of RightPanel
         await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("empty.png");

playwright/e2e/right-panel/right-panel.spec.ts

@@ -104,7 +104,7 @@ test.describe("RightPanel", () => {
 
             await page.getByRole("menuitem", { name: "Files" }).click();
             await expect(page.locator(".mx_FilePanel")).toBeVisible();
-            await expect(page.locator(".mx_FilePanel_empty")).toBeVisible();
+            await expect(page.locator(".mx_EmptyState")).toBeVisible();
 
             await page.getByTestId("base-card-back-button").click();
             await checkRoomSummaryCard(page, ROOM_NAME);

res/css/_components.pcss

@@ -73,7 +73,6 @@
 @import "./structures/_MatrixChat.pcss";
 @import "./structures/_MessagePanel.pcss";
 @import "./structures/_NonUrgentToastContainer.pcss";
-@import "./structures/_NotificationPanel.pcss";
 @import "./structures/_QuickSettingsButton.pcss";
 @import "./structures/_RightPanel.pcss";
 @import "./structures/_RoomSearch.pcss";
@@ -259,6 +258,7 @@
 @import "./views/polls/pollHistory/_PollHistory.pcss";
 @import "./views/polls/pollHistory/_PollHistoryList.pcss";
 @import "./views/right_panel/_BaseCard.pcss";
+@import "./views/right_panel/_EmptyState.pcss";
 @import "./views/right_panel/_EncryptionInfo.pcss";
 @import "./views/right_panel/_PinnedMessagesCard.pcss";
 @import "./views/right_panel/_RightPanelTabs.pcss";

res/css/structures/_FilePanel.pcss

@@ -102,7 +102,3 @@ limitations under the License.
         padding-inline-start: 0;
     }
 }
-
-.mx_FilePanel_empty::before {
-    --maskImage: url("$(res)/img/element-icons/room/files.svg"); /* See: _RightPanel.pcss */
-}

res/css/structures/_RightPanel.pcss

@@ -72,30 +72,3 @@ limitations under the License.
     order: 2;
     margin: auto;
 }
-
-.mx_RightPanel_empty {
-    margin-right: -28px;
-
-    h2 {
-        font-weight: 700;
-        margin: 16px 0;
-    }
-
-    h2,
-    p {
-        font: var(--cpd-font-body-md-regular);
-    }
-
-    &::before {
-        content: "";
-        display: block;
-        margin: 11px auto 29px auto;
-        height: 42px;
-        width: 42px;
-        background-color: $header-panel-text-primary-color;
-        mask-image: var(--maskImage);
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-    }
-}

res/css/views/right_panel/_EmptyState.pcss

@@ -0,0 +1,45 @@
+/*
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_EmptyState {
+    height: 100%;
+    box-sizing: border-box;
+    padding: var(--cpd-space-4x);
+    text-align: center;
+
+    svg {
+        width: 56px;
+        height: 56px;
+        box-sizing: border-box;
+        border-radius: 8px;
+        padding: var(--cpd-space-3x);
+        background-color: $panel-actions;
+    }
+
+    &::before {
+        /* Bloom using magic numbers directly out of Figma */
+        content: "";
+        position: absolute;
+        z-index: -1;
+        width: 642px;
+        height: 775px;
+        right: -253.77px;
+        top: 0;
+        background: radial-gradient(49.95% 49.95% at 50% 50%, rgba(13, 189, 139, 0.12) 0%, rgba(18, 115, 235, 0) 100%);
+        transform: rotate(-89.69deg);
+        overflow: hidden;
+    }
+}

res/css/views/right_panel/_ThreadPanel.pcss

@@ -106,10 +106,17 @@ limitations under the License.
     }
 
     .mx_RoomView_messagePanel {
-        /* To avoid the rule from being applied to .mx_ThreadPanel_empty */
+        &.mx_RoomView_messageListWrapper {
+            position: initial;
+        }
+
         .mx_RoomView_messageListWrapper {
             width: calc(100% + 6px); /* 8px - 2px */
         }
+
+        .mx_RoomView_empty {
+            display: contents;
+        }
     }
 
     .mx_RoomView_MessageList {
@@ -168,72 +175,6 @@ limitations under the License.
     mask-image: url("$(res)/img/element-icons/link.svg");
 }
 
-.mx_ThreadPanel_empty {
-    border-radius: 8px;
-    background: $background;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    padding: 20px;
-    box-sizing: border-box; /* Include padding and border */
-    width: 100%;
-
-    h2 {
-        color: $primary-content;
-        font-weight: var(--cpd-font-weight-semibold);
-        font-size: $font-18px;
-        margin-top: 24px;
-        margin-bottom: 10px;
-    }
-
-    p {
-        font-size: $font-15px;
-        color: $secondary-content;
-        margin: 10px 0;
-    }
-
-    button {
-        border: none;
-        background: none;
-        color: $accent;
-        font-size: $font-15px;
-
-        &:hover,
-        &:active {
-            text-decoration: underline;
-            cursor: pointer;
-        }
-    }
-
-    .mx_ThreadPanel_empty_tip {
-        font-size: $font-12px;
-        line-height: $font-15px;
-
-        > b {
-            font-weight: var(--cpd-font-weight-semibold);
-        }
-    }
-}
-
-.mx_ThreadPanel_largeIcon {
-    width: 28px;
-    height: 28px;
-    padding: 18px;
-    background: $system;
-    border-radius: 50%;
-
-    &::after {
-        @mixin ThreadSummaryIcon;
-        width: inherit;
-        height: inherit;
-    }
-}
-
 .mx_ContextualMenu_wrapper {
     .mx_ThreadPanel_Header_FilterOptionItem {
         display: flex;

src/components/structures/FilePanel.tsx

@@ -28,6 +28,7 @@ import {
     TimelineWindow,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Icon as FilesIcon } from "@vector-im/compound-design-tokens/icons/files.svg";
 
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import EventIndexPeg from "../../indexing/EventIndexPeg";
@@ -40,6 +41,7 @@ import Spinner from "../views/elements/Spinner";
 import { Layout } from "../../settings/enums/Layout";
 import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import Measured from "../views/elements/Measured";
+import EmptyState from "../views/right_panel/EmptyState";
 
 interface IProps {
     roomId: string;
@@ -255,10 +257,11 @@ class FilePanel extends React.Component<IProps, IState> {
         // wrap a TimelinePanel with the jump-to-event bits turned off.
 
         const emptyState = (
-            <div className="mx_RightPanel_empty mx_FilePanel_empty">
-                <h2>{_t("file_panel|empty_heading")}</h2>
-                <p>{_t("file_panel|empty_description")}</p>
-            </div>
+            <EmptyState
+                Icon={FilesIcon}
+                title={_t("file_panel|empty_heading")}
+                description={_t("file_panel|empty_description")}
+            />
         );
 
         const isRoomEncrypted = this.noRoom ? false : MatrixClientPeg.safeGet().isRoomEncrypted(this.props.roomId);

src/components/structures/NotificationPanel.tsx

@@ -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;