-
Notifications
You must be signed in to change notification settings - Fork 253
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Visual inconsistencies across buttons widths, font weights, casing #5156
Comments
@jxdp thanks for creating this issue. Regarding the casing inconsistencies, you can customize the 'Sign in' text (or the labels and text of any component for that matter) using the I18n module. For your specific case that would look like this:
Changing the casing of the text is considered a breaking change, which we try to avoid introducing outside of major version bumps. We're continuing to look into the styling issues, but hope this helps! |
Thanks @esauerbo, I have been using the |
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: