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/test-utils/client.ts

@@ -160,6 +160,7 @@ export const mockClientMethodsCrypto = (): Partial<
     },
     getCrypto: jest.fn().mockReturnValue({
         getUserDeviceInfo: jest.fn(),
+        getDeviceVerificationStatus: jest.fn().mockResolvedValue(null),
         getCrossSigningStatus: jest.fn().mockResolvedValue({
             publicKeysOnDevice: true,
             privateKeysInSecretStorage: false,