Visual inconsistencies across buttons widths, font weights, casing

[ijxy]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

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:

1. the Sign In and Sign Up screens have bold text in their main button, but the Forgot Password screens don't

   • this looks to be a very easy fix, namely just removing fontweight="normal" from the two-button layout component

2. the 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

3. the Header text for the "Force New Password" and "Forgot Password" are inexplicably different sizes

   • these can be overridden (which is presumably what everyone does, because they're unthinkably bad), so not as problematic.

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) vs Create Account

This one is double frustrating because it is written Sign In everywhere else. The submit button is inexplicably different.

[esauerbo]

@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:

import { I18n } from 'aws-amplify/utils';
I18n.putVocabularies({
  en: {
    'Sign in': 'Sign In',
  },
});

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!

[ijxy]

@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:

import { I18n } from 'aws-amplify/utils';
I18n.putVocabularies({
  en: {
    'Sign in': 'Sign In',
  },
});

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 I18n module to overcome the casing inconsistencies. Hoping to see the styles fixed in an upcoming update!