Improve style of components in different themes

[Adam3371]

Why

In this Figma page in the "Final" section you can find design improvements for the components.

TODOS

Adjust component style for React and WebJS

• Change sub-headline to regular font weight
• Align the top error text+icon to the input field and button by adding the same vertical padding as for the rest of the component and resize the warning icon to 20x16px. (See Figma design)
  Ensure that the top error styling follows the rule for every error message of every length
• When opening the signup screen, set the cursor automatically to the uppest input field (same as for login)
• Adjust the style of the Email OTP without Email shortcut and Phone OTP according to the Figma.
• Adjust background of OTP input fields when full code is entered. (To discuss with adam) Figma

Light mode

• Change the input field border color to #D4D4D4
• Change the hover color of the button to #1953FF + opacity of 0.75
• Change the "or" separation text and line color to #000000 + opacity 0.75
• Change the disabled color to #DFDFE0
• Change the Icon color of email and phone and user (passkey error screen) to black.

Dark mode

• Change the input field border color to #848CA6
• Change text color to #A1A1A1 (except Title and subitle)
• Change the hover color of the button to #1953FF + opacity of 0.5
• Change the "or" separation text and line color to #ffffff + opacity 0.75
• Change the disabled color to #6F7486
• Change the Icon color of email and phone and user (passkey error screen) to white.
• Adjust the Top Error background color to #5B5B6B

Developer panel
Adjust hover color for email shortcuts according to Figma. (Color #525D83) => Moved to this ticket

[Adam3371]

Update

• "Space Grotesk" font-weight issue in react
• Button disabled color is not as shown in Figma (Lightmode #DFDFE0 Darkmode #6F7486)
• Change top error text color in light mode to color #4D5562
• In dark mode, primary (or secondary) color on every other screen is grey instead of white
• If possible, make the border of the input fields thinner
• Make "or" separation less heavy (clarify with Adam)
• In dark mode change text color inside the input field to white

[Adam3371]

Update

• In darkmode keep the color of the main text and the icons of all the other screens white (screenshot 1, if you need clarification ask adam).
• In white mode change the hover color of the social buttons and email shortcut button to RGB(245, 245, 245, 100)
• If no much time required, in darkmode change the country code color to white and in the dropdown change text and country code also to white

screenshot1

[Adam3371]

• In darkmode change the text of the identifier to fully white instead of grey. (It's not a problem if the identifier text in the passkey-append screen is also white)