Migrate SocialListItem.tsx to tailwind

[yun-chiao]

Description

This PR updates the SocialListItem.

• Replace components of @chakra-ui/react.
• Migrate css to tailwind.

Note

Tailwind cannot dynamically handle text-[${socialColors[socialIcon]}], so I used inline style={{ color: socialColors[socialIcon] }} as an alternative.

For more details on this issue, you can refer to the discussion here: JIT TailwindCSS: Using Variable in bg-* Not Rendering Color.

Related Issue

#13946

Screenshot

localhost

ethereum.org

[netlify[bot]]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	5e4dbcdf9e4989349477e8015a1d8021e2fef8f2
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/670fa16e8ec0f3000848dd93
😎 Deploy Preview	https://deploy-preview-14167--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 51 (🔴 down 2 from production) Accessibility: 93 (no change from production) Best Practices: 89 (🔴 down 9 from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[yun-chiao]

Hi @pettinarip ,

I've noticed that the Netlify deploy preview for my PR is failing. I'm wondering if this issue is something I should be responsible for fixing, or if it's related to a broader issue that will be resolved elsewhere before merging this PR?

Please let me know how I should proceed. Thanks!

[pettinarip]

Hi @pettinarip ,

I've noticed that the Netlify deploy preview for my PR is failing. I'm wondering if this issue is something I should be responsible for fixing, or if it's related to a broader issue that will be resolved elsewhere before merging this PR?

Please let me know how I should proceed. Thanks!

Hey, no, its not related to your PR. Sorry about that.

We are currently fixing the issue. As soon as it's fixed, I'll trigger this PR again to get a proper build.

[gitpoap-bot[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: 2024 Ethereum.org Contributor:

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

Learn more about GitPOAPs here.