Settings -> Keycard / Keycard authentication: Styling and layout rules

[benjthayer]

At the request of @saledjenic I've taken at look at systemising the layout of the Keycard settings and authentication flows as there were quite a few inconsistencies in the design, typography and layout across these screens. In quite a few instances, the same dialogs in different flows were using different paddings and typography for the same aspects of the design which presented an opportunity for standardisation.

The deliverables of this effort are as follows:

1. Full audit of Keycard settings and Keycard authentication flows
2. Quick summary of issues found (mainly dialog content visibility issues at min app size and inconsistent typography and paddings)
3. Creation of new components to ensure similar content can be presented in a uniform way across dialogs / flows
4. Annotation of these components to make the design and layout patterns/rules clear
5. Creation of rules around dialog sizing (how the dialog adapts to content and resizing the app to it's min dimensions)
6. Creation of core dialog templates from these components for reference / re-use

Figma designs:
https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=20252-95458&mode=design&t=LPRA8UI4b1q06Mm4-4

Care has been taken not to alter the designs too much at this late stage - instead the focus has been on creating a system for making the current designs more uniform. (It should now be possible to create any of the existing Keycard Settings / authentication dialog in the various flows from these new components/templates).

These new components and component-based dialog templates have not yet been used to replace the existing Keycard Settings and Keycard authentication flows. This is something we can do when there is time and when we are happy with the changes. For now, the above audit, components, rules and templates can still be used as a reference point for development. If there is anything further required from design at this time do reach out! :)

cc @John-44 @saledjenic

[iurimatias]

moved to 2.29 due to lack of space in this milestone

[noeliaSD]

On me to analyse for the next milestone