From fb0cb0b6cae59c81a0f4c60b49606df53fb9607e Mon Sep 17 00:00:00 2001
From: Wanjohi <elviswanjohi47@gmail.com>
Date: Mon, 3 Mar 2025 23:47:00 +0300
Subject: [PATCH] fix: Portal mount

---
 packages/www/src/App.tsx        | 43 +++++++++++++++++++++------------
 packages/www/src/pages/play.tsx |  5 +---
 packages/www/src/ui/root.tsx    | 40 ------------------------------
 3 files changed, 29 insertions(+), 59 deletions(-)
 delete mode 100644 packages/www/src/ui/root.tsx

diff --git a/packages/www/src/App.tsx b/packages/www/src/App.tsx
index 1b960f0f..766feb33 100644
--- a/packages/www/src/App.tsx
+++ b/packages/www/src/App.tsx
@@ -15,20 +15,19 @@ import { Navigate, Route, Router } from "@solidjs/router";
 import { globalStyle, macaron$ } from "@macaron-css/core";
 import { Component, createSignal, Match, onCleanup, Switch } from 'solid-js';
 import TestComponent from './pages/test';
-import Root from './ui/root';
 
-// const Root = styled("div", {
-//     base: {
-//         inset: 0,
-//         lineHeight: 1,
-//         fontSynthesis: "none",
-//         color: theme.color.d1000.gray,
-//         fontFamily: theme.font.family.body,
-//         textRendering: "optimizeLegibility",
-//         WebkitFontSmoothing: "antialised",
-//         backgroundColor: theme.color.background.d100,
-//     },
-// });
+const Root = styled("div", {
+    base: {
+        inset: 0,
+        lineHeight: 1,
+        fontSynthesis: "none",
+        color: theme.color.d1000.gray,
+        fontFamily: theme.font.family.body,
+        textRendering: "optimizeLegibility",
+        WebkitFontSmoothing: "antialised",
+        backgroundColor: theme.color.background.d100,
+    },
+});
 
 globalStyle("html", {
     fontSize: 16,
@@ -66,11 +65,25 @@ globalStyle("*", {
 });
 
 export const App: Component = () => {
-   
+    const [theme, setTheme] = createSignal<string>(
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light",
+    );
+
+    const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
+    const setColorScheme = (e: MediaQueryListEvent) => {
+        setTheme(e.matches ? "dark" : "light");
+    };
+    darkMode.addEventListener("change", setColorScheme);
+    onCleanup(() => {
+        darkMode.removeEventListener("change", setColorScheme);
+    });
+
     const storage = useStorage();
 
     return (
-        <Root>
+        <Root class={theme() === "light" ? lightClass : darkClass} id="styled">
             <Router>
                 <Route
                     path="*"
diff --git a/packages/www/src/pages/play.tsx b/packages/www/src/pages/play.tsx
index 01b2f31f..067dbbcf 100644
--- a/packages/www/src/pages/play.tsx
+++ b/packages/www/src/pages/play.tsx
@@ -6,7 +6,6 @@ import { Keyboard, Mouse, WebRTCStream } from "@nestri/input";
 import { Container, FullScreen } from "@nestri/www/ui/layout";
 import { styled } from "@macaron-css/solid";
 import { lightClass, theme, darkClass } from "@nestri/www/ui/theme";
-import Root from "../ui/root";
 
 const Canvas = styled("canvas", {
   base: {
@@ -252,9 +251,8 @@ function createModal() {
     },
     Modal() {
       return (
-        <Portal>
+        <Portal mount={document.getElementById("styled")!}>
           <Show when={open()}>
-            <Root>
               <div
                 style={`
                   position: absolute;
@@ -269,7 +267,6 @@ function createModal() {
                   <button onClick={() => setOpen(false)}>close modal</button>
                 </ModalContainer>
               </div>
-            </Root>
           </Show>
         </Portal>
       );
diff --git a/packages/www/src/ui/root.tsx b/packages/www/src/ui/root.tsx
deleted file mode 100644
index 7e06d7a8..00000000
--- a/packages/www/src/ui/root.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { createSignal, JSX, onCleanup } from "solid-js";
-import { useStorage } from "@nestri/www/providers/account";
-import { darkClass, lightClass, theme } from "./theme";
-import { styled } from "@macaron-css/solid";
-
-const BaseComponent = styled("div", {
-    base: {
-        inset: 0,
-        lineHeight: 1,
-        fontSynthesis: "none",
-        color: theme.color.d1000.gray,
-        fontFamily: theme.font.family.body,
-        textRendering: "optimizeLegibility",
-        WebkitFontSmoothing: "antialised",
-        backgroundColor: theme.color.background.d100,
-    },
-});
-
-export default function Root(props: { children: number | boolean | Node | JSX.ArrayElement | (string & {}) | null | undefined; }) {
-    const [theme, setTheme] = createSignal<string>(
-        window.matchMedia("(prefers-color-scheme: dark)").matches
-            ? "dark"
-            : "light",
-    );
-
-    const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
-    const setColorScheme = (e: MediaQueryListEvent) => {
-        setTheme(e.matches ? "dark" : "light");
-    };
-    darkMode.addEventListener("change", setColorScheme);
-    onCleanup(() => {
-        darkMode.removeEventListener("change", setColorScheme);
-    });
-
-    return (
-        <BaseComponent class={theme() === "light" ? lightClass : darkClass} id="styled">
-            {props.children}
-        </BaseComponent>
-    )
-}
\ No newline at end of file