Visual inconsistencies across buttons widths, font weights, casing #5156
Labels
Authenticator
An issue or a feature-request for an Authenticator UI Component
bug
Something isn't working
CSS
Bugs or features related to CSS
Before creating a new issue, please confirm:
On which framework/platform are you having an issue?
React
Which UI component?
Authenticator
How is your app built?
Next.js
What browsers are you seeing the problem on?
Chrome, Safari
Which region are you seeing the problem in?
No response
Please describe your bug.
Visual inconsistencies between the different screens. In particular:
the Sign In and Sign Up screens have bold text in their main button, but the Forgot Password screens don't
fontweight="normal"
from the two-button layout componentthe Sign In screen bottom button ("Forgot your password?") is not full-width, but the "Back to Sign In" and "Request another code" buttons on the Forgot Password screen are full width
the Header text for the "Force New Password" and "Forgot Password" are inexplicably different sizes
These are small things but they really do stand out in practice--the experience should not vary so much between screens.
Fortunately, these are very easily solvable.
What's the expected behaviour?
I would expect things like font weights, button widths, font sizes, etc. to be consistent. Visual consistency matters, and signing up is often one of the first experiences a customer has.
Help us reproduce the bug!
Couldn't be easier -- just look at it!
https://ui.docs.amplify.aws/react/connected-components/authenticator
Code Snippet
// Put your code below this line.
Console log output
No response
Additional information and screenshots
Different font weight in main buttons + Different width bottom buttons
Main button bold, Bottom button not full width
Main button not bold, Bottom button full width
Inconsistent casing
Sign in
(see above) vsCreate Account
This one is double frustrating because it is written Sign In everywhere else. The submit button is inexplicably different.
The text was updated successfully, but these errors were encountered: