Refactor: Migrate StakingHierarchy to Chakra

[TylerAPfledderer]

Description

Migrate the StakingHierarchy component to Chakra.

Also includes updating the glyph icons to have currentColor as their fill values.

Related Issue

#8632

[gatsby-cloud]

✅ ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 20m build time

[pettinarip]

Looking good @TylerAPfledderer

Just a few things I see comparing it with the prod version:

• small gap between sections
  

• eth icons are too small on small resolutions
  

This is in prod:

[TylerAPfledderer]

@pettinarip yikes! We have browser inconsistencies here. I definitely see this in Chrome, but the styling works as expected in Firefox.

It also looks broken in prod on Chrome too, or maybe the other way around?? 🤔

Update: Applying 100% width to the wrapper for each eth glyph will fix the size inconsistency between browsers. They will be forced to the max width and in turn allow the vertical bars to connect between each glyph,

[pettinarip]

Thanks for the fixes @TylerAPfledderer.

I wouldn't say this is a blocker but I still see a small gap between the line and the eth logos. Probably it is related to the VStack but I see you set it as gap={0} in the md breakpoint, so I'm not sure what is going on.

[pettinarip]

We will need to keep this class style since the markdown is using it.

[TylerAPfledderer]

I will add it back in and add a comment above it stating that markdown files use this classname

[TylerAPfledderer]

Thanks for the fixes @TylerAPfledderer.

I wouldn't say this is a blocker but I still see a small gap between the line and the eth logos. Probably it is related to the VStack but I see you set it as gap={0} in the md breakpoint, so I'm not sure what is going on.

With VStack I am supposed to use the spacing prop and not the gap prop (renders an "owl"-like selector to create margins). So even with gap margin still existed. 🤦🏼

For context and example, if spacing={2}, then the following selector and property gets rendered for every sibling after the first:

.css-tnhm38 > :not(style) ~ :not(style) {
  margin-top: 0.5rem;
}

gap would only really work if you were using the Flex component, say, or any component that can take this prop and doesn't do the above selector rendering under the hood.

[TylerAPfledderer]

@pettinarip should be good to go now! 😄

[pettinarip]

Oh got it. makes sense now :)

[pettinarip]

lgtm!