Refined WebAuthn UI

[adamwoodnz]

Closes #194

Changes

Styles Security Keys screens to match design

NOTE: The animation has not been included at this stage. See #194 (comment)

List	Register	Disable

Adds Primary label on account settings screen, and updates disabled icons to better match design

Primary	Disabled

Consistent screen spacing

Part of the refinement includes making the space around the screen intro text consistent across all screens.

TOTP	Email	Password

Testing

Checkout this branch in your sandbox.

Either do a dev build of settings with NODE_ENV=development wp-scripts build --webpack-copy-php, or a prod build and remove the dev flag.

Check spacings in screens; there should be 40px margin around intro text and again around the action buttons.

Test registering and deleting security keys and check layout against designs.

Once Security Keys has been enabled, try disabling. You'll see an error message after the modal closes as the Two Factor Core code is not in place yet.

Check the screen list on the account status screen for badges and icons matching the state of 2FA providers

[renintw]

Have each scenario tested, the design and the code both look good to me! 👍
Only that in the design the delete key button in the security key section doesn't have an underline, but it has one here.
I remember not having an underline might go against a11y practices, though.

[iandunn]

LGTM 👍🏻