From 1c21bf5ff684e0c5c4a6418dc50613e997fc01e4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:02:00 +0100
Subject: [PATCH] fix: amber warning style on sticky bar when navigating with
 unsaved changes

---
 components/settings/unified/tabs/SiteBotSpamTab.tsx  | 12 +++++++++---
 components/settings/unified/tabs/SiteGeneralTab.tsx  | 12 +++++++++---
 components/settings/unified/tabs/SitePrivacyTab.tsx  | 12 +++++++++---
 .../settings/unified/tabs/SiteVisibilityTab.tsx      | 12 +++++++++---
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index 3d7eda4..b92954a 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -225,11 +225,17 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, hasPendingAction
 
       {/* Sticky save bar */}
       {isDirty && (
-        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+          hasPendingAction
+            ? 'bg-amber-950/90 border-amber-800/60'
+            : 'bg-neutral-950/90 border-neutral-800'
+        }`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+          </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 6634483..2752960 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -179,11 +179,17 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction
 
       {/* Sticky save bar */}
       {isDirty && (
-        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+          hasPendingAction
+            ? 'bg-amber-950/90 border-amber-800/60'
+            : 'bg-neutral-950/90 border-neutral-800'
+        }`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+          </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 1708748..1b6b46f 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -252,11 +252,17 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction
 
       {/* Sticky save bar — only visible when dirty */}
       {isDirty && (
-        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+          hasPendingAction
+            ? 'bg-amber-950/90 border-amber-800/60'
+            : 'bg-neutral-950/90 border-neutral-800'
+        }`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+          </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index 441a064..30790f6 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -148,11 +148,17 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAct
 
       {/* Sticky save bar */}
       {isDirty && (
-        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+          hasPendingAction
+            ? 'bg-amber-950/90 border-amber-800/60'
+            : 'bg-neutral-950/90 border-neutral-800'
+        }`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+          </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}