From db050849b65e10fc94dd0a84639c2fdfe2dfc41c Mon Sep 17 00:00:00 2001
From: Mary Kate Fain <mk@marykatefain.com>
Date: Wed, 25 Feb 2026 20:26:08 -0600
Subject: [PATCH] Reorganize theme editor header: Use/Active top-right,
 text-link actions below

---
 src/pages/ThemeBuilderPage.tsx | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/pages/ThemeBuilderPage.tsx b/src/pages/ThemeBuilderPage.tsx
index b21129eb..c1b66842 100644
--- a/src/pages/ThemeBuilderPage.tsx
+++ b/src/pages/ThemeBuilderPage.tsx
@@ -403,14 +403,12 @@ export function ThemeBuilderPage() {
               </div>
             )}
           </div>
-        </div>
-        <div className="flex items-center gap-2 px-4 pb-3">
           {activeEditingTheme && (
             currentTheme === 'custom' && savedCustomTheme && JSON.stringify(savedCustomTheme) === JSON.stringify(tokens) ? (
-              <Button variant="outline" size="sm" disabled className="text-primary border-primary/30">
-                <Check className="size-4 mr-1.5" />
+              <Badge variant="outline" className="text-primary border-primary/30 gap-1 shrink-0">
+                <Check className="size-3" />
                 Active
-              </Button>
+              </Badge>
             ) : (
               <Button variant="outline" size="sm" onClick={() => { applyCustomTheme(tokens); toast({ title: 'Theme applied' }); }}>
                 <Palette className="size-4 mr-1.5" />
@@ -418,14 +416,24 @@ export function ThemeBuilderPage() {
               </Button>
             )
           )}
-          <Button variant="outline" size="sm" onClick={togglePreview}>
-            <Eye className="size-4 mr-1.5" />
+        </div>
+        <div className="flex items-center gap-2 px-4 pb-2.5">
+          <button
+            onClick={togglePreview}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
+          >
+            <Eye className="size-3.5" />
             {previewing ? 'Revert' : 'Preview'}
-          </Button>
-          <Button size="sm" onClick={handleSave} disabled={isPublishing}>
-            <Save className="size-4 mr-1.5" />
+          </button>
+          <span className="text-border">|</span>
+          <button
+            onClick={handleSave}
+            disabled={isPublishing}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 disabled:opacity-50"
+          >
+            <Save className="size-3.5" />
             {isPublishing ? 'Saving...' : activeEditingTheme ? 'Update' : 'Save'}
-          </Button>
+          </button>
         </div>
       </div>