chore: move CacheProvider to ThemeProvider

jaaydenh · jaaydenh · commit c19a5611c0ce · 2024-11-05T14:52:55.000Z
diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -1,6 +1,4 @@
 import "./theme/globalFonts";
-import createCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
 	type FC,
@@ -40,11 +38,6 @@ declare global {
 	}
 }
 
-const cache = createCache({
-	key: "css",
-	prepend: true,
-});
-
 export const AppProviders: FC<AppProvidersProps> = ({
 	children,
 	queryClient = defaultQueryClient,
@@ -71,19 +64,17 @@ export const AppProviders: FC<AppProvidersProps> = ({
 	}, []);
 
 	return (
-		<CacheProvider value={cache}>
-			<HelmetProvider>
-				<QueryClientProvider client={queryClient}>
-					<AuthProvider>
-						<ThemeProvider>
-							{children}
-							<GlobalSnackbar />
-						</ThemeProvider>
-					</AuthProvider>
-					{showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
-				</QueryClientProvider>
-			</HelmetProvider>
-		</CacheProvider>
+		<HelmetProvider>
+			<QueryClientProvider client={queryClient}>
+				<AuthProvider>
+					<ThemeProvider>
+						{children}
+						<GlobalSnackbar />
+					</ThemeProvider>
+				</AuthProvider>
+				{showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
+			</QueryClientProvider>
+		</HelmetProvider>
 	);
 };
 
diff --git a/site/src/contexts/ThemeProvider.tsx b/site/src/contexts/ThemeProvider.tsx
@@ -1,4 +1,6 @@
+import createCache from "@emotion/cache";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { CacheProvider } from "@emotion/react";
 import CssBaseline from "@mui/material/CssBaseline";
 import {
 	ThemeProvider as MuiThemeProvider,
@@ -57,7 +59,7 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
 	// value could be anything, like an empty string.
 
 	useEffect(() => {
-		const root = window.document.documentElement;
+		const root = document.documentElement;
 		root.classList.remove("light", "dark");
 		if (themePreference === "auto") {
 			root.classList.add(preferredColorScheme);
@@ -77,18 +79,25 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
 	);
 };
 
+const cache = createCache({
+	key: "css",
+	prepend: true,
+});
+
 interface ThemeOverrideProps {
 	theme: Theme;
 	children?: ReactNode;
 }
 
 export const ThemeOverride: FC<ThemeOverrideProps> = ({ theme, children }) => {
 	return (
-		<MuiThemeProvider theme={theme}>
-			<EmotionThemeProvider theme={theme}>
-				<CssBaseline enableColorScheme />
-				{children}
-			</EmotionThemeProvider>
-		</MuiThemeProvider>
+		<CacheProvider value={cache}>
+			<MuiThemeProvider theme={theme}>
+				<EmotionThemeProvider theme={theme}>
+					<CssBaseline enableColorScheme />
+					{children}
+				</EmotionThemeProvider>
+			</MuiThemeProvider>
+		</CacheProvider>
 	);
 };
diff --git a/site/src/index.css b/site/src/index.css
@@ -8,16 +8,16 @@
 		--content-secondary: #52525b;
 		--content-link: #2563eb;
 		--content-invert: #fafafa;
-		--content-disabled: #A1A1AA;
+		--content-disabled: #a1a1aa;
 		--content-success: #15803d;
 		--content-danger: #ef4444;
 		--surface-primary: #fafafa;
 		--surface-secondary: #f4f4f5;
 		--surface-tertiary: #e4e4e7;
 		--surface-invert-primary: #27272a;
 		--surface-invert-secondary: #3f3f46;
-		--surface-error: #450A0A;
-		--border-default :#E4E4E7;
+		--surface-error: #450a0a;
+		--border-default: #e4e4e7;
 		--border-error: #ef4444;
 		--radius: 0.5rem;
 	}
@@ -26,16 +26,16 @@
 		--content-secondary: #a1a1aa;
 		--content-link: #60a5fa;
 		--content-invert: #09090b;
-		--content-disabled: #3F3F46;
+		--content-disabled: #3f3f46;
 		--content-success: #16a34a;
 		--content-danger: #f87171;
 		--surface-primary: #09090b;
 		--surface-secondary: #18181b;
 		--surface-tertiary: #27272a;
 		--surface-invert-primary: #e4e4e7;
 		--surface-invert-secondary: #a1a1aa;
-		--surface-error: #450A0A;
-		--border-default: #27272A;
+		--surface-error: #450a0a;
+		--border-default: #27272a;
 		--border-error: #f87171;
 	}
 }
diff --git a/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx
@@ -223,7 +223,7 @@ const OSSVersion: FC = () => {
 							Template Permissions
 						</span>
 						<br />
-						<span className=" font-medium">
+						<span className="font-medium">
 							Control who can create, modify, and access workspace templates
 							across teams.
 						</span>
