From 2b8d342e75f31341b54e28c7484a06bd9d0e772f Mon Sep 17 00:00:00 2001
From: Desktop <desktop@igny8.com>
Date: Thu, 13 Nov 2025 00:35:50 +0500
Subject: [PATCH] Revert "1234"

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

diff --git a/frontend/src/pages/Writer/Images.tsx b/frontend/src/pages/Writer/Images.tsx
index 97b1778d..e4f0f61e 100644
--- a/frontend/src/pages/Writer/Images.tsx
+++ b/frontend/src/pages/Writer/Images.tsx
@@ -569,28 +569,22 @@ export default function Images() {
         isLoading={isUpdatingStatus}
       />
 
-      {/* Lightbox - Use same background as Modal */}
+      {/* Lightbox */}
       {lightboxOpen && (
-        <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]"
+        <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
             onClick={() => setLightboxOpen(false)}
-          ></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"
-            >
+            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"
+          >
             <svg
               width="24"
               height="24"
diff --git a/frontend/src/styles/igny8-colors.css b/frontend/src/styles/igny8-colors.css
index 3b696ce5..2d31f1c2 100644
--- a/frontend/src/styles/igny8-colors.css
+++ b/frontend/src/styles/igny8-colors.css
@@ -230,6 +230,22 @@
 .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)
    =================================================================== */