spot: upgrade wxt, properly reset offscreen page

spot/assets/main.css

@@ -1,3 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "daisyui" {
+  themes: light --default;
+}

spot/entrypoints/content/RecordingControls.tsx

@@ -1,7 +1,7 @@
 import { createSignal, onCleanup, createEffect } from "solid-js";
 import { STATES, formatMsToTime } from "~/entrypoints/content/utils";
 import micOn from "~/assets/mic-on.svg";
-import { createDraggable } from "@neodrag/solid";
+import { createDraggable } from '@neodrag/solid';
 
 interface IRControls {
   pause: () => void;
@@ -144,7 +144,7 @@ function RecordingControls({
           {recording() ? (
             <button
               class={
-                "btn btn-sm btn-ghost btn-circle tooltip tooltip-top flex items-center bg-black/20 hover:bg-black/70"
+                "btn btn-sm btn-ghost btn-circle tooltip tooltip-top flex items-center bg-black/20 hover:text-white hover:bg-black/70"
               }
               data-tip="Pause Recording"
               onClick={onPause}
@@ -168,7 +168,7 @@ function RecordingControls({
           ) : (
             <button
               class={
-                "btn btn-sm btn-ghost btn-circle tooltip tooltip-top flex items-center bg-black/70 hover:bg-black"
+                "btn btn-sm btn-ghost btn-circle tooltip tooltip-top flex items-center bg-black/70 hover:text-white hover:bg-black"
               }
               data-tip="Resume Recording"
               onClick={onResume}
@@ -199,7 +199,7 @@ function RecordingControls({
           </div>
 
           <button
-            class={`btn btn-sm btn-circle btn-ghost tooltip tooltip-top flex items-center ${
+            class={`btn btn-sm btn-circle btn-ghost tooltip hover:text-white tooltip-top flex items-center ${
               mic() ? "bg-black/20" : "bg-black"
             }`}
             data-tip={
@@ -263,7 +263,7 @@ function RecordingControls({
 
           <button
             class={
-              "btn btn-sm btn-ghost btn-circle tooltip tooltip-top flex items-center bg-black/20 hover:bg-black/70"
+              "btn btn-sm btn-ghost btn-circle tooltip tooltip-top flex items-center hover:text-white bg-black/20 hover:bg-black/70"
             }
             data-tip="Restart Recording"
             onClick={onRestartEv}

spot/entrypoints/content/index.tsx

@@ -22,6 +22,7 @@ export default defineContentScript({
     }
     const ui = await createShadowRootUi(ctx, {
       name: "spot-ui",
+      inheritStyles: true,
       position: "inline",
       anchor: "body",
       append: "first",

spot/entrypoints/content/style.css

@@ -1,9 +1,3 @@
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
 :host {
   all: initial;
 }

spot/package.json

@@ -2,7 +2,7 @@
   "name": "spot",
   "description": "manifest.json description",
   "private": true,
-  "version": "1.0.21",
+  "version": "1.0.22",
   "type": "module",
   "scripts": {
     "dev": "wxt",
@@ -18,19 +18,21 @@
   "dependencies": {
     "@neodrag/solid": "^2.3.0",
     "@openreplay/network-proxy": "^1.1.0",
+    "@tailwindcss/postcss": "^4.1.7",
+    "@tailwindcss/vite": "^4.1.7",
     "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
-    "solid-js": "^1.9.5",
-    "tailwindcss": "^3.4.4",
+    "solid-js": "^1.9.7",
+    "tailwindcss": "4.1.7",
     "web-vitals": "^4.2.4"
   },
   "devDependencies": {
     "@wxt-dev/module-solid": "^1.1.3",
-    "daisyui": "^4.12.10",
+    "daisyui": "5.0.37",
     "typescript": "^5.8.2",
-    "wxt": "0.19.29"
+    "wxt": "0.20.6"
   },
   "packageManager": "yarn@4.5.3"
 }

spot/postcss.config.js

@@ -1,7 +1,7 @@
 export default {
   plugins: {
+    "@tailwindcss/postcss": {},
     "@thedutchcoder/postcss-rem-to-px": {},
-    tailwindcss: {},
     autoprefixer: {},
   },
 };

spot/wxt.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "wxt";
+import tailwindcss from "@tailwindcss/vite";
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
@@ -30,7 +31,12 @@ export default defineConfig({
       "debugger",
     ],
   },
-  runner: {
+  webExt: {
     chromiumArgs: ['--user-data-dir=./.wxt/chrome-data'],
-  }
+  },
+  vite: (env) => ({
+    plugins: [tailwindcss()],
+    resolve: {
+      conditions: ['development', 'browser', 'module', 'default'],
+    }}),
 });