Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Shadcn/Tailwind migration #13946

Open
45 tasks
pettinarip opened this issue Sep 24, 2024 · 71 comments · May be fixed by #14597
Open
45 tasks

Shadcn/Tailwind migration #13946

pettinarip opened this issue Sep 24, 2024 · 71 comments · May be fixed by #14597
Assignees
@pettinarip
Labels
epic 💪 This issue is an epic on our product roadmap good first issue Good item to try if you're new to contributing hacktoberfest Track hacktoberfest activity hacktoberfest-beginner GFI for hacktoberfest participants help wanted Extra attention is needed or someone is needed to help needs triage 📥 This issue needs triaged before being worked on

Comments

@pettinarip
Copy link
Member

pettinarip commented Sep 24, 2024 •
edited
Loading

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

List

In review

Pending

src/components

src/components/Staking

src/components/Staking

src/pages

  • wallets/find-wallet.tsx @ameeetgaikwad
  • wallets/index.tsx @ameeetgaikwad
  • gas.tsx @Baystef
  • roadmap/vision.tsx @bhushanpardeshii
  • staking/deposit-contract.tsx
  • staking/index.tsx
  • learn.tsx
  • community.tsx @Baystef
  • contributing/translation-program/contributors.tsx
  • contributing/translation-program/acknowledgements.tsx
  • developers/tutorials.tsx
  • developers/learning-tools.tsx
  • developers/index.tsx
  • developers/local-environment.tsx
  • bug-bounty.tsx
  • get-eth.tsx
  • dapps.tsx @Baystef
  • what-is-ethereum.tsx
  • index.tsx
  • quizzes.tsx
  • eth.tsx
  • assets.tsx
  • stablecoins.tsx @Baystef
  • [...slug].tsx
  • run-a-node.tsx
  • layer-2/learn.tsx @bhushanpardeshii
  • layer-2/index.tsx
  • layer-2/networks.tsx @bhushanpardeshii
@pettinarip pettinarip self-assigned this Sep 24, 2024
@github-actions github-actions bot added the needs triage 📥 This issue needs triaged before being worked on label Sep 24, 2024
@pettinarip pettinarip added epic 💪 This issue is an epic on our product roadmap and removed needs triage 📥 This issue needs triaged before being worked on labels Sep 24, 2024
@TylerAPfledderer
Copy link
Contributor

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

@pettinarip
Copy link
Member Author

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

@saurabhburade
Copy link
Contributor

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

@pettinarip
Copy link
Member Author

Assigned @saurabhburade 👍🏼

@minimalsm minimalsm added help wanted Extra attention is needed or someone is needed to help good first issue Good item to try if you're new to contributing labels Sep 25, 2024
This was referenced Sep 25, 2024
Merged
Merged
Merged
Merged
Merged
Merged
@Baystef
Copy link
Contributor

Baystef commented Sep 27, 2024

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

@pettinarip
Copy link
Member Author

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

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

@Baystef
Copy link
Contributor

Baystef commented Sep 27, 2024 •
edited
Loading

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
Copy link
Member Author

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

Baystef added a commit to Baystef/ethereum-org-website that referenced this issue Sep 27, 2024
@Baystef
refactor(shadcn migration): migrate contributors component to shadcn/…
14dd4c9 
…tailwind [ethereum#13946]
@Baystef Baystef mentioned this issue Sep 27, 2024
Merged
This was referenced Sep 27, 2024
Merged
Merged
@corwintines corwintines added the hacktoberfest Track hacktoberfest activity label Sep 30, 2024
@isabelladebrito isabelladebrito pinned this issue Sep 30, 2024
@saurabhburade saurabhburade mentioned this issue Oct 1, 2024
Merged
@yashtotla
Copy link
Contributor

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

@kushagrasarathe
Copy link
Contributor

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

@pettinarip
Copy link
Member Author

@yashtotla @kushagrasarathe thanks for helping! assigned, thanks

@bhushanpardeshii bhushanpardeshii mentioned this issue Nov 8, 2024
Merged
This was referenced Nov 21, 2024
Merged
Merged
Merged
@Sambit03
Copy link
Contributor

Review request @pettinarip
Translatathon/TranslationHubCallout.tsx #14412
Translatathon/StepByStepInstructions.tsx #14411
Translatathon/TranslatathonBanner.tsx #14410

@Nityam573
Copy link

Hi @pettinarip I am new to open source contribution please help me out and assign me a task

@ameeetgaikwad ameeetgaikwad mentioned this issue Dec 15, 2024
Merged
This was referenced Dec 24, 2024
Merged
Merged
@pettinarip pettinarip reopened this Dec 24, 2024
@github-actions github-actions bot added the needs triage 📥 This issue needs triaged before being worked on label Dec 24, 2024
This was referenced Dec 24, 2024
Open
Open
@pettinarip
Copy link
Member Author

Hi everyone!

FYI I've updated the list with the last things to migrate to tw & shadcn, and removed assignments for a few components that didn't get a PR.

Feel free to leave a comment if you want to work on any of them!

@ameeetgaikwad
Copy link
Contributor

ameeetgaikwad commented Dec 27, 2024 •
edited
Loading

wallets/find-wallet.tsx
wallets/index.tsx

@pettinarip

@plvzfq-rit
Copy link

Hi @pettinarip , sorry for the delay. I've just finished up FileContributors.tsx. Could I still open a pull request?

@pettinarip
Copy link
Member Author

@ameeetgaikwad assigned!

@plvzfq-rit sure! no worries. I added you back.

@plvzfq-rit plvzfq-rit mentioned this issue Dec 27, 2024
Open
@ashiskumar-1999
Copy link
Contributor

ashiskumar-1999 commented Dec 28, 2024 •
edited
Loading

Hi @pettinarip,
I can work on the remaining files of the Staking components.

@sahildotdev
Copy link

Hi @pettinarip, I wasn’t available earlier, so I couldn’t complete the task.I’m available now and would like to work on these files (BoxGrid.tsx, Callout.tsx, CallToContribute/index.tsx, CardList.tsx, and InfoBanner.tsx).

@Baystef
Copy link
Contributor

Baystef commented Dec 28, 2024

Hi everyone!

FYI I've updated the list with the last things to migrate to tw & shadcn, and removed assignments for a few components that didn't get a PR.

Feel free to leave a comment if you want to work on any of them!

Hi @pettinarip, Merry Christmas. I'll like to work on

  • stablecoins.tsx
  • gas.tsx
  • dapps.tsx
  • community.tsx

HiberNuts added a commit to HiberNuts/ethereum-org-website that referenced this issue Dec 29, 2024
@HiberNuts
Fix issue ethereum#13946
375e930 
Shifted 404.tsx page from chakra ui to shadcn/tailwind css
@HiberNuts HiberNuts mentioned this issue Dec 29, 2024
Open
@HiberNuts
Copy link

Hey @pettinarip
Review this PR
#14560
Migrated 404.tsx page to shadcn/tailwind

@plvzfq-rit
Copy link

Hi @pettinarip, happy new year+ could I have a go working on IssuesList/index.tsx, Staking/StakingGuides.tsx, and Leaderboard.tsx? For Leaderboard.tsx, would one also ignore Avatar migration, or would it now be done?

Thanks!

@pettinarip
Copy link
Member Author

pettinarip commented Dec 31, 2024 •
edited
Loading

Hi @pettinarip, happy new year+ could I have a go working on IssuesList/index.tsx, Staking/StakingGuides.tsx, and Leaderboard.tsx? For Leaderboard.tsx, would one also ignore Avatar migration, or would it now be done?

Thanks!

Assigning to you @plvzfq-rit. re: the avatar, correct, ignore it for now as we will do in a separate PR.

edit: Happy new year to you too!! 🍾

@plvzfq-rit plvzfq-rit mentioned this issue Jan 1, 2025
Draft
@bhushanpardeshii
Copy link
Contributor

bhushanpardeshii commented Jan 2, 2025 •
edited
Loading

layer-2/learn.tsx
layer-2/networks.tsx
roadmap/vision.tsx
assign me. @pettinarip

@ashiskumar-1999 ashiskumar-1999 linked a pull request Jan 3, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pettinarip pettinarip

Labels
epic 💪 This issue is an epic on our product roadmap good first issue Good item to try if you're new to contributing hacktoberfest Track hacktoberfest activity hacktoberfest-beginner GFI for hacktoberfest participants help wanted Extra attention is needed or someone is needed to help needs triage 📥 This issue needs triaged before being worked on
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: Migrate StakingComparison to Shadcn/Tailwind. ashiskumar-1999/ethereum-org-website