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,50 +95,47 @@ 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>
-        </div>
-        <p className="text-primary flex items-center gap-2">
-          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">
+        <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>
+        </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
+                Element="button"
+                className={buttonClasses + ' !text-base'}
+                onClick={onOpenInDesktopApp}
+                iconEnd={{ icon: 'arrowRight' }}
+              >
+                Open in desktop app
+              </ActionButton>
+              <ActionButton
+                Element="externalLink"
+                className={
+                  buttonClasses +
+                  ' text-sm border-transparent justify-center dark:bg-transparent'
+                }
+                to={`${VITE_KC_SITE_BASE_URL}/${APP_DOWNLOAD_PATH}`}
+                iconEnd={{ icon: 'link', bgClassName: '!bg-transparent' }}
+              >
+                Download desktop app
+              </ActionButton>
+            </div>
             <ActionButton
               Element="button"
-              className={buttonClasses + ' !text-base'}
-              onClick={onOpenInDesktopApp}
-              iconEnd={{ icon: 'arrowRight' }}
+              className={buttonClasses + ' -order-1 !text-base'}
+              onClick={continueToWebApp}
+              iconStart={{ icon: 'arrowLeft' }}
+              data-testid="continue-to-web-app-button"
             >
-              Open in desktop app
-            </ActionButton>
-            <ActionButton
-              Element="externalLink"
-              className={
-                buttonClasses +
-                ' text-sm border-transparent justify-center dark:bg-transparent'
-              }
-              to={`${VITE_KC_SITE_BASE_URL}/${APP_DOWNLOAD_PATH}`}
-              iconEnd={{ icon: 'link', bgClassName: '!bg-transparent' }}
-            >
-              Download desktop app
+              Continue to web app
             </ActionButton>
           </div>
-          <ActionButton
-            Element="button"
-            className={buttonClasses + ' -order-1 !text-base'}
-            onClick={continueToWebApp}
-            iconStart={{ icon: 'arrowLeft' }}
-            data-testid="continue-to-web-app-button"
-          >
-            Continue to web app
-          </ActionButton>
         </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) {