Onboarding form has double outlines

[CarolinaCobo]

Context

Please provide any relevant information about your setup

Expected Behavior

Please describe the behavior you are expecting

Current Behavior

Inputs have a double ring when selected

Expected behaviour:

## Current Behaviour:

When clicking a dropdown the ring is white, if navigated to using the keyboard it's blue

## Expected Behaviour:

• To match the rest of the input fields as seen in Catalyst

Steps to reproduce

Please provide detailed steps for reproducing the issue

1. Step 1
2. Step 2
3. etc

Additional info

Provide any additional information here

[github-actions]

Uh oh! @CarolinaCobo, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[John-Paul-Larkin]

Hey Carolina.
Specifically the username field?
className="rounded-l-none focus-within:after:rounded-l-none"
Is passed to the catalyst input to overwrite the default style. This was an attempt to make the input look better with the prefix. #1006

[CarolinaCobo]

It seems to be in all of them, it's just a bit more obvious in that one because the left hand side is not rounded, but if you look at them closely you'll see they have two rings now :)

[John-Paul-Larkin]

Hm....
Well I guess that must be the expected behaviour of the Catalyst library?
I did not alter any of the components, just copied them over.

[CarolinaCobo]

maybe? It might be worth checking all the styles in the input field in case something is being overwritten

…

On Mon, 23 Sept 2024 at 09:02, John Paul Larkin ***@***.***> wrote: Hm.... Well I guess that must be the expected behaviour of the Catalyst library? I did not alter any of the components, just copied them over. — Reply to this email directly, view it on GitHub <#1020 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AN527LVFG6GKPM3GGOEQQGLZX7DJ3AVCNFSM6AAAAABOU2GRDCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNRXGQ4DQMBQG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Carolina Cobo LinkedIn <http://linkedin.com/in/carolina-cobo/> | Github <http://github.com/CarolinaCobo> | Portfolio <https://carolinacobo.github.io/portfolio/>

[John-Paul-Larkin]

I had a look around and it seems this has been caused by the tailwind base layer for inputs in globals.css
These base layers are used as default styling for inputs and other elements around the Code base. If I remove these, it obviously affects the styles on other pages.
From a preliminary look, it seems possible to scope these styles, however, I think this is probably a bigger issue.
We should decide going forward if we were completely removed these tailwind directives, so we can base all our styling of the catalyst library. @NiallJoeMaher

[hrit2773]

@NiallJoeMaher can you assign this to me? I want to work on this

[John-Paul-Larkin]

@NiallJoeMaher can you assign this to me? I want to work on this

Hi @hrit2773 ,
This issue has already been dealt with in PR #1042
Sorry about that. Hopefully you can find another issue.