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/test/unit-tests/components/structures/MatrixChat-test.tsx

@@ -1192,13 +1192,18 @@ describe("<MatrixChat />", () => {
                     getVersion: jest.fn().mockReturnValue("Version 0"),
                     getVerificationRequestsToDeviceInProgress: jest.fn().mockReturnValue([]),
                     getUserDeviceInfo: jest.fn().mockReturnValue({
-                        get: jest
-                            .fn()
-                            .mockReturnValue(
-                                new Map([
-                                    ["devid", { dehydrated: false, getIdentityKey: jest.fn().mockReturnValue("k") }],
-                                ]),
-                            ),
+                        get: jest.fn().mockReturnValue(
+                            new Map([
+                                [
+                                    "devid",
+                                    {
+                                        deviceId: "devid",
+                                        dehydrated: false,
+                                        getIdentityKey: jest.fn().mockReturnValue("k"),
+                                    },
+                                ],
+                            ]),
+                        ),
                     }),
                     getUserVerificationStatus: jest
                         .fn()