fix: red warning bar instead of amber when navigating with unsaved changes

This commit is contained in:
Usman Baig
2026-03-25 21:05:52 +01:00
parent 1c21bf5ff6
commit 43005fb9ee
4 changed files with 12 additions and 12 deletions

View File

@@ -227,15 +227,15 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, hasPendingAction
{isDirty && ( {isDirty && (
<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 ${ <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 hasPendingAction
? 'bg-amber-950/90 border-amber-800/60' ? 'bg-red-950/90 border-red-800/60'
: 'bg-neutral-950/90 border-neutral-800' : 'bg-neutral-950/90 border-neutral-800'
}`}> }`}>
<span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}> <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'} {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{hasPendingAction && ( {hasPendingAction && (
<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"> <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
Discard Discard
</button> </button>
)} )}

View File

@@ -181,15 +181,15 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction
{isDirty && ( {isDirty && (
<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 ${ <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 hasPendingAction
? 'bg-amber-950/90 border-amber-800/60' ? 'bg-red-950/90 border-red-800/60'
: 'bg-neutral-950/90 border-neutral-800' : 'bg-neutral-950/90 border-neutral-800'
}`}> }`}>
<span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}> <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'} {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{hasPendingAction && ( {hasPendingAction && (
<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"> <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
Discard Discard
</button> </button>
)} )}

View File

@@ -254,15 +254,15 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction
{isDirty && ( {isDirty && (
<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 ${ <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 hasPendingAction
? 'bg-amber-950/90 border-amber-800/60' ? 'bg-red-950/90 border-red-800/60'
: 'bg-neutral-950/90 border-neutral-800' : 'bg-neutral-950/90 border-neutral-800'
}`}> }`}>
<span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}> <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'} {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{hasPendingAction && ( {hasPendingAction && (
<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"> <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
Discard Discard
</button> </button>
)} )}

View File

@@ -150,15 +150,15 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAct
{isDirty && ( {isDirty && (
<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 ${ <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 hasPendingAction
? 'bg-amber-950/90 border-amber-800/60' ? 'bg-red-950/90 border-red-800/60'
: 'bg-neutral-950/90 border-neutral-800' : 'bg-neutral-950/90 border-neutral-800'
}`}> }`}>
<span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}> <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'} {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{hasPendingAction && ( {hasPendingAction && (
<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"> <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
Discard Discard
</button> </button>
)} )}