Shadcn/Tailwind migration

[pettinarip]

Description

As part of our Q3 roadmap, this issue tracks the progress of the Shadcn/Tailwind migration.

How to contribute

If you’d like to help with the component migration, please follow these steps:

1. Read the following “Tips & Guidance” section for basic things to keep in mind while doing the migration.
2. Leave a comment here asking which component you would like to work out.
3. We assign you to the file by adding your handle next to the file name in the list.
   • If you were assigned to multiple files then create a separate PR for each component. It will make the testing and review process much simpler and more organized.
4. Once you finish it (PR merged), we’ll mark it as done.
5. Repeat!

Tips & Guidance

• Migrate only the components defined in the component file.
• Replace all Chakra imports (unless there is an exception mentioned in this file) with native tags or shadcn components installed in components/ui
  • @chakra-ui/react/Icon ⇒ just use the exported svg component from react-icons instead <MdMenu className="text-2xl" />
• Replace other imports
  • OldText ⇒ use the native <p> tag
  • OldHeading ⇒ use native <h1>, <h2>, etc. tags
  • Link ⇒ use the Link component defined in components/ui/Link
  • Buttons ⇒ use the buttons defined in components/ui/buttons/Button
  • images ⇒ use TwImage from components/Image
• For layout and general component structure
  • Use the components in components/ui/flex as much as possible
• Colors
  • Define missing colors in the tailwind.config.ts file. At the review stage, we will analyze & try to replace old theme colors with new colors from the Design System.

Done

• [x] AssetDownload/index.tsx, AssetDownloadArtist.tsx and AssetDownloadImage.tsx @saurabhburade #13960
• [x] Banners/ContributorsQuizBanner.tsx @saurabhburade #13957
• [x] BeaconChainActions.tsx @saurabhburade #13990
• [x] BugBountyCards.tsx @saurabhburade #14000
• [x] Contributors.tsx @Baystef #13989
• [x] DataProductCard.tsx @Baystef #14035
• [x] DevconGrantsBanner.tsx @saurabhburade #14012
• [x] DeveloperDocsLinks.tsx @saurabhburade #14016
• [x] DocLink.tsx @saurabhburade #14036
• [x] DocsNav.tsx @saurabhburade #14039
• [x] EventCard.tsx @minimalsm - #13966
• [x] ExpandableCard.tsx @kushagrasarathe #14017
• [x] GitStars.tsx @Baystef #14073
• [x] GhostCard.tsx @kushagrasarathe #14045
• [x] History/NetworkUpgradeSummary.tsx @Baystef #14074
• [x] MatomoOptOut.tsx @minimalsm - #13961
• [x] ProductCard.tsx - ignore Badge migration @yashtotla #14018
• [x] Quiz/QuizItem.tsx - ignore Tag migration @TylerAPfledderer #13876
• [x] Quiz/QuizzesList.tsx @TylerAPfledderer #13876
• [x] Quiz/QuizzesStats.tsx @TylerAPfledderer #13876
• [x] Roadmap/RoadmapImageContent.tsx @Baystef #14089
• [x] RollupProductDevDoc.tsx @cqw-acq #14268
• [x] SocialListItem.tsx @yun-chiao #14167
• [x] StablecoinsTable.tsx @0xgun #14043
• [x] TitleCardList.tsx @minimalsm - #13963
• [x] Trilemma/Triangle.tsx @minimalsm - #13975
• [x] UpcomingEventsList.tsx @minimalsm - #13967
• [x] UpgradeTableOfContents.tsx @minimalsm - #13974
• [x] Staking/StakingStatsBox.tsx @Baystef #14104
• [x] Staking/StakingProductsCardGrid/index.tsx @Baystef #14091
• [x] Staking/StakingLaunchpadWidget.tsx @Baystef #14222
• [x] Staking/StakingCommunityCallout.tsx @Baystef #14223
• [x] Staking/WithdrawalsTabComparison.tsx @Baystef #14201
• [x] Translatathon/DatesAndTimeline.tsx @0xgun #14071
• [x] Translatathon/TranslatathonInANutshell.tsx @Sambit03 #14072
• [x] Translatathon/ApplyNow.tsx @0xgun #14046
• [x] Translatathon/TranslatathonCalendar.tsx @Sambit03 #14066
• [x] Translatathon/LocalCommunitiesList.tsx @0xgun #14065

In review

• [ ] ActionCard.tsx @yun-chiao #14244
• [ ] HorizontalCard.tsx @kushagrasarathe #14226
• [ ] Layer2ProductCard.tsx @kushagrasarathe #14233
• [ ] ProductList.tsx @yashtotla #14312
• [ ] Stat/index.tsx @bhushanpardeshii #14321
• [ ] Trilemma/index.tsx - use ui/sheet to migrate the Drawer @atharv-av #14102
• [ ] TutorialMetadata.tsx - ignore Badge migration @bhushanpardeshii #14335

Pending

src/components

• [ ] Callout.tsx @sahildotdev
• [ ] CallToContribute/index.tsx @sahildotdev
• [ ] CardList.tsx @sahildotdev
• [ ] FileContributors.tsx - ignore Avatar migration @plvzfq-rit
• [ ] Layer2/Layer2Onboard.tsx @atharv-av
• [ ] Leaderboard.tsx - ignore Avatar migration @yashtotla
• [ ] Roadmap/RoadmapActionCard/index.tsx @kushagrasarathe
• [ ] SideNavMobile.tsx @ashiskumar-1999
• [ ] SideNav.tsx @ashiskumar-1999
• [ ] StablecoinAccordion/AccordionCustomItem.tsx @Baystef
• [ ] StablecoinAccordion/index.tsx @Baystef
• [ ] StablecoinBoxGrid.tsx @Baystef
• [ ] TranslationBannerLegal.tsx @ameeetgaikwad
• [ ] TranslationBanner.tsx @ameeetgaikwad
• [ ] TranslationLeaderboard.tsx @ameeetgaikwad

src/components/Staking

• [ ] Staking/StakingGuides.tsx @husna3249
• [ ] Staking/StakingHowSoloWorks.tsx @Baystef

src/components/Translatathon

• [ ] Translatathon/TranslationHubCallout.tsx @Sambit03
• [ ] Translatathon/TranslatathonBanner.tsx @Sambit03
• [ ] Translatathon/StepByStepInstructions.tsx @Sambit03

[TylerAPfledderer]

@pettinarip I'm currently handling all of the Quiz components

[pettinarip]

@TylerAPfledderer gotcha! added your name next to them, ty.

[saurabhburade]

@pettinarip Please assign me the Banners/ContributorsQuizBanner.tsx component.

[pettinarip]

Assigned @saurabhburade 👍🏼

[Baystef]

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

[pettinarip]

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

Yey! awesome, assigned! let me know if you need any clarification or help 💪🏼

[Baystef]

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

Yey! awesome, assigned! let me know if you need any clarification or help 💪🏼

TwImage is not working with remote URLs , getting this error cos its using next/image under the hood Error: Invalid src prop (https://avatars2.githubusercontent.com/u/364566?v=4) onnext/image, hostname "avatars2.githubusercontent.com" is not configured under images in yournext.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

should I add avatars2.githubusercontent.com to next.config.js or use the bare img element, this also shows a warning Usingcould result in slower LCP and higher bandwidth. Consider usingfromnext/imageto automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element but it works @pettinarip

[pettinarip]

Right @Baystef lets use the img tag for now. You can leave the warning.

[yashtotla]

Hi @pettinarip can you assign the ProductCard.tsx migration to me? Thanks!

[kushagrasarathe]

hey @pettinarip could you please assign ExpandableCard.tsx's migration to me. Thanks

[pettinarip]

@yashtotla @kushagrasarathe thanks for helping! assigned, thanks

[kushagrasarathe]

hey @pettinarip have made a pr for ExpandableCard.tsx, meanwhile can you assign me these remaining card components please:

• GhostCard
• HorizontalCard
• Layer2ProductCard
• RoadmapActionCard

Thanks 🙌

[pettinarip]

Assigned @kushagrasarathe and @saurabhburade!

Quick reminder: create a separate PR for each component please. Thank you guys!

[ashiskumar-1999]

Hi @pettinarip , I can work on these files. Please assign me.

• SideNavMobile.tsx
• SideNav.tsx

[sahildotdev]

Hi @pettinarip ,

I would like to work on these files , could you please assign me.

• Cardlist.ts
• Callout.tsx
• CallToContribute/index.tsx

[Baystef]

@pettinarip please assign GitStars and History/NetworkUpgradeSummary.tsx to me. Thanks

[pettinarip]

I've updated the list @ashiskumar-1999 @sahildotdev @Baystef ✌🏼

[0xgun]

Hi @pettinarip can you assign the StablecoinsTable.tsx migration to me? Thanks

[yashtotla]

@pettinarip can you assign the ProductList.tsx migration to me?

[pettinarip]

@0xgun assigned! 💪🏼 For this one,lets use the shadcn table component.

[pettinarip]

@pettinarip can you assign the ProductList.tsx migration to me?

Done! thanks @yashtotla

[saurabhburade]

@pettinarip Please assign me DocLink &DocsNav.

[pettinarip]

FYI added more components to migrate from the /Staking and /Translatathon folders.

[0xgun]

@pettinarip please assignTranslatathon/ApplyNow.tsx LocalCommunitiesList and DatesAndTimeline components to me. Thanks

[Sambit03]

hey @pettinarip like to work on those file. Can you please assign

• Translatathon/TranslatathonInANutshell.tsx

• Translatathon/TranslatathonCalendar.tsx

• Translatathon/TranslationHubCallout.tsx

• Translatathon/TranslatathonBanner.tsx

• Translatathon/StepByStepInstructions.tsx

[pettinarip]

Assigned @Sambit03. Thanks, let me know if you have any questions.

[Sambit03]

Assigned @Sambit03. Thanks, let me know if you have any questions.

https://github.com/ethereum/ethereum-org-website/pull/14066

[Baystef]

@pettinarip please assign

• Roadmap/RoadmapImageContent
• Staking/StakingHowSoloWorks
• Staking/StakingProductsCardGrid/index.tsx
• Staking/StakingStatsBox
• Staking/StakingCommunityCallout
• Staking/StakingLaunchpadWidget
• Staking/StakingGuides
• Staking/WithdrawalsTabComparison

to me

[atharv-av]

hey @pettinarip
please assign Trilemma/index.tsx component to me.

[pettinarip]

@Baystef I've assigned you the first 4 for now, just to give others a chance to join in the meantime. Once you are done with them, I can assign the rest if no one else has requested them.

• Roadmap/RoadmapImageContent
• Staking/StakingHowSoloWorks
• Staking/StakingProductsCardGrid/index.tsx
• Staking/StakingStatsBox

Thanks!

[pettinarip]

Assigned @atharv-av!

[husna3249]

Hey @pettinarip pls assign Staking/StakingGuides.tsx to me

[pettinarip]

Hey @pettinarip pls assign Staking/StakingGuides.tsx to me

Done! is yours, thanks for helping 🚀 Let us know if you need help.

[atharv-av]

hello @pettinarip please assign Layer2/Layer2Onboard.tsx to me

[Baystef]

@Baystef I've assigned you the first 4 for now, just to give others a chance to join in the meantime. Once you are done with them, I can assign the rest if no one else has requested them.

• Roadmap/RoadmapImageContent
• Staking/StakingHowSoloWorks
• Staking/StakingProductsCardGrid/index.tsx
• Staking/StakingStatsBox

Thanks!

PR up for the 4

[pettinarip]

Assigned @atharv-av!

[pettinarip]

@Baystef I've assigned you the first 4 for now, just to give others a chance to join in the meantime. Once you are done with them, I can assign the rest if no one else has requested them.

• Roadmap/RoadmapImageContent
• Staking/StakingHowSoloWorks
• Staking/StakingProductsCardGrid/index.tsx
• Staking/StakingStatsBox

Thanks!

PR up for the 4

Wow, that was fast, thanks @Baystef. I'll check those PRs soon.

In the meantime, I've assigned the other components you requested before.

• Staking/WithdrawalsTabComparison.tsx
• Staking/StakingLaunchpadWidget.tsx
• Staking/StakingCommunityCallout.tsx

[atharv-av]

Assigned @atharv-av!

Please check the PR.

[yun-chiao]

Hi @pettinarip, please assign SocialListItem.tsx to me, thanks.

[pettinarip]

Done @yun-chiao! thanks!

[yun-chiao]

Hi @pettinarip , please assign ActionCard.tsx to me, thanks!

[Baystef]

@Baystef I've assigned you the first 4 for now, just to give others a chance to join in the meantime. Once you are done with them, I can assign the rest if no one else has requested them.

• Roadmap/RoadmapImageContent
• Staking/StakingHowSoloWorks
• Staking/StakingProductsCardGrid/index.tsx
• Staking/StakingStatsBox

Thanks!

PR up for the 4

Wow, that was fast, thanks @Baystef. I'll check those PRs soon.

In the meantime, I've assigned the other components you requested before.

• Staking/WithdrawalsTabComparison.tsx
• Staking/StakingLaunchpadWidget.tsx
• Staking/StakingCommunityCallout.tsx

@pettinarip, when OldText is removed and replaced with a normal p tag, the global styles of OldText gets lost obviously.

    margin-bottom: 1.45rem;
    line-height: 1.6rem;

So my question is should I add a global p tag style with the exact style OldText was using or add the tailwind style on individual p tags or should I leave it squashed as is and you guys will handle it globally?

[ameeetgaikwad]

@pettinarip

Would like to work on TranslationBannerLegal.tsx, TranslationBanner.tsx, TranslationLeaderboard.tsx

Please assign.

[pettinarip]

@pettinarip, when OldText is removed and replaced with a normal p tag, the global styles of OldText gets lost obviously.

    margin-bottom: 1.45rem;
    line-height: 1.6rem;

So my question is should I add a global p tag style with the exact style OldText was using or add the tailwind style on individual p tags or should I leave it squashed as is and you guys will handle it globally?

@Baystef to simplify the migration, we try to match production as much as possible. For now, we won't set a global style for the paragraph as we don't have much consistency in them. What I would suggest is that you try to control the spacing from the parent using gap. If not, you could set the margin on each paragraph.

Another thing I would like to see if possible is the usage one of the tw sizes/scale, instead of the custom 1.45rem, feel free to use mb-6 (1.5rem) or whatever works best in this case.

[pettinarip]

@pettinarip

Would like to work on TranslationBannerLegal.tsx, TranslationBanner.tsx, TranslationLeaderboard.tsx

Please assign.

Hi @ameeetgaikwad 👋🏼 happy to see you around!

I've assigned those to you. Ty

[Baystef]

Please assign these to me @pettinarip

• StablecoinAccordion/AccordionCustomItem.tsx
• StablecoinAccordion/index.tsx
• StablecoinBoxGrid.tsx

[pettinarip]

@Baystef assigned. Will review those new PRs soon, thanks!

[cqw-acq]

@pettinarip hey！ i want to work on "RollupProductDevDoc.tsx"

[pettinarip]

Its yours! @cqw-acq thanks. Let us know if you need help.

[bhushanpardeshii]

Hey @pettinarip can you assign me stat/index.tsx