Apply new design and display logic to logout confirmation dialog

[uhoreg]

Part of element-hq/element-meta#2834

Applies the new design to the dialog that prompts the user to set up recovery when they try to log out.

Also applies new logic for determining when to show the prompt:

• only shows if this is the user's last device
• shows even if the user is not in any encrypted rooms (since the user will need the recovery key to confirm their identity)

I've also taking this opportunity to switch to a functional component, and move the non-display code into hooks.

This PR does not implement allowing the user to get their recovery key in-line (it just brings them to the settings dialog).

Checklist

• I have read through review guidelines and CONTRIBUTING.md.
• Tests written for new code (and old code if feasible).
• New or updated public/exported symbols have accurate TSDoc documentation.
• Linter and other CI checks pass.
• I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

[t3chguy]

Spacing between heading and text looks wrong compared to Figma