Replace Pill component with the Chakra Badge component

[pettinarip]

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

Currently we are using a custom component (Pill) to display a badge like component.

Since we are migrating over using Chakra components, we need to replace this custom component with the Chakra one.

Describe the solution you'd like

Badge component https://chakra-ui.com/docs/components/badge/usage

1. Identify all the different variants we have across the site
2. Create custom theme for the Badge component under https://github.com/ethereum/ethereum-org-website/tree/dev/src/%40chakra-ui/gatsby-plugin/components
3. Remove the custom Pill component
4. Replace all the uses of Pill with the Badge component

Describe alternatives you've considered

None.

Additional context

No response

[TylerAPfledderer]

I can work on this! A fun little project.

[pettinarip]

Nice @TylerAPfledderer assigning it to you. Please take into account this bug that is related #8550 to this (in order to implement the correct color scheme in the badge theming).

[TylerAPfledderer]

@pettinarip, correct. You got it! 👍

[TylerAPfledderer]

@pettinarip I notice that there are two styled pill components that do not use the Pill component, but are created in the ProductCard component and the StakingProductsCardGrid component.

Should I look to replace those or update them as well, even though the components they reside in have not been migrated yet? Most likely need to create a new child component within each given component to retain their logic.

[pettinarip]

Good catch @TylerAPfledderer.

If its possible yes, I would replace them since there is not going to be any conflict in using a Chakra component inside those components.

[TylerAPfledderer]

@pettinarip this will impact TutorialTags, which is incomplete under the first wave migration (#6374) and currently assigned. Can either...

• Complete most of this issue and wait until the component has been migrated, or...
• Finish this issue with a PR that is merged and does not include this component, and create another PR after merge. This will require leaving the Pill component in the project for now.

In addition, my continued observations show the StakingHierarchy component with a group of styled Pill-like elements, but the CSS selecting is a little more complex, as some of it is occurring at a section component. I will skip this and wait until this component is released into the second wave (and look to be assigned to it!)

[pettinarip]

Got it @TylerAPfledderer. I'm assigning TutorialTags to you since there is not much migration to do there apart from the Pill component & the assignee hasn't shown any activity yet.

[TylerAPfledderer]

@pettinarip understood. Thank you!

[TylerAPfledderer]

@pettinarip Created PR #8774 for this component.

[github-actions]

This issue is stale because it has been open 45 days with no activity.