Deprecate InfoBanner, migrate usage to ui/alert components

[wackerow]

Description

• Updates ui/alert with modifications to theming per latest design system
• Adds AlertEmoji to ui/alert, with default styling matching the old Emoji portion of the InfoBanner component
• Migrates usage of InfoBanner to use Alert component structure instead.
• Updates EnvWarningBanner to use ui/alert. A few markdown pages had the manual addition of effectively the same component as the EnvWarningBanner component, so this was removed and replaced with the component (now included in MdComponents).

Related Issue

shadcn migration and theming updates

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	98bbe6d
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66fd78b41881ed0008a29b8f
😎 Deploy Preview	https://deploy-preview-13986--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 51 (🟢 up 5 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.

[wackerow]

Switching to "Ready for review" to get eyes 👀 on this, but leaving as "Work In Progress" for at least a few days while we comb through this... touches hundreds of files, so let's make sure we've done plenty of QA checking on this.

[nloureiro]

Should the alert have some default margins to prevent this from happening?

[nloureiro]

another broken ones
https://deploy-preview-13986--ethereumorg.netlify.app/en/developers/tutorials/hello-world-smart-contract/
https://deploy-preview-13986--ethereumorg.netlify.app/en/developers/tutorials/sending-transactions-using-web3-and-alchemy/

[nloureiro]

center alignment should be left

https://deploy-preview-13986--ethereumorg.netlify.app/en/guides/how-to-create-an-ethereum-account/#how-to-create-an-ethereum-account

[nloureiro]

Another one centered

https://deploy-preview-13986--ethereumorg.netlify.app/en/guides/how-to-revoke-token-access/#step-1%3A-use-revoke-access-tools

And this tag... it hurts my eyes

[nloureiro]

center too

• https://deploy-preview-13986--ethereumorg.netlify.app/en/guides/how-to-swap-tokens/#how-to-swap-tokens

• https://deploy-preview-13986--ethereumorg.netlify.app/en/guides/how-to-use-a-bridge/#how-to-bridge-tokens-to-layer-2

• https://deploy-preview-13986--ethereumorg.netlify.app/en/guides/how-to-use-a-wallet/#how-to-use-a-wallet

• https://deploy-preview-13986--ethereumorg.netlify.app/en/nft/#what-are-nfts

[nloureiro]

there is a dot on the third line
https://deploy-preview-13986--ethereumorg.netlify.app/en/roadmap/beacon-chain/#what-is-the-beacon-chain

[wackerow]

Should the alert have some default margins to prevent this from happening?

Agree we should fix this... Imo this shouldn't be done as a default Alert styling though. I'd like to handle this from the parent in a separate PR. The spacing here shines light on our article DOM structure which could use some improving (ie. use main instead of our current article and then wrap content below the h1's inside article, then style that template)

[wackerow]

@wackerow, can we make the button collapse to the bottom on mobile? Or should it be on another PR?

Played around with this... given it's current setup, and the complexity of this PR already, let's table to a separate task/PR.

[wackerow]

Juicy and unfortunate merge conflict with the latest translation import... will need to find time to go through this

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[wackerow]

Closing due to complexity of merge conflicts; will likely be simpler to start fresh. Issue posted #15407; this branch can be used in whatever capacity as a reference for future implementation