From 0070c1bd38122ad1a2cd2c80267e92993e94fe8a Mon Sep 17 00:00:00 2001
From: jerremyng <jerrremyng@gmail.com>
Date: Sat, 10 Jan 2026 06:44:01 +0000
Subject: [PATCH] fix light mode styling and remove transitions

---
 resources/css/app.css                         | 50 +++++++++++--------
 .../views/livewire/plugins/recipe.blade.php   |  6 +--
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 3cb1026..de95b81 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -73,28 +73,38 @@ select:focus[data-flux-control] {
     @apply size-4;
 } */
 
-.tab-button {
-    @apply flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all;
-    @apply rounded-t-lg border-t border-x border-transparent;
+@layer components {
+    /* standard container for app */
+    .styled-container,
+    .tab-button {
+        @apply rounded-xl border bg-white dark:bg-stone-950 dark:border-zinc-700 text-stone-800 shadow-xs;
+    }
 
-    /* This makes the button sit slightly over the box border */
-    margin-bottom: -1px;
-    position: relative;
-    z-index: 1;
-}
+    .tab-button {
+        @apply flex items-center gap-2 px-4 py-2 text-sm font-medium;
+        @apply rounded-b-none shadow-none bg-inherit;
 
-.tab-button.is-active {
-    @apply text-white border-zinc-700;
-    /* Z-index 10 ensures the bottom border of the tab hides the top border of the box */
-    z-index: 10;
-    border-bottom: 1px solid theme('colors.zinc.800');
-}
+        /* This makes the button sit slightly over the box border */
+        margin-bottom: -1px;
+        position: relative;
+        z-index: 1;
+    }
 
-.tab-button:not(.is-active) {
-    @apply text-zinc-500;
-}
+    .tab-button.is-active {
+        @apply text-zinc-700 dark:text-zinc-300;
+        @apply border-b-white dark:border-b-zinc-800;
 
-.tab-button:not(.is-active):hover {
-    @apply bg-zinc-700/50 text-zinc-300 border-zinc-700/50;
-    cursor: pointer;
+        /* Z-index 10 ensures the bottom border of the tab hides the top border of the box */
+        z-index: 10;
+    }
+
+    .tab-button:not(.is-active) {
+        @apply text-zinc-500 border-transparent;
+    }
+
+    .tab-button:not(.is-active):hover {
+        @apply text-zinc-700 dark:text-zinc-300;
+        @apply border-zinc-300 dark:border-zinc-700;
+        cursor: pointer;
+    }
 }
diff --git a/resources/views/livewire/plugins/recipe.blade.php b/resources/views/livewire/plugins/recipe.blade.php
index a2044ac..6e96a73 100644
--- a/resources/views/livewire/plugins/recipe.blade.php
+++ b/resources/views/livewire/plugins/recipe.blade.php
@@ -766,8 +766,8 @@ HTML;
                             </button>
                         </div>
 
-                        <div class="flex-col p-4 border border-zinc-700 rounded-b-xl rounded-tr-xl shadow-2xl">
-                            <div x-show="subTab === 'settings'" x-transition:enter.opacity.duration.150ms>
+                        <div class="flex-col p-4 bg-transparent rounded-tl-none styled-container">
+                            <div x-show="subTab === 'settings'">
                                 <flux:field>
                                     <flux:description>Enter the URL(s) to poll for data:</flux:description>
                                     <flux:textarea
@@ -781,7 +781,7 @@ HTML;
                                 </flux:field>
                             </div>
 
-                            <div x-show="subTab === 'preview'" x-cloak x-transition:enter.opacity.duration.150ms>
+                            <div x-show="subTab === 'preview'" x-cloak>
                                 <flux:field>
                                     <flux:description>Preview computed URLs here (readonly):</flux:description>
                                     <flux:textarea