ChakraUI: Migrate FileContributors.tsx [#8636]

[SyedAhkam]

Migrated FileContributors.tsx to Chakra UI

Description

Contributing to the UI Library Epic: #6374

I have migrated many components that made up the FileContributors Component.

• Migrated Modal component in Modal.tsx
• Built Contributor and ContributorList components using chakra primitives.
• Re-implemented the Skeleton components using components from chakra.
• Removed unnecessary components like Container, SkeletonButtonContainer, and ButtonContent and replaced them with simple Flex widgets.
• Migrated from old Icon component to new chakra based Icon
• Centered Modal vertically, unlike the previous implementation.

The results wielded might seem slightly inconsistent, but I left them intentionally because it seemed better that way.

Related Issue

Solves #8636

[gatsby-cloud]

✅ ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 27m build time

[pettinarip]

Thanks @SyedAhkam great work here. I liked the direction you took on adjusting the Modal to use the chakra modal.

I've only added a few changes:

• conventions like p="2" => p={2} or p="1rem" => p={4}
• removed some abstractions that were not totally necessary
• cleanup some styles that were not necessary in a few components

I'll finish testing it soon but in general I think this is ready to be approved.

[SyedAhkam]

Thanks!

Ahh I'm not that familiar with ChakraUI so I'm not aware of all the prop conventions yet. I'll surely look into it.

I totally understand how you feel about unnecessary abstractions, I got a bit carried away trying to provide a 1:1 migration to the old codebase and that left me with components like ContributorButton and LeftContent. I'll keep this in mind while contributing back again.

I'm glad that you liked my implementation :)

[pettinarip]

[gitpoap-bot]

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

Be sure to join the Ethereum.org discord if you are interested in contributing further to the project or have any questions for the team.

GitPOAP: 2023 Ethereum.org Contributor:

Head to gitpoap.io & connect your GitHub account to mint!

Learn more about GitPOAPs here.