refactor(Trilemma): update Chakra implementations

[TylerAPfledderer]

Description

Updates usage of Chakra UI for the Trilemma component.

• Replace an instance of Flex with Stack
  • This is minor. Stack should be the preferred choice over Flex if the default flexDirection should be column if there is no expectation in changing to row at a breakpoint.
• Apply forwardRef to the CircleSelect component for passing event props.
• Remove children type signature from svg Text component as it is already present in HTMLChakraProps
• Move spacing props higher up to a parent or ancestor for more streamlined control.
• Remove unneeded props from DrawerContent and the child Card
• Use string values for hideBelow and hideFrom as the compiled lg breakpoint values renders correctly.
• For the Stack component wrapping the text content, remove the base flex prop value as it does not need to be declared for the breakpoint object syntax to compile correctly.

Preview link

• https://deploy-preview-10490--ethereumorg.netlify.app/en/roadmap/vision

Related Issue

N/A

[gatsby-cloud]

✅ ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 60m build time

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	048ce66
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/6603118e643ec00008021c12
😎 Deploy Preview	https://deploy-preview-10490--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[wackerow]

Hey @TylerAPfledderer, solid work here... gave it a run through and looks good, just a couple notes. From the PR description didn't quite sound like layout changes were part of this, so just left a couple notes of where it looked off compared to production and how I think we can get it closer.

With those few adjustments I think we can get this in... I'll circle back on this and if you're too busy I'm happy to patch it up

[wackerow]

If we're adding this here, we'll need to also remove the margins on <chakra.svg inside Triangle.tsx (L115-117).. we shouldn't need mt since we're aligning center, and we shouldn't need me since we handle this here. I think we still need my with how it's set up to keep the height within reason on mobile.

We should make these RTL-friendly though:

Suggested change

	pl={{ lg: 12 }}
	pr={{ lg: 32 }}
	ps={{ lg: 12 }}
	pe={{ lg: 32 }}

[TylerAPfledderer]

Applied RTL-aware props.

At the very least, top margin should be considered, as even with larger screens, there are certain points where the text wrapping expands there container height be too close to the bounds of the section container compared to how much spacing there is consistently through the breakpoints. center alignment primary helps the triangle svg though.

Example is at 996px without top margin:

[wackerow]

Nice job @TylerAPfledderer! Approving this from a dev perspective but would like to have a designer approval before finally pulling this in. cc: @nloureiro @konopkja

Not positive we can use "2xl" for a borderTopRadius but I'm fairly certain we can... if you agree, feel free to commit that suggestion, but not a blocker.

---

TODO:

• Designer approval

[wackerow]

@nloureiro Brought this up elsewhere, but more use of a non-standard font size

^ These are the sizes we have assigned to tokens right now... not requesting anything for this PR, just noting... card here

[wackerow]

Thanks again @TylerAPfledderer!!