Apply new design and display logic to logout confirmation dialog (#33426)

* apply new design to logout dialog

* factor out check for other verified devices

* only show recovery warning when user has no other verified devices

* fix playwright tests

* tweak style to better match design

* another playwright test fix

* fix playwright

* Look for the remove button within the dialog

* Use testid to locate 'Remove this device' button

* move rendering to sub-components, rather than embedded functions

* use <Type> element

* use <Text> for the <a> element

---------

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>

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-top: var(--cpd-space-2x);
+            margin-bottom: var(--cpd-space-12x);
+            p {
+                margin: 0;
+            }
+        }
+    }
 }