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/dialogs/security/SetupEncryptionDialog-test.tsx

@@ -79,10 +79,12 @@ function mockClient() {
     } as unknown as Mocked<CryptoApi>;
 
     const userId = "@user:server";
+    const deviceId = "ADEVICE";
 
     getMockClientWithEventEmitter({
         getCrypto: jest.fn().mockReturnValue(mockCrypto),
         getUserId: jest.fn().mockReturnValue(userId),
+        getDeviceId: jest.fn().mockReturnValue(deviceId),
         secretStorage: { isStored: jest.fn().mockReturnValue({}) },
     });
 }