🔨 (grapher) refactor modals

[sophiamersmann]

Cycle 2024.2: Entity selector (prep work) | Designs

Summary

Refactors Grapher's modals by introducing typography utility classes that map to the Grapher Library defined in Figma.

This PR...

• gets rid of the em unit in modals (i.e. modals are now independent of Grapher's baseFontSize)
• adds a scss file called typography.scss that defines a set of utility classes for typography (similar to how it's done for the site)
• refactors Grapher's modal such that the scrollbar is on the very right (used to be padded)
• hides image previews in the Download modal on small screens

Notes

• Ignore the entity selector for now. It will be redesigned in subsequent PRs..
• Since modals are now independent of the baseFontSize, they don't scale the font sizes down on smaller screens. I think that's what we want, but I'll make sure Marwa signs off on it when we do a design review.

[sophiamersmann]

• 🎉 (entity selector) sort by external indicators #3466 : 2 dependent PRs (#3443 , #3490 )
• 🎉 (entity selector) highlight user location #3452
• 🎉 (entity selector) sort by name or value #3447
• ✨ (entity selector) redesign #3436
• 🔨 (grapher) refactor modals #3435 👈
• 🔨 (grapher) add CloseButton component #3434
• ✨ (entity selector) render into panel, drawer or modal #3373
• ✨ (entity selector) remove slide-in settings drawer #3353 : 2 other dependent PRs (#3356 , #3363 )
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[marcelgerber]

• hides image previews in the Download modal on small screens

That's not part of this PR, right? I couldn't see it anywhere in the code

[marcelgerber]

Nice! I did a bunch of before/after comparisons, and all the modals look pretty much identical with a few tiny touchups.

Need to fix that one thing above, but otherwise good to go!

[marcelgerber]

This one here doesn't seem to work just right; I'm seeing this (left is prod, right is your staging server):

[sophiamersmann]

Oh, good catch! Thank you!

[sophiamersmann]

I realise now that this is a quirk of the staging server because the data page's HTML changed but wasn't rebaked. My manual deploy doesn't get through but if you check locally, it should look okay :)

[sophiamersmann]

Merge activity

• May 3, 4:04 AM EDT: @sophiamersmann started a stack merge that includes this pull request via Graphite.
• May 3, 4:10 AM EDT: Graphite rebased this pull request as part of a merge.
• May 3, 4:11 AM EDT: @sophiamersmann merged this pull request with Graphite.