Opt-out of Docker styles in a better way

rosszurowski · rosszurowski · commit ae6207833f08 · 2022-05-31T10:44:53.000-04:00
This commit removes the `dockerDesktopTheme` class from our body in the
HTML, rather than inserting it, and then removing it via JS.
diff --git a/ui/public/index.html b/ui/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
   </head>
-  <body class="dockerDesktopTheme">
+  <body>
     <div id="root"></div>
   </body>
 </html>
diff --git a/ui/src/entry.tsx b/ui/src/entry.tsx
@@ -14,8 +14,6 @@ import NeedsAuthView from "src/views/needs-auth-view"
 import OnboardingView from "src/views/onboarding-view"
 
 export default function App() {
-  useRemoveDockerStyles()
-
   return (
     <Tooltip.Provider>
       <div className="text-sm h-full">
@@ -109,19 +107,3 @@ const showOnboarding = (state: BackendState, user?: object) => {
   }
   return false
 }
-
-/**
- * useRemoveDockerStyles removes the `dockerDesktopTheme` classname that gets
- * injected by Docker Desktop. These styles seem like they may change regularly,
- * so opting out lets us control our UI better, and only make changes when
- * necessary.
- */
-function useRemoveDockerStyles() {
-  useEffect(() => {
-    const dockerThemeClass = "dockerDesktopTheme"
-    const $body = document.body;
-    if ($body && $body.classList.contains(dockerThemeClass)) {
-      $body.classList.remove(dockerThemeClass)
-    }
-  }, [])
-}
