From 54e7a6d95ad86458ac42278c97d975e8893c00a6 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Tue, 18 Mar 2025 04:25:21 +0100
Subject: [PATCH] Update image-viewer-modal.tsx

---
 components/modals/image-viewer-modal.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/components/modals/image-viewer-modal.tsx b/components/modals/image-viewer-modal.tsx
index 8a4cad4..c417404 100644
--- a/components/modals/image-viewer-modal.tsx
+++ b/components/modals/image-viewer-modal.tsx
@@ -1,5 +1,5 @@
 import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useEffect } from "react";
 
@@ -45,7 +45,17 @@ export function ImageViewerModal({ isOpen, onClose, imageUrl, onNavigate }: Imag
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="p-0 border-none bg-black/80 max-w-[90vw] max-h-[90vh] [&>button]:text-white [&>button]:hover:text-gray-300 [&>button]:hover:bg-white/10 [&>button]:top-4 [&>button]:right-4">
+      <DialogContent className="p-0 border-none bg-black/90 max-w-[90vw] max-h-[90vh] overflow-hidden">
+        {/* Close button */}
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClose}
+          className="absolute top-4 right-4 z-50 bg-black/40 hover:bg-black/60 text-white rounded-full border border-white/20"
+        >
+          <X size={18} />
+        </Button>
+
         <div className="relative w-[90vw] h-[90vh] mx-auto">
           {/* Navigation buttons */}
           {onNavigate && (
@@ -53,18 +63,18 @@ export function ImageViewerModal({ isOpen, onClose, imageUrl, onNavigate }: Imag
               <Button
                 variant="ghost"
                 size="icon"
-                className="absolute left-4 top-1/2 -translate-y-1/2 z-50 text-white hover:text-gray-300 hover:bg-white/10 w-12 h-12"
+                className="absolute left-4 top-1/2 -translate-y-1/2 z-50 bg-black/40 hover:bg-black/60 text-white rounded-full w-10 h-10 border border-white/20"
                 onClick={handleNavigation('prev')}
               >
-                <ChevronLeft size={32} />
+                <ChevronLeft size={24} />
               </Button>
               <Button
                 variant="ghost"
                 size="icon"
-                className="absolute right-4 top-1/2 -translate-y-1/2 z-50 text-white hover:text-gray-300 hover:bg-white/10 w-12 h-12"
+                className="absolute right-4 top-1/2 -translate-y-1/2 z-50 bg-black/40 hover:bg-black/60 text-white rounded-full w-10 h-10 border border-white/20"
                 onClick={handleNavigation('next')}
               >
-                <ChevronRight size={32} />
+                <ChevronRight size={24} />
               </Button>
             </>
           )}