search

aws-amplify / amplify-ui

Amplify UI is a collection of accessible, themeable, performant React (and more!) components that can connect directly to the cloud.
https://ui.docs.amplify.aws
Apache License 2.0
826 stars 271 forks source link

Border Radius on Authenticator #1170

Open dbanksdesign opened 2 years ago

dbanksdesign commented 2 years ago

Before creating a new issue, please confirm:

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:

CleanShot 2022-01-19 at 15 57 34@2x
Jesmaster commented 2 years ago

Duplicate of #1133

zchenwei commented 2 years ago

I think #1164 should fix it :)

reesscot commented 2 years ago

@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 commented 2 years ago

@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 commented 1 year ago

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

s5b commented 7 months ago

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.