From 62763ca9bbf3aa1afa84ae54fd315fdf3fc16c6d Mon Sep 17 00:00:00 2001
From: roble <renanroble@gmail.com>
Date: Mon, 20 Apr 2026 20:57:15 +0100
Subject: [PATCH] fix: update save button text for clarity and improve theme
 panel descriptions

---
 CLAUDE.md                              |  2 +-
 resources/js/components/ThemePanel.vue | 16 ++++++++--------
 tests/e2e/themes-config.spec.ts        |  9 ++++-----
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 848e296..b36739c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -18,7 +18,7 @@ A developer-facing visual theming system for Saucebase. Lets the SaaS owner desi
 - Google Fonts — loaded on-demand via `<link>` injection; font classes injected per-var
 - Theme picker with animated ripple transition between themes
 - Theme persistence via `localStorage` key `sb-theme-theme`
-- Save button is a **dropdown**: "Save" (update existing custom theme) / "Save as new theme" (create new)
+- Save button is a **dropdown**: "Save" (update existing custom theme) / "Save as" (create new)
 
 ---
 
diff --git a/resources/js/components/ThemePanel.vue b/resources/js/components/ThemePanel.vue
index d5244a6..5f9486b 100644
--- a/resources/js/components/ThemePanel.vue
+++ b/resources/js/components/ThemePanel.vue
@@ -822,12 +822,12 @@ const dialogCommandOpen = ref(false);
                         {{ $t('Theme customizer') }}
                     </SheetTitle>
                     <SheetDescription class="sr-only">
-                        {{ $t('Adjust colors, font, and radius.') }}
+                        {{ $t('Add your own flavor') }}
                     </SheetDescription>
 
                     <!-- Header -->
                     <div
-                        class="border-border flex items-center gap-3 border-b px-4 py-3"
+                        class="border-border flex flex-wrap items-center gap-x-3 gap-y-2 border-b px-4 py-3"
                     >
                         <IconPalette
                             class="text-muted-foreground size-5 shrink-0"
@@ -839,13 +839,13 @@ const dialogCommandOpen = ref(false);
                                 {{ $t('Theme customizer') }}
                             </p>
                             <p class="text-muted-foreground mt-0.5 text-xs">
-                                {{ $t('Adjust colors, font, and radius.') }}
+                                {{ $t('Add your own flavor') }}
                             </p>
                         </div>
-                        <ThemeSelector inline hide-device />
+                        <ThemeSelector class="order-4 sm:order-3 w-full sm:w-auto" inline hide-device />
                         <button
                             data-testid="theme-panel-close"
-                            class="text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring rounded-md p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                            class="order-3 sm:order-4 text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring rounded-md p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
                             :aria-label="$t('Close theme panel')"
                             @click="sheetOpen = false"
                         >
@@ -1077,7 +1077,7 @@ const dialogCommandOpen = ref(false);
                                 <IconRotateCcw class="size-4" />
                                 {{ $t('Reset') }}
                             </button>
-                            <!-- Split button: custom theme → Save + dropdown; built-in → Save as new theme only -->
+                            <!-- Split button: custom theme → Save + dropdown; built-in → Save as only -->
                             <div
                                 v-if="currentTheme?.editable"
                                 class="border-border flex flex-1 overflow-hidden rounded-lg border"
@@ -1104,7 +1104,7 @@ const dialogCommandOpen = ref(false);
                                             data-testid="theme-panel-save-as"
                                             @click="dialogSaveOpen = true"
                                         >
-                                            {{ $t('Save as new theme') }}
+                                            {{ $t('Save as') }}
                                         </DropdownMenuItem>
                                     </DropdownMenuContent>
                                 </DropdownMenu>
@@ -1116,7 +1116,7 @@ const dialogCommandOpen = ref(false);
                                 @click="dialogSaveOpen = true"
                             >
                                 <IconSave class="size-4" />
-                                {{ $t('Save as new theme') }}
+                                {{ $t('Save as') }}
                             </button>
                             <Tooltip>
                                 <TooltipTrigger as-child>
diff --git a/tests/e2e/themes-config.spec.ts b/tests/e2e/themes-config.spec.ts
index 02b1034..7ea6f7a 100644
--- a/tests/e2e/themes-config.spec.ts
+++ b/tests/e2e/themes-config.spec.ts
@@ -3,26 +3,25 @@ import { expect, test } from '@e2e/fixtures';
 test.describe('Themes config flags', () => {
     test.beforeEach(async ({ laravel }) => {
         await laravel.callFunction('Modules\\Themes\\Tests\\Support\\ThemesTestHelper::cleanUserThemes');
-        // Restore defaults after any config overrides
-        await laravel.callFunction('Modules\\Themes\\Tests\\Support\\ThemesTestHelper::resetConfig');
+        await laravel.config('themes.enabled', true);
     });
 
     test.afterEach(async ({ laravel }) => {
         await laravel.callFunction('Modules\\Themes\\Tests\\Support\\ThemesTestHelper::cleanUserThemes');
-        await laravel.callFunction('Modules\\Themes\\Tests\\Support\\ThemesTestHelper::resetConfig');
+        await laravel.config('themes.enabled', true);
     });
 
     // ── themes.enabled ────────────────────────────────────────────────────────
 
     test('theme panel trigger is hidden when themes.enabled is false', async ({ page, laravel }) => {
-        await laravel.callFunction('Modules\\Themes\\Tests\\Support\\ThemesTestHelper::setEnabled', [false]);
+        await laravel.config('themes.enabled', false);
         await page.goto('/');
 
         await expect(page.getByTestId('theme-panel-trigger')).not.toBeVisible();
     });
 
     test('theme panel trigger is visible when themes.enabled is true', async ({ page, laravel }) => {
-        await laravel.callFunction('Modules\\Themes\\Tests\\Support\\ThemesTestHelper::setEnabled', [true]);
+        await laravel.config('themes.enabled', true);
         await page.goto('/');
 
         await expect(page.getByTestId('theme-panel-trigger')).toBeVisible();