Remove old ZMA logos, rip out JS theme state from open-in-desktop view (#7119)

* Remove old ZMA logos, rip out JS theme state from open-in-desktop view

Make this page dumber so that it doesn't break

* Lint and remove kcma refs

---------

Co-authored-by: Pierre Jacquier <pierre@zoo.dev>

src/components/OpenInDesktopAppHandler.tsx

@@ -9,9 +9,11 @@ import {
   ZOO_STUDIO_PROTOCOL,
 } from '@src/lib/constants'
 import { isDesktop } from '@src/lib/isDesktop'
-import { Themes, getSystemTheme } from '@src/lib/theme'
+import { Themes, darkModeMatcher, setThemeClass } from '@src/lib/theme'
 import toast from 'react-hot-toast'
 import { platform } from '@src/lib/utils'
+import { Logo } from '@src/components/Logo'
+import { useEffect } from 'react'
 
 /**
  * This component is a handler that checks if a certain query parameter
@@ -19,17 +21,23 @@ import { platform } from '@src/lib/utils'
  * want to open the current page in the desktop app.
  */
 export const OpenInDesktopAppHandler = (props: React.PropsWithChildren) => {
-  const theme = getSystemTheme()
   const buttonClasses =
     'bg-transparent flex-0 hover:bg-primary/10 dark:hover:bg-primary/10'
-  const pathLogomarkSvg = `${isDesktop() ? '.' : ''}/zma-logomark${
-    theme === Themes.Light ? '-dark' : ''
-  }.svg`
   const [searchParams, setSearchParams] = useSearchParams()
   // We also ignore this param on desktop, as it is redundant
   const hasAskToOpenParam =
     !isDesktop() && searchParams.has(ASK_TO_OPEN_QUERY_PARAM)
 
+  // Watch the system theme for changes
+  useEffect(() => {
+    const listener = (e: MediaQueryListEvent) => {
+      setThemeClass(e.matches ? Themes.Dark : Themes.Light)
+    }
+
+    darkModeMatcher?.addEventListener('change', listener)
+    return () => darkModeMatcher?.removeEventListener('change', listener)
+  }, [])
+
   /**
    * This function removes the query param to ask to open in desktop app
    * and then navigates to the same route but with our custom protocol
@@ -73,17 +81,12 @@ export const OpenInDesktopAppHandler = (props: React.PropsWithChildren) => {
       appear
       show={true}
       as="div"
-      className={
-        theme +
-        ` fixed inset-0 grid p-4 place-content-center ${
-          theme === Themes.Dark ? '!bg-chalkboard-110 text-chalkboard-20' : ''
-        }`
-      }
+      className="fixed inset-0 grid p-4 place-content-center bg-chalkboard-10 dark:bg-chalkboard-110"
     >
       <Transition.Child
         as="div"
-        className={`max-w-3xl py-6 px-10 flex flex-col items-center gap-8 
-          mx-auto border rounded-lg shadow-lg dark:bg-chalkboard-100`}
+        className={`max-w-3xl py-6 px-10 flex flex-col items-center gap-12 
+          mx-auto border rounded-lg shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100`}
         enter="ease-out duration-300"
         enterFrom="opacity-0 scale-95"
         enterTo="opacity-100 scale-100"
@@ -92,19 +95,15 @@ export const OpenInDesktopAppHandler = (props: React.PropsWithChildren) => {
         leaveTo="opacity-0 scale-95"
         style={{ zIndex: 10 }}
       >
-        <div>
-          <h1 className="text-2xl">
-            Launching{' '}
-            <img
-              src={pathLogomarkSvg}
-              className="w-48"
-              alt="Zoo Design Studio"
-            />
-          </h1>
+        <h1 className="text-2xl text-center ">
+          <div className="mb-4">Launching </div>
+          <div className="flex items-center gap-4 flex-wrap text-4xl">
+            <Logo className="w-40" aria-label="Zoo" />
+            <span>Design Studio</span>
           </div>
-        <p className="text-primary flex items-center gap-2">
-          Choose where to open this link...
-        </p>
+        </h1>
+        <div className="flex flex-col gap-4 items-center">
+          <p className="text-primary">Choose where to open this link...</p>
           <div className="flex flex-col md:flex-row items-start justify-between gap-4 xl:gap-8">
             <div className="flex flex-col gap-2">
               <ActionButton
@@ -137,6 +136,7 @@ export const OpenInDesktopAppHandler = (props: React.PropsWithChildren) => {
               Continue to web app
             </ActionButton>
           </div>
+        </div>
       </Transition.Child>
     </Transition>
   ) : (

src/lang/std/engineConnection.ts

@@ -924,7 +924,7 @@ class EngineConnection extends EventTarget {
             },
           }
 
-          // This is required for when KCMA is running stand-alone / within desktop app.
+          // This is required for when the app is running stand-alone / within desktop app.
           // Otherwise when run in a browser, the token is sent implicitly via
           // the Cookie header.
           if (this.token) {