Apply new design and display logic to logout confirmation dialog

apps/web/playwright/e2e/crypto/logout.spec.ts

@@ -30,7 +30,7 @@ test.describe("Logout tests", () => {
         const currentDialogLocator = page.locator(".mx_Dialog");
 
         await expect(
-            currentDialogLocator.getByRole("heading", { name: "You'll lose access to your encrypted messages" }),
+            currentDialogLocator.getByRole("heading", { name: "You're about to lose access to your encrypted chats" }),
         ).toBeVisible();
     });
 
@@ -51,7 +51,7 @@ test.describe("Logout tests", () => {
         await expect(currentDialogLocator.getByText("Are you sure you want to Remove this device?")).toBeVisible();
     });
 
-    test("Logout directly if the user has no room keys", async ({ page, app }) => {
+    test("Ask to set up recovery on logout even if not in encrypted room", async ({ page, app }) => {
         await createRoom(page, "Clear room", false);
 
         await sendMessageInCurrentRoom(page, "Hello public world!");
@@ -60,7 +60,10 @@ test.describe("Logout tests", () => {
         await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
         await page.getByRole("button", { name: "Remove this device", exact: true }).click();
 
-        // Should have logged out directly
-        await expect(page.getByRole("heading", { name: "Be in your element" })).toBeVisible();
+        const currentDialogLocator = page.locator(".mx_Dialog");
+
+        await expect(
+            currentDialogLocator.getByRole("heading", { name: "You're about to lose access to your encrypted chats" }),
+        ).toBeVisible();
     });
 });

apps/web/playwright/e2e/crypto/utils.ts

@@ -248,15 +248,15 @@ export async function logIntoElementAndVerify(page: Page, credentials: Credentia
  * Click the "sign out" option in Element, and wait for the welcome page to load
  *
  * @param page - Playwright `Page` object.
- * @param discardKeys - if true, expect a "You'll lose access to your encrypted messages" dialog, and dismiss it.
+ * @param discardKeys - if true, expect a "You're about to lose access to your encrypted chats" dialog, and dismiss it.
  */
 export async function logOutOfElement(page: Page, discardKeys: boolean = false) {
     await page.getByRole("button", { name: "User menu" }).click();
 
     await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
     await page.getByRole("button", { name: "Remove this device" }).click();
     if (discardKeys) {
-        await page.getByRole("button", { name: "I don't want my encrypted messages" }).click();
+        await page.getByRole("button", { name: "Remove this device anyway" }).click();
     } else {
         await page.locator(".mx_Dialog .mx_QuestionDialog").getByRole("button", { name: "Remove this device" }).click();
     }

apps/web/playwright/e2e/login/login-consent.spec.ts

@@ -342,6 +342,7 @@ test.describe("Login", () => {
             await page.waitForTimeout(2000);
             await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
             await page.getByRole("button", { name: "Remove this device" }).click();
+            await page.getByRole("button", { name: "Remove this device anyway" }).click();
             await expect(page).toHaveURL(/\/#\/welcome$/);
         });
     });

apps/web/playwright/e2e/login/logout_redirect_url.spec.ts

@@ -30,6 +30,7 @@ test.describe("logout with logout_redirect_url", () => {
         await page.waitForTimeout(2000);
         await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
         await page.getByRole("button", { name: "Remove this device" }).click();
+        await page.getByRole("button", { name: "Remove this device anyway" }).click();
 
         await expect(page).toHaveURL(/\/decoder-ring\/$/);
     });

apps/web/playwright/e2e/oidc/oidc-native.spec.ts

@@ -76,6 +76,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         const locator = await app.settings.openUserMenu();
         await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
         await page.getByRole("button", { name: "Remove this device", exact: true }).click();
+        await page.getByRole("button", { name: "Remove this device anyway" }).click();
         await revokeAccessTokenPromise;
         await revokeRefreshTokenPromise;
     });
@@ -125,6 +126,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await page.waitForTimeout(2000);
         await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
         await page.getByRole("button", { name: "Remove this device" }).click();
+        await page.getByRole("button", { name: "Remove this device anyway" }).click();
         await expect(page).toHaveURL(/\/#\/welcome$/);
 
         // Log in again
@@ -159,6 +161,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await page.waitForTimeout(2000);
             await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
             await page.getByRole("button", { name: "Remove this device" }).click();
+            await page.getByRole("button", { name: "Remove this device anyway" }).click();
             await expect(page).toHaveURL(/\/#\/welcome$/);
 
             // Log in again
@@ -210,6 +213,10 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
                     .getByRole("menuitem", { name: "All settings" })
                     .click();
                 await page.getByRole("button", { name: "Remove this device" }).click();
+                // Since we have another device, it only shows a normal logout
+                // confirmation dialog, rather than prompting the user to set up
+                // recovery.
+                await page.getByRole("button", { name: "Remove this device" }).click();
                 await expect(page).toHaveURL(/\/#\/welcome$/);
 
                 // Log in again

apps/web/res/css/views/dialogs/_LogoutDialog.pcss

@@ -6,6 +6,22 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_LogoutDialog_ExportKeyAdvanced {
-    width: fit-content;
+.mx_LogoutDialog {
+    width: 26rem;
+
+    .mx_EncryptionCard {
+        gap: 0;
+        h2 {
+            text-align: center;
+            color: var(--cpd-color-text-primary);
+        }
+        .mx_EncryptionCard_emphasisedContent {
+            text-align: center;
+            margin-bottom: var(--cpd-space-12x);
+            p {
+                margin-top: var(--cpd-space-2x);
+                margin-bottom: 0;
+            }
+        }
+    }
 }