Iterate design of right panel empty state (#12796)

* Add reusable empty state for the right panel

Signed-off-by: Michael Telatynski <[email protected]>

* Update tests

Signed-off-by: Michael Telatynski <[email protected]>

* Improve coverage

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

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

playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png

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

playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png

@@ -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/_components.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/structures/_FilePanel.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;
+    }
+}