From 621ee60521d35b6776614f1952e5c499f24cb546 Mon Sep 17 00:00:00 2001
From: Desktop <desktop@igny8.com>
Date: Thu, 13 Nov 2025 00:26:05 +0500
Subject: [PATCH] 1234

---
 frontend/src/pages/Writer/Images.tsx | 34 ++++++++++++++++------------
 frontend/src/styles/igny8-colors.css | 16 -------------
 2 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/frontend/src/pages/Writer/Images.tsx b/frontend/src/pages/Writer/Images.tsx
index e4f0f61e..97b1778d 100644
--- a/frontend/src/pages/Writer/Images.tsx
+++ b/frontend/src/pages/Writer/Images.tsx
@@ -569,22 +569,28 @@ export default function Images() {
         isLoading={isUpdatingStatus}
       />
 
-      {/* Lightbox */}
+      {/* Lightbox - Use same background as Modal */}
       {lightboxOpen && (
-        <div className="fixed inset-0 z-[99999]">
-          <Lightbox
-            open={lightboxOpen}
-            close={() => setLightboxOpen(false)}
-            index={lightboxIndex}
-            slides={lightboxSlides}
-            on={{ view: ({ index }) => setLightboxIndex(index) }}
-          />
-          {/* Custom Close Button - Match Modal Style */}
-          <button
+        <div className="fixed inset-0 z-[999999] flex items-center justify-center">
+          {/* Modal background - same as ImageQueueModal */}
+          <div
+            className="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"
             onClick={() => setLightboxOpen(false)}
-            className="absolute right-3 top-3 z-[999999] flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
-            aria-label="Close lightbox"
-          >
+          ></div>
+          <div className="relative z-[9999999]">
+            <Lightbox
+              open={lightboxOpen}
+              close={() => setLightboxOpen(false)}
+              index={lightboxIndex}
+              slides={lightboxSlides}
+              on={{ view: ({ index }) => setLightboxIndex(index) }}
+            />
+            {/* Custom Close Button - Match Modal Style */}
+            <button
+              onClick={() => setLightboxOpen(false)}
+              className="absolute right-3 top-3 z-[99999999] flex h-9.5 w-9.5 items-center justify-center rounded-full bg-gray-100 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white sm:right-6 sm:top-6 sm:h-11 sm:w-11"
+              aria-label="Close lightbox"
+            >
             <svg
               width="24"
               height="24"
diff --git a/frontend/src/styles/igny8-colors.css b/frontend/src/styles/igny8-colors.css
index 2d31f1c2..3b696ce5 100644
--- a/frontend/src/styles/igny8-colors.css
+++ b/frontend/src/styles/igny8-colors.css
@@ -230,22 +230,6 @@
 .igny8-badge-danger { background: var(--igny8-red); }
 .igny8-badge-purple { background: var(--igny8-purple); }
 
-/* ===================================================================
-   LIGHTBOX STYLES - Match Modal Background
-   =================================================================== */
-/* Use same background as modals: bg-gray-400/50 backdrop-blur-[32px] */
-.yarl__container {
-  background: rgba(156, 163, 175, 0.5) !important; /* gray-400/50 */
-  backdrop-filter: blur(32px) !important;
-  -webkit-backdrop-filter: blur(32px) !important;
-}
-
-.yarl__backdrop {
-  background: rgba(156, 163, 175, 0.5) !important; /* gray-400/50 */
-  backdrop-filter: blur(32px) !important;
-  -webkit-backdrop-filter: blur(32px) !important;
-}
-
 /* ===================================================================
    COMPACT LAYOUT STYLES (Global - Apply to all pages)
    =================================================================== */