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

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

In review

• ActionCard.tsx @yun-chiao Migrate ActionCard.tsx to tailwind #14244
• HorizontalCard.tsx @kushagrasarathe feat: migrate HorizontalCard to tailwind #14226
• Layer2ProductCard.tsx @kushagrasarathe feat: migrate Layer2ProductCard to tailwind and shadcn #14233
• ProductList.tsx @yashtotla migrate ProductList component to tailwind #14312
• Stat/index.tsx @bhushanpardeshii Migrated stat component to shadcn/tailwind #14321
• Trilemma/index.tsx - use ui/sheet to migrate the Drawer @atharv-av migrated trilemma modal to shadcn ui sheet component #14102
• TutorialMetadata.tsx - ignore Badge migration @bhushanpardeshii migrated TutorialMetadata.tsx to shadcn/tailwind #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) on next/image, hostname "avatars2.githubusercontent.com" is not configured under images in your next.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 Using could result in slower LCP and higher bandwidth. Consider usingfromnext/image to 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

[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

[pettinarip]

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

Done @bhushanpardeshii 🙌🏼 ty

[kushagrasarathe]

hey @pettinarip i've pushed 2 pr's, #14226 and #14233 for HorizontalCard and Layer2ProductCard components

[bhushanpardeshii]

would like to work on this TutorialMetadata.tsx.Please assign me.

[pettinarip]

would like to work on this TutorialMetadata.tsx.Please assign me.

Done @bhushanpardeshii!

[cqw-acq]

@pettinarip done! migration RollupProductDevDoc.tsx to tailwind #14268

[plvzfq-rit]

Hi! I would like to work on FileContributors.tsx. Please assign me. Thanks!

[yashtotla]

Hi @pettinarip I have opened a PR for migrating ProductList.
Can you assign Leaderboard.tsx to me next?

[pettinarip]

@plvzfq-rit done! and @yashtotla done! I'll review that PR soon. Assigned the other one 👍🏼