From 2e1798edc4bc436e6a8b6b6bb715d088c25a2845 Mon Sep 17 00:00:00 2001 From: David Langley Date: Fri, 21 Feb 2025 11:27:57 +0000 Subject: [PATCH] Add padding to room header icon (#29271) * Add padding to room header icon * Add screenshot tests for room header icon * Add type to visibility import * Use visibility type * lint --- playwright/e2e/room/room-header.spec.ts | 10 ++++++++++ .../room-header-with-icon-linux.png | Bin 0 -> 5283 bytes res/css/views/rooms/_RoomHeader.pcss | 1 + 3 files changed, 11 insertions(+) create mode 100644 playwright/snapshots/room/room-header.spec.ts/room-header-with-icon-linux.png diff --git a/playwright/e2e/room/room-header.spec.ts b/playwright/e2e/room/room-header.spec.ts index 790d97545c..78e37cd4d2 100644 --- a/playwright/e2e/room/room-header.spec.ts +++ b/playwright/e2e/room/room-header.spec.ts @@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import { type Page } from "@playwright/test"; +import { type Visibility } from "matrix-js-sdk/src/matrix"; import { test, expect } from "../../element-web-test"; import { type ElementAppPage } from "../../pages/ElementAppPage"; @@ -85,6 +86,15 @@ test.describe("Room Header", () => { await expect(header).toMatchScreenshot("room-header-long-name.png"); }, ); + + test("should render room header icon correctly", { tag: "@screenshot" }, async ({ page, app, user }) => { + await app.client.createRoom({ name: "Test Room", visibility: "public" as Visibility }); + await app.viewRoomByName("Test Room"); + + const header = page.locator(".mx_RoomHeader"); + + await expect(header).toMatchScreenshot("room-header-with-icon.png"); + }); }); test.describe("with a video room", () => { diff --git a/playwright/snapshots/room/room-header.spec.ts/room-header-with-icon-linux.png b/playwright/snapshots/room/room-header.spec.ts/room-header-with-icon-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..471c26ccdbbd7644eba226495df82e4fa7e7daa3 GIT binary patch literal 5283 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 literal 0 HcmV?d00001 diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index ac2e419e0d..afde8f3464 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -59,6 +59,7 @@ Please see LICENSE files in the repository root for full details. .mx_RoomHeader_icon { flex-shrink: 0; + padding: var(--cpd-space-1x); } .mx_RoomHeader .mx_FacePile {