[Feature] Restyle form fields to match new designs

[magnificode]

User Story

As a user I want to see well designed form fields with solid UX So I can easily provide the proper information for my business

Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=1938%3A8027

Acceptance Criteria

• [ ] various input field types should match the designs provided below
• [ ] field types that do not have specific type attributes associated with them should leverage class names to target and style the input field.

Is your feature request related to a problem? Please describe.

N/a

Describe the solution you'd like

Leveraging Chakra UI components and the InputLeftElement, form fields across the site should match these new designs.

[tinyherocarrot]

@magnificode Hi new contributor here! I'd be happy to tackle this feature

[magnificode]

@tinyherocarrot excellent! Thank you so much for stepping in! If you have any questions or concerns at all, please don't hesitate to reach out :)

[magnificode]

Hey @tinyherocarrot - wanted to check in here and see if there was anything I could do to help, or if there were any questions about the task!

[tinyherocarrot]

hi @magnificode! havent done development on my local machine for some time so had to work through some Node install issues. getting started today

[tinyherocarrot]

@magnificode want to make sure I have the right idea before I dive into an approach.

1. I think this change could be implemented either through through a global stylesheet, or referencing properties from /src/gatsby-plugin-chakra-ui/theme.js. Which is a more acceptable method?

2. Can you please provide the specifications for the restyle (ie. colors and border width)? It's hard to tell in the image provided.

[magnificode]

@tinyherocarrot - 100% my fault for letting this slip through the cracks. Very very sorry for such a long delay in the response here.

I don't have issue with the approach you mention in 1. above. If setting global styles for form fields makes more sense we can certainly go that route. My assumption was that we could create "Styled" components that extends Chakra UI components with our custom style. If that is an inefficient route I am all for a more streamlined approach.

As for 2, you should be able to get all of those details from the Figma link in the issue description!

If too much time has gone by, please let me know and we'll get this task into another volunteer's hands. My apologies again for the lack of communication.

[tinyherocarrot]

@magnificode likewise, sorry for letting this drag on. I've made good progress and have restyled: Input (of varying types), Select (or dropdown).

Restyling the Checkboxes and Radio components will be more challenging, because Chakra doesn't have an easy way to replace the shape shown in the "selected" case, so I will have to write custom Checkbox & Radio components.

And one more question about the input with a dropdown to the left, where can I find an example of this in the code? What's this component called, and what's the use case?

[tinyherocarrot]

Another question, should I restyle the form fields used in other places besides in src/components/Forms? Eg. the form fields in src/components/Filters?

[magnificode]

@tinyherocarrot appreciate the response! And thanks for the progress you've made so far, it's very helpful :)

There's a couple paths we can take here. We can certainly work with what we have in Chakra, and get as close as possible, and then iterate on this in the future. I'd have no problem with that at all. The goal here is just to start getting these form elements standardized across the site. Which leads to your second question, certainly we should leverage your newly styled form fields everywhere on the site to get closer to standardizing across the site.

Otherwise, if you're inclined to create fully custom components, I will not object! However, I may suggest, for the sake of progress, leveraging what we can in Chakra, and iterating on the styles in the future.

Thank you very much again!