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", but when I console.log(descriptionColor), it consistently returns "lightmode".

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 failed.

Name	Link
🔨 Latest commit	35163fb
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/671bedcc9099890008c6b9fd