From 40804c15435b954e3f320c9e84db8690b1d74dad Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Wed, 13 Mar 2024 20:57:30 -0700
Subject: [PATCH] Fix the Chakra CSS reset applying to too many things on item
 page

Finally getting around to this because, with Turbo in play, it applies
to subsequent *pages* too, oops! Previously we at least had the blast
radius of this known issue constrained to the item page itself lol :p
---
 app/javascript/wardrobe-2020/AppProvider.js | 27 +++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/app/javascript/wardrobe-2020/AppProvider.js b/app/javascript/wardrobe-2020/AppProvider.js
index ddbe5fa2..bca86234 100644
--- a/app/javascript/wardrobe-2020/AppProvider.js
+++ b/app/javascript/wardrobe-2020/AppProvider.js
@@ -1,16 +1,29 @@
 import React from "react";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
-import { ChakraProvider, Box, useColorModeValue } from "@chakra-ui/react";
+import {
+  ChakraProvider,
+  Box,
+  theme as defaultTheme,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import { ApolloProvider } from "@apollo/client";
 import { BrowserRouter } from "react-router-dom";
 import { Global } from "@emotion/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import produce from "immer";
 
 import apolloClient from "./apolloClient";
 
 const reactQueryClient = new QueryClient();
 
+// Use Chakra's default theme, but with the global styles removed. (We've
+// copied them into our `ScopedCSSReset` component, to apply in only the places
+// we actually want them!)
+const theme = produce(defaultTheme, (theme) => {
+  theme.styles.global = {};
+});
+
 export default function AppProvider({ children }) {
   React.useEffect(() => setupLogging(), []);
 
@@ -18,7 +31,7 @@ export default function AppProvider({ children }) {
     <BrowserRouter>
       <QueryClientProvider client={reactQueryClient}>
         <ApolloProvider client={apolloClient}>
-          <ChakraProvider resetCSS={false}>
+          <ChakraProvider resetCSS={false} theme={theme}>
             <ScopedCSSReset>{children}</ScopedCSSReset>
           </ChakraProvider>
         </ApolloProvider>
@@ -91,6 +104,16 @@ function ScopedCSSReset({ children }) {
       <Global
         styles={`
           :where(.chakra-css-reset, .chakra-portal) {
+            /* Chakra's default global styles, placed here so we can override
+             * the actual _global_ styles in the theme to be empty. That way,
+             * it only affects Chakra stuff, not all elements! */
+            font-family: var(--chakra-fonts-body);
+            color: var(--chakra-colors-gray-800);
+            background: var(--chakra-colors-white);
+            transition-property: background-color;
+            transition-duration: var(--chakra-transition-duration-normal);
+            line-height: var(--chakra-lineHeights-base);
+
             *,
             *::before,
             *::after {