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/views/settings/UserProfileSettings-test.tsx

@@ -18,7 +18,6 @@ import { mkStubRoom, stubClient } from "../../../../test-utils";
 import { ToastContext, type ToastRack } from "../../../../../src/contexts/ToastContext";
 import { OwnProfileStore } from "../../../../../src/stores/OwnProfileStore";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import dis from "../../../../../src/dispatcher/dispatcher";
 import Modal from "../../../../../src/Modal";
 
 interface MockedAvatarSettingProps {
@@ -218,13 +217,15 @@ describe("ProfileSettings", () => {
         expect(await screen.findByText("Mocked EditInPlace: Alice")).toBeInTheDocument();
     });
 
-    it("signs out directly if no rooms are encrypted", async () => {
+    it("displays confirmation dialog if no rooms are encrypted", async () => {
+        jest.spyOn(Modal, "createDialog");
+
         renderProfileSettings(toastRack, client);
 
         const signOutButton = await screen.findByText("Remove this device");
         await userEvent.click(signOutButton);
 
-        expect(dis.dispatch).toHaveBeenCalledWith({ action: "logout" });
+        expect(Modal.createDialog).toHaveBeenCalled();
     });
 
     it("displays confirmation dialog if rooms are encrypted", async () => {
@@ -234,6 +235,7 @@ describe("ProfileSettings", () => {
         client.getRooms = jest.fn().mockReturnValue([mockRoom]);
         client.getCrypto = jest.fn().mockReturnValue({
             isEncryptionEnabledInRoom: jest.fn().mockReturnValue(true),
+            getUserDeviceInfo: jest.fn().mockResolvedValue(new Map()),
         });
 
         renderProfileSettings(toastRack, client);