From 02dd46e9d76ca46114eee6db8d840e500016bb3d Mon Sep 17 00:00:00 2001
From: "Simeon.Schecter" <simeon.schecter@mac.mynetworksettings.com>
Date: Mon, 9 Mar 2026 23:26:57 -0400
Subject: [PATCH] style: modals use bg-slate-800 to pop above dark overlay

Slate-925 panels are nearly invisible against black/60 overlays.
Modals need to be clearly visible, so they use slate-800.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/CinePromptStudio.jsx | 4 ++--
 frontend/src/components/ProjectsTab.jsx      | 4 ++--
 frontend/src/components/VideoPlayer.jsx      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/CinePromptStudio.jsx b/frontend/src/components/CinePromptStudio.jsx
index d8d43ab..a1da599 100644
--- a/frontend/src/components/CinePromptStudio.jsx
+++ b/frontend/src/components/CinePromptStudio.jsx
@@ -2030,7 +2030,7 @@ Return ONLY the final prompt text. No markdown, no preamble, no "Here is your pr
           {/* Create/Edit Preset Modal */}
           {showPresetModal && (
             <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
-              <div className="bg-slate-925 rounded w-full max-w-md p-6 space-y-4">
+              <div className="bg-slate-800 rounded w-full max-w-md p-6 space-y-4">
                 <div className="flex items-center justify-between">
                   <h3 className="text-lg font-normal text-slate-200">
                     {editingPreset ? 'Edit Preset' : 'Create New Preset'}
@@ -2138,7 +2138,7 @@ Return ONLY the final prompt text. No markdown, no preamble, no "Here is your pr
           {/* Manage Presets Modal */}
           {showManagePresetsModal && (
             <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
-              <div className="bg-slate-925 rounded w-full max-w-lg p-6 space-y-4">
+              <div className="bg-slate-800 rounded w-full max-w-lg p-6 space-y-4">
                 <div className="flex items-center justify-between">
                   <h3 className="text-lg font-normal text-slate-200">Manage Custom Presets</h3>
                   <button onClick={() => setShowManagePresetsModal(false)} className="text-slate-500 hover:text-slate-300">
diff --git a/frontend/src/components/ProjectsTab.jsx b/frontend/src/components/ProjectsTab.jsx
index fc0a380..207147b 100644
--- a/frontend/src/components/ProjectsTab.jsx
+++ b/frontend/src/components/ProjectsTab.jsx
@@ -929,7 +929,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
               {/* Import from Backend Modal */}
               {showImportModal && (
                 <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-                  <div className="bg-slate-925 rounded p-6 max-w-4xl w-full max-h-[80vh] overflow-y-auto">
+                  <div className="bg-slate-800 rounded p-6 max-w-4xl w-full max-h-[80vh] overflow-y-auto">
                     <div className="flex items-center justify-between mb-4">
                       <h2 className="text-xl font-normal text-slate-200">Import from Backend</h2>
                       <button
@@ -1452,7 +1452,7 @@ const ProjectsTab = ({ onProjectSelect, activeProjectId, onRerunVideo, onEditInI
             </div>
 
             {/* Content */}
-            <div className="bg-slate-925 rounded overflow-hidden">
+            <div className="bg-slate-800 rounded overflow-hidden">
               {previewItem.type === 'image' ? (
                 <img
                   src={
diff --git a/frontend/src/components/VideoPlayer.jsx b/frontend/src/components/VideoPlayer.jsx
index b94895e..c0c0110 100644
--- a/frontend/src/components/VideoPlayer.jsx
+++ b/frontend/src/components/VideoPlayer.jsx
@@ -415,7 +415,7 @@ const VideoPlayer = ({ src, onFrameExtract, onSaveToProject, className = '', aut
       {/* Frame preview modal */}
       {showFramePreview && extractedFrame && (
         <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-8" onClick={() => setShowFramePreview(false)}>
-          <div className="bg-slate-925 rounded p-6 max-w-2xl w-full" onClick={(e) => e.stopPropagation()}>
+          <div className="bg-slate-800 rounded p-6 max-w-2xl w-full" onClick={(e) => e.stopPropagation()}>
             <h3 className="text-lg font-normal text-slate-200 mb-4 flex items-center gap-2">
               <Image className="w-5 h-5 text-cinema-gold" />
               Extracted Frame