feat(insights): responsive layouts and components

[partyparrotgreg]

Chores around making Insights Hub layout and components responsive.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
api-reference	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 28, 2025 11:36am
insights	❌ Failed (Inspect)			Jan 28, 2025 11:36am
proposals	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 28, 2025 11:36am
staking	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 28, 2025 11:36am

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
component-library	⬜️ Ignored (Inspect)	Visit Preview		Jan 28, 2025 11:36am
entropy-debugger	⬜️ Ignored (Inspect)	Visit Preview		Jan 28, 2025 11:36am

[cprussin]

Please don't check this config in; this is a local setting and isn't intended to be checked in. We can gitignore this file instead.

[cprussin]

I found that I really didn't like these mixins much and I haven't been using them much; instead I started using the text mixin a few lines below, e.g. this would be:

.someClass {
  @include theme.text("base", "medium");
  line-height: 125%;
  letter-spacing: theme.letter-spacing("tight");
}

I suppose the line heights & letter spacing could get redundant, but I found there to be so much variations in the different combinations of text properties that it didn't seem to make a lot of sense to try to abstract them all.

I'm open to other ideas here though, this is one place I don't feel great about the theming system right now...

[cprussin]

rgba is effectively deprecated and should be replaced with rgb instead: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb

So this would be:

background: rgb(0 0 0 / 40%);

or (I prefer this):

background: rgb(from black r g b /40%)

[cprussin]

hmm I generally recommend against this kind of thing, using super high z-indexing generally shouldn't be necessary and if it is, it means something else is broken with stacking contexts and it will cause hard to debug issues elsewhere.

I suggest avoiding z-indexing if possible, but if not possible just set it to the minimum necessary value. You can usually avoid z-indexing issues simply by setting stacking contexts correctly and explicitly (sometimes you need to use isolate to create a stacking context if you aren't implicitly creating one where one is needed.

If you see issues with stacking context elsewhere when using the minimum necessary z-indexing, it's best to try to resolve those issues early to avoid causing hard to debug problems down the line.

In this particular case, however, I think you can get away without having to use this entirely if you instead use the ModalDialog component as I mention below -- that component will render to a portal at the document root that is properly overlaid and it will avoid all issues with z-indexing entirely.

[cprussin]

Let's use theme.spacing(4) instead

[cprussin]

We should avoid px values entirely and stick to theme.spacing

[cprussin]

We shouldn't use text-transform, I know we aren't localizing but if we ever do, text-transforms aren't consistently accurate across locales. For instance, in some languages, it is incorrect to have some characters capitalized in some contexts even if the rest of the text is all-caps. It's also a completely unnecessary added amount of processing for the browser.

Instead, we should just write the string as it's meant to be rendered. If you want all caps, just put all caps in the html. If we ever go to localize, this will save us a ton of headache, and it will reduce unnecessary processing in the meantime.

[partyparrotgreg]

This one is to Capitalize the theme return (it returns light, dark, system), otherwise I wouldn't use it

[cprussin]

It's still best to map that in the jsx side, not the css