style: change image modal style

wanted-fork-fork · Nov 30, 2024 · 893e5a2 · 893e5a2
1 parent fea256d
commit 893e5a2
Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/src/shared/ui/ImageModal/ImageModal.module.css b/src/shared/ui/ImageModal/ImageModal.module.css
@@ -10,7 +10,15 @@
 .ImageModalDim {
     width: 100%;
     height: 100%;
-    background-color: #000000;
+    background-color: var(--color-neutral-900);
+}
+
+.ImageModalHeader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
 }
 
 .ImageModalWrapper {
@@ -39,7 +47,4 @@
 }
 
 .ImageModalCloseButton {
-    position: absolute;
-    top: 0;
-    right: 0;
 }
diff --git a/src/shared/ui/ImageModal/ImageModal.tsx b/src/shared/ui/ImageModal/ImageModal.tsx
@@ -17,6 +17,17 @@ export const ImageModal = ({ showModal, closeModal, closeOnClickOutside = true,
         <Portal>
           <div className={styles.ImageModal}>
             <div className={styles.ImageModalDim} onClick={closeOnClickOutside ? closeModal : undefined} />
+            <div className={styles.ImageModalHeader}>
+              <Button
+                color={'neutral'}
+                variant={'ghost'}
+                widthType={'hug'}
+                className={styles.ImageModalCloseButton}
+                onClick={closeModal}
+              >
+                <Close color={'#fff'} />
+              </Button>
+            </div>
             <div className={styles.ImageModalWrapper}>
               <img
                 className={styles.ImageModalImg}
@@ -26,15 +37,6 @@ export const ImageModal = ({ showModal, closeModal, closeOnClickOutside = true,
                 {...props}
               />
             </div>
-            <Button
-              color={'neutral'}
-              variant={'ghost'}
-              widthType={'hug'}
-              className={styles.ImageModalCloseButton}
-              onClick={closeModal}
-            >
-              <Close />
-            </Button>
           </div>
         </Portal>
       )}