Authorization overlay allows customers to create, reset, and log in to their customer account.

<aside> ℹ️ Usually, styling this element takes from-to: 3-5h

</aside>

Where this element can be seen?

This element can be seen on pages where the header has an Account button.

How should this element be designed?

Taking into consideration that authorization overlay has different forms, designs should represent the below-listed states:

• Default
• Inputs with value
• Inputs with an invalid value
• Loading state (e.g. customer is signing in)
• Hover for button
• Notification messages and other interactions

Design example #1

Design example #2

Issues with the design

• No password field

Login form

Register form

Forgot password form

How to develop styles for this element?

Theme the MyAccountOverlay component.

<aside> ➡️ Note that for overlays styles should be applied with the higher specification of selectors, since on instance styles possibly will not be applied.

</aside>

Implementation example #1