From 864579de84c6faffa5f361f714b2f03f375bf46b Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Sat, 7 Feb 2026 20:33:48 +0000
Subject: [PATCH] feat: Enhance ItemSettingsModal with smoother opening and
 closing transitions

---
 .../components/Modals/ItemSettingsModal.jsx   |  2 +-
 .../components/Modals/ItemSettingsModal.scss  | 24 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/features/marketplace/components/Modals/ItemSettingsModal.jsx b/src/features/marketplace/components/Modals/ItemSettingsModal.jsx
index 12d99f98..1929ecdd 100644
--- a/src/features/marketplace/components/Modals/ItemSettingsModal.jsx
+++ b/src/features/marketplace/components/Modals/ItemSettingsModal.jsx
@@ -184,7 +184,7 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
 
   return (
     <Modal
-      closeTimeoutMS={100}
+      closeTimeoutMS={300}
       onRequestClose={onClose}
       isOpen={isOpen}
       className="Modal itemSettingsModal"
diff --git a/src/features/marketplace/components/Modals/ItemSettingsModal.scss b/src/features/marketplace/components/Modals/ItemSettingsModal.scss
index 46c055d7..d7c8817a 100644
--- a/src/features/marketplace/components/Modals/ItemSettingsModal.scss
+++ b/src/features/marketplace/components/Modals/ItemSettingsModal.scss
@@ -8,10 +8,34 @@
   background: var(--modal-background, #1a1a1a);
   border-radius: 12px;
   padding: 0;
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+  &.ReactModal__Content--after-open {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &.ReactModal__Content--before-close {
+    opacity: 0;
+    transform: scale(0.95);
+  }
 }
 
 .itemSettingsOverlay {
+  opacity: 0;
+  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   background-color: rgb(0 0 0 / 70%);
+
+  &.ReactModal__Overlay--after-open {
+    opacity: 1;
+  }
+
+  &.ReactModal__Overlay--before-close {
+    opacity: 0;
+  }
 }
 
 .itemSettings-header {