From 8814423fa60ff6a3c4ff162c1e19aa4c2957c5d3 Mon Sep 17 00:00:00 2001
From: nmemmert <67961292+nmemmert@users.noreply.github.com>
Date: Tue, 14 Jul 2026 08:08:26 -0400
Subject: [PATCH] =?UTF-8?q?Fix=20modal=20overlays=20=E2=80=94=20replace=20?=
 =?UTF-8?q?deprecated=20Tailwind=20v4=20bg-opacity=20syntax?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All 11 modal backdrop divs used `bg-black bg-opacity-50` which Tailwind v4
dropped, causing solid-black overlays. Replaced with `bg-black/50` across
AuthModal, AccountManagement, EnvelopeCreate, EnvelopeEdit, GetPaid,
SetupWizard, TransactionEdit, and page.tsx.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/page.tsx                     | 2 +-
 src/components/AccountManagement.tsx | 2 +-
 src/components/AuthModal.tsx         | 2 +-
 src/components/EnvelopeCreate.tsx    | 2 +-
 src/components/EnvelopeEdit.tsx      | 2 +-
 src/components/GetPaid.tsx           | 4 ++--
 src/components/SetupWizard.tsx       | 6 +++---
 src/components/TransactionEdit.tsx   | 2 +-
 8 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b5e740a..b3f1102 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1153,7 +1153,7 @@ export default function BudgetDashboard() {
       {showAuthModal && <AuthModal isOpen={showAuthModal} onClose={() => setShowAuthModal(false)} onAuthSuccess={handleAuthSuccess} />}
       {showSetupWizard && <SetupWizard onComplete={handleSetupComplete} onSkip={() => setShowSetupWizard(false)} userId={user?.userId || ''} />}
       {showGetPaidModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div onClick={(e) => e.stopPropagation()} className="w-full">
             <GetPaid
               accounts={accounts}
diff --git a/src/components/AccountManagement.tsx b/src/components/AccountManagement.tsx
index e0ecb70..a986a1b 100644
--- a/src/components/AccountManagement.tsx
+++ b/src/components/AccountManagement.tsx
@@ -218,7 +218,7 @@ export default function AccountManagement({ accounts, onAccountAdd, onAccountUpd
 
       {/* Add/Edit Account Modal */}
       {showAddForm && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-lg p-6 max-w-md w-full">
             <h3 className="text-xl font-bold text-gray-900 mb-4">
               {editingAccount ? 'Edit Account' : 'Add New Account'}
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index 49b1801..d3c16f4 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -53,7 +53,7 @@ export default function AuthModal({ isOpen, onClose, onAuthSuccess }: AuthModalP
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
       <div className="bg-white rounded-lg p-8 max-w-md w-full shadow-xl">
         <div className="flex justify-between items-center mb-6">
           <h2 className="text-2xl font-bold text-gray-900">
diff --git a/src/components/EnvelopeCreate.tsx b/src/components/EnvelopeCreate.tsx
index 8e1e7d3..c91cf61 100644
--- a/src/components/EnvelopeCreate.tsx
+++ b/src/components/EnvelopeCreate.tsx
@@ -81,7 +81,7 @@ export default function EnvelopeCreate({ onEnvelopeCreated, onCancel, accounts }
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
       <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
         <h3 className="text-lg font-semibold text-gray-900 mb-4">Create New Envelope</h3>
 
diff --git a/src/components/EnvelopeEdit.tsx b/src/components/EnvelopeEdit.tsx
index 95ed9e9..eae746d 100644
--- a/src/components/EnvelopeEdit.tsx
+++ b/src/components/EnvelopeEdit.tsx
@@ -102,7 +102,7 @@ export default function EnvelopeEdit({ envelope, onEnvelopeUpdated, onEnvelopeDe
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
       <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
         <h3 className="text-lg font-semibold text-gray-900 mb-4">Edit Envelope</h3>
 
diff --git a/src/components/GetPaid.tsx b/src/components/GetPaid.tsx
index d3dd2ae..48c7cbd 100644
--- a/src/components/GetPaid.tsx
+++ b/src/components/GetPaid.tsx
@@ -267,7 +267,7 @@ export default function GetPaid({
       )}
 
       {isOpen && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
             <h3 className="text-xl font-bold text-gray-900 mb-4">Record Paycheck</h3>
 
@@ -524,7 +524,7 @@ export default function GetPaid({
       )}
 
       {showPreview && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
             <h3 className="text-xl font-bold text-gray-900 mb-4">Confirm Paycheck Allocation</h3>
 
diff --git a/src/components/SetupWizard.tsx b/src/components/SetupWizard.tsx
index 55acbf7..2b7fe67 100644
--- a/src/components/SetupWizard.tsx
+++ b/src/components/SetupWizard.tsx
@@ -456,7 +456,7 @@ export default function SetupWizard({ onComplete, onSkip, userId }: SetupWizardP
 
       {/* Add Account Modal */}
       {showAddAccount && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-lg p-6 max-w-md w-full">
             <h3 className="text-xl font-bold text-gray-900 mb-4">Add Account</h3>
 
@@ -674,7 +674,7 @@ export default function SetupWizard({ onComplete, onSkip, userId }: SetupWizardP
 
       {/* Add Envelope Modal */}
       {showAddEnvelope && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-lg p-6 max-w-md w-full">
             <h3 className="text-xl font-bold text-gray-900 mb-4">Add Envelope</h3>
 
@@ -1031,7 +1031,7 @@ export default function SetupWizard({ onComplete, onSkip, userId }: SetupWizardP
   );
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" onClick={handleBackdropClick}>
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={handleBackdropClick}>
       <div className="bg-white rounded-lg shadow-xl p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
         {/* Close button - only on welcome step, or if closing from welcome, create demo data */}
         {currentStep === 'welcome' && (
diff --git a/src/components/TransactionEdit.tsx b/src/components/TransactionEdit.tsx
index 1d59a02..d335205 100644
--- a/src/components/TransactionEdit.tsx
+++ b/src/components/TransactionEdit.tsx
@@ -49,7 +49,7 @@ export default function TransactionEdit({ transaction, envelopes, accounts, onSa
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
       <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
         <h3 className="text-lg font-semibold text-gray-900 mb-4">Edit Transaction</h3>