impress/app/javascript
Emi Matchu fcc17d3dcf Whoops, fix some style regressions for the React app!
Ah beans, I didn't notice when doing my Turbo fixes in
40804c1543, that I had accidentally
prevented Chakra from applying some of its usual global styles! This
caused some minor visual regressions in various parts of the app, e.g.,
the default border color for the search field in the wardrobe app
became way darker.

Here, instead of copy-pasting the styles and missing some parts, we
scope the global styles a bit more carefully: we first use
`extendTheme` with the same code as Impress 2020 to get a good
`globalStyles` function that includes Chakra's defaults, *then* delete
the key from the theme.

Then, in `ScopedCSSReset`, we use code similar to Chakra's own global
style application code: call the `globalStyles` function with the
current theme and color mode, use Chakra's `css` function to convert
values like `green.800` to CSS values, prepend our scoping rule onto
the selectors, and drop it into our Emotion CSS.

Tbh I was worried because when I first noticed this issue while on my
trip, I saw the black item search box border, and was like "ah dang,
did I destroy all the color in the app by breaking the part where
Chakra defines its CSS color variables??" And no, that's not actually
what happened, a lot of the app still had its colors!

So this was less pressing than I had thought, but still good to get
fixed!
2024-03-31 01:20:45 -07:00
..
wardrobe-2020 Whoops, fix some style regressions for the React app! 2024-03-31 01:20:45 -07:00
application.js Add Turbo to speed up the app, and set up for missing UJS features 2024-03-13 13:43:48 -07:00
item-page.js Remove old trade hangers UI from item page 2024-01-21 04:49:06 -08:00
wardrobe-2020-page.js Set up eslint for wardrobe-2020 2023-11-02 18:11:07 -07:00