Border Radius on Authenticator

[dbanksdesign]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React, Angular, Vue

Which UI component?

Authenticator

How is your app built?

n/a

Please describe your bug.

Taken from this post in the discussions: https://github.com/aws-amplify/amplify-ui/discussions/198#discussioncomment-1955952

Customer cannot set the border radius of the authenticator, which can be previous done in v1 of the Authenticator. Based on the design and implementation of the new Authenticator, setting a border-radius on an element would not be sufficient because of the style of the sign in/sign up tabs.

What's the expected behaviour?

We should take a look at the Authenticator-specific styling and see if we can make it a bit more flexible and possible add some theme tokens specific to it for styling.

Help us reproduce the bug!

n/a

Code Snippet

No response

Additional information and screenshots

Trying to add a border-radius looks like this:

[Jesmaster]

Duplicate of #1133

[zchenwei]

I think #1164 should fix it :)

[reesscot]

@Jesmaster @zchenwei This issue is slightly different, as it's a feature request from a customer who wants to put a border radius around the entire Authenticator box, not just the Create Account button.

[zchenwei]

@Jesmaster @zchenwei This issue is slightly different, as it's a feature request from a customer who wants to put a border radius around the entire Authenticator box, not just the Create Account button.

I see

[reesscot]

Here's an example of adding border radius to the Authenticator: https://codesandbox.io/s/authenticator-border-radius-h11beg?file=/src/styles.css

[s5b]

Here's an example of adding border radius to the Authenticator: https://codesandbox.io/s/authenticator-border-radius-h11beg?file=/src/styles.css

This is a workable solution, thanks. Very much appreciated.

If Amplify change the markup of the authenticator as they do from time to time across versions, then it may break this unofficial fix, of course.