Migrate ActionCard.tsx to tailwind

[yun-chiao]

Description

• Wrapped the ActionCard inside CentralActionCard in eth.tsx with a Box to ensure parameters like sx are correctly passed down.
• Migrated className to Tailwind CSS.
• Replaced all components and types from @chakra-ui/react.

Note

I did not replace useColorModeValue with the useColorModeValue from @/hooks/useColorModeValue because I encountered some strange issues.

For example:

const descriptionColor = useColorModeValue(
  "lightmode",
  "darkmode"
)

When using descriptionColor as a className:

<p className={`${descriptionColor}`}></p>

On the first render, it always gets "darkmode" in className, but when I console.log(descriptionColor), it consistently returns "lightmode" from the first print.

After doing some debugging inside @/hooks/useColorModeValue, I suspect it is related to the theme being null on the initial render, which causes the conditional check to fail and return "darkmode". However, I am unsure why console.log(descriptionColor) which would be "lightmode" and the actual descriptionColor applied to the CSS behave inconsistently.

Snapshoot

localhost

https://ethereum.org/

Related Issue

#13946

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	b0faf55
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/67306695e4e35f000813e186
😎 Deploy Preview	https://deploy-preview-14244--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 44 (🔴 down 12 from production) Accessibility: 92 (no change from production) Best Practices: 89 (🔴 down 9 from production) SEO: 99 (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.

[pettinarip]

@yun-chiao thanks for the PR. Left a reply about useColorModeValue. LMK what do you think

[yun-chiao]

useColorModeValue

Hi @pettinarip ,

I've updated this PR, and here’s some information about the issue with useColorModeValue. Thanks!

Description

I found an example that has been merged and is using useColorModeValue: <EthVideo>. When I'm in light mode and reload the page, the first render applies the dark mode setting instead of the light mode, as shown in the attached image. However, it behaves correctly when switching between modes.

Debugging

If I add the following to useColorModeValue:

if (resolvedTheme == null) {
  return "null_theme";
}

I then get "null_theme" in src={src}, but if I console.log related information in , it returns the light mode variable as expected, e.g., "/images/ethereum-hero-light.mp4", with no trace of "null_theme" in the console. I find this behavior odd, as the displayed result in HTML and CSS differs from the variable output.

Thank you!

Attachment

Snapshoot for <EthVideo>.
It should get the src = "/images/ethereum-hero-light.mp4" in the light mode.