Update CSS to defensively avoid inheriting Docker styles

This commit opts us out of Docker's default theme which is designed for
MUI, and seems like it may change a fair bit. Instead, we update our
Tailwind config to inherit a selection of CSS variables from their theme
so we have greater control over changes and can avoid bitrot.

Author: rosszurowski

ui/src/components/tooltip.tsx

@@ -36,7 +36,7 @@ export default function Tooltip(props: Props) {
         {children}
       </Primitive.Trigger>
       <Primitive.Content
-        className="tooltip px-2 py-1 bg-[#5e6971] text-white text-center rounded-md max-w-xs"
+        className="tooltip px-2 py-1 bg-[#5e6971] text-white text-sm text-center rounded-md max-w-xs"
         sideOffset={sideOffset}
       >
         {content}

ui/src/entry.tsx

@@ -14,6 +14,8 @@ 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">
@@ -107,3 +109,19 @@ 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)
+    }
+  }, [])
+}

ui/src/styles.css

@@ -21,7 +21,25 @@
   html,
   body,
   #root {
-    height: 100%;
+    @apply font-sans text-base h-full antialiased;
+  }
+
+  body {
+    /**
+     * We apply some default values from Docker Desktop's default theme prior to
+     * version 4.9. This is overriden in the #root declaration below.
+     */
+    @apply bg-[#f4f4f6] dark:bg-[#202c33] text-[rgba(0,0,0,0.87)] dark:text-white p-0;
+  }
+
+  #root {
+    /**
+     * We override the body styles here to prevent Docker's theme
+     * from affecting us.
+     */
+    background-color: var(--dd-color-background);
+    color: var(--dd-text-color-primary);
+    padding: var(--dd-page-padding-top, 1.5rem) var(--dd-page-padding-right, 1.5rem) var(--dd-page-padding-bottom, 1.5rem) var(--dd-page-padding-left, 1.5rem);
   }
 }
 

ui/src/views/container-view.tsx

@@ -70,7 +70,7 @@ export default function ContainerView() {
           longer be able to access your containers.
         </p>
       </Dialog>
-      <header className="flex items-center justify-between py-5">
+      <header className="flex items-center justify-between pb-5">
         <div>
           <div className="font-semibold text-xl">Tailscale</div>
           <div className="flex items-center text-gray-500 dark:text-gray-400">

ui/src/views/loading-view.tsx

@@ -12,7 +12,7 @@ export default function LoadingView() {
     <div className="w-full h-full flex justify-center">
       <div
         className={cx(
-          "rounded-full border-gray-400 dark:border-gray-500 border-4 border-t-transparent dark:border-t-transparent w-12 h-12 animate-spin duration-[1.5s] transition mt-28",
+          "rounded-full border-gray-600 dark:border-gray-500 border-4 border-t-transparent dark:border-t-transparent w-12 h-12 animate-spin duration-[1.5s] transition mt-28",
           {
             "opacity-0": !mounted,
             "opacity-100": mounted,

ui/tailwind.config.js

@@ -34,11 +34,18 @@ module.exports = {
         "docker-gray-200": "#E1E2E6",
         "docker-gray-100": "#F9F9FA",
 
+        "docker-blue-300": "var(--dd-color-blue-300)",
+        "docker-blue-500": "var(--dd-color-blue-500)",
+        "docker-blue-700": "var(--dd-color-blue-700)",
+
         "faded-gray-5": "rgba(31,41,55,0.05)",
         "faded-gray-15": "rgba(31,41,55,0.15)",
         "faded-gray-25": "rgba(31,41,55,0.25)",
         "faded-white-5": "rgba(255,255,255,0.05)",
       },
+      fontFamily: {
+        sans: ["Open SansVariable", "Open Sans", "-apple-system", "sans-serif"],
+      },
       boxShadow: {
         avatar:
           "0 0 0 1px rgba(136, 152, 170, 0.1), 0 0 4px 0 rgba(49, 49, 93, 0.15)",