Update right panel base card styling to match Compound (#12768)

* Update base card styling to match Compound

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

* Update screenshot

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

---------

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

playwright/e2e/crypto/crypto.spec.ts

@@ -227,7 +227,7 @@ test.describe("Cryptography", function () {
         await verify(page, bob);
 
         // Assert that verified icon is rendered
-        await page.getByRole("button", { name: "Room members" }).click();
+        await page.getByTestId("base-card-back-button").click();
         await page.locator(".mx_RightPanelTabs").getByText("Info").click();
         await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="success"]')).toContainText("Encrypted");
 

playwright/e2e/crypto/event-shields.spec.ts

@@ -132,7 +132,7 @@ test.describe("Cryptography", function () {
             // wait for the logout to propagate. Workaround for https://github.com/vector-im/element-web/issues/26263 by repeatedly closing and reopening Bob's user info.
             async function awaitOneDevice(iterations = 1) {
                 const rightPanel = page.locator(".mx_RightPanel");
-                await rightPanel.getByRole("button", { name: "Room members" }).click();
+                await rightPanel.getByTestId("base-card-back-button").click();
                 await rightPanel.getByText("Bob").click();
                 const sessionCountText = await rightPanel
                     .locator(".mx_UserInfo_devices")

playwright/e2e/read-receipts/index.ts

@@ -538,7 +538,7 @@ class Helpers {
         const threadPanel = this.page.locator(".mx_ThreadPanel");
         await expect(threadPanel).toBeVisible();
         await threadPanel.evaluate(($panel) => {
-            const $button = $panel.querySelector<HTMLElement>('.mx_BaseCard_back[aria-label="Threads"]');
+            const $button = $panel.querySelector<HTMLElement>('[data-testid="base-card-back-button"]');
             // If the Threads back button is present then click it - the
             // threads button can open either threads list or thread panel
             if ($button) {

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

@@ -106,7 +106,7 @@ test.describe("RightPanel", () => {
             await expect(page.locator(".mx_FilePanel")).toBeVisible();
             await expect(page.locator(".mx_FilePanel_empty")).toBeVisible();
 
-            await page.getByRole("button", { name: "Room information" }).click();
+            await page.getByTestId("base-card-back-button").click();
             await checkRoomSummaryCard(page, ROOM_NAME);
         });
 
@@ -120,7 +120,7 @@ test.describe("RightPanel", () => {
             await expect(page.locator(".mx_UserInfo")).toBeVisible();
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
 
-            await page.getByRole("button", { name: "Room members" }).click();
+            await page.getByTestId("base-card-back-button").click();
             await expect(page.locator(".mx_MemberList")).toBeVisible();
 
             await page.locator(".mx_RightPanelTabs").getByText("Info").click();
@@ -145,7 +145,7 @@ test.describe("RightPanel", () => {
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
             await expect(page.locator(".mx_SpaceScopeHeader").getByText(SPACE_NAME)).toBeVisible();
 
-            await page.getByRole("button", { name: "Back" }).click();
+            await page.getByTestId("base-card-back-button").click();
             await expect(page.locator(".mx_MemberList")).toBeVisible();
         });
     });

playwright/e2e/threads/threads.spec.ts

@@ -433,7 +433,7 @@ test.describe("Threads", () => {
         await textbox.press("Enter");
         await expect(locator.locator(".mx_EventTile_last").getByText("Hello Mr. User")).toBeAttached();
         // Close thread
-        await locator.getByRole("button", { name: "Close" }).click();
+        await locator.getByTestId("base-card-close-button").click();
 
         // Open existing thread
         locator = page
@@ -486,7 +486,7 @@ test.describe("Threads", () => {
             await textbox.press("Enter");
             await expect(threadPanel.locator(".mx_EventTile_last").getByText(threadMessage)).toBeVisible();
             // Close thread
-            await threadPanel.getByRole("button", { name: "Close" }).click();
+            await threadPanel.getByTestId("base-card-close-button").click();
         };
 
         await sendMessage("Hello Mr. Bot");
@@ -502,7 +502,7 @@ test.describe("Threads", () => {
         ).toBeVisible();
 
         // Open threads list
-        await page.locator(".mx_BaseCard_back").click();
+        await page.getByTestId("base-card-back-button").click();
         const rightPanel = page.locator(".mx_RightPanel");
         // Check that the threads are listed
         await expect(rightPanel.locator(".mx_EventTile").getByText("Hello Mr. User in a thread")).toBeVisible();