fix modal

esek · Nov 1, 2023 · 9c72348 · 9c72348
1 parent e931116
commit 9c72348
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 45 deletions.
diff --git a/web/src/components/layout/modal.tsx b/web/src/components/layout/modal.tsx
@@ -41,48 +41,55 @@ const Modal: React.FC<Props> = ({
     onChange?.(false);
   };
 
-  return createPortal(
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      role="dialog"
-    >
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1, transition: { duration: 0.2, ease: 'linear' } }}
-        exit={{ opacity: 0 }}
-        className="absolute inset-0 bg-gray-800/50"
-        onClick={handleClose}
-      ></motion.div>
-
-      <motion.div
-        initial={{ y: '-20px', opacity: 0 }}
-        animate={{
-          y: 0,
-          opacity: 1,
-          transition: { duration: 0.3, ease: 'backOut' },
-        }}
-        className="relative w-full max-w-sm bg-primary p-6 text-secondary shadow-sm shadow-secondary/10"
-      >
-        <header className="flex items-center justify-between text-lg font-semibold">
-          <span>{title}</span>
-
-          <button
-            className="transition-transform hover:scale-[1.1] active:scale-[0.9]"
+  return (
+    <>
+      {createPortal(
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center"
+          role="dialog"
+        >
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: 1,
+              transition: { duration: 0.2, ease: 'linear' },
+            }}
+            exit={{ opacity: 0 }}
+            className="absolute inset-0 bg-gray-800/50"
             onClick={handleClose}
-            aria-label="Close modal"
+          ></motion.div>
+
+          <motion.div
+            initial={{ y: '-20px', opacity: 0 }}
+            animate={{
+              y: 0,
+              opacity: 1,
+              transition: { duration: 0.3, ease: 'backOut' },
+            }}
+            className="relative w-full max-w-sm bg-primary p-6 text-secondary shadow-sm shadow-secondary/10"
           >
-            <FiX />
-          </button>
-        </header>
+            <header className="flex items-center justify-between text-lg font-semibold">
+              <span>{title}</span>
+
+              <button
+                className="transition-transform hover:scale-[1.1] active:scale-[0.9]"
+                onClick={handleClose}
+                aria-label="Close modal"
+              >
+                <FiX />
+              </button>
+            </header>
 
-        <main>{children}</main>
+            <main>{children}</main>
 
-        <footer className="mt-2 text-right">
-          <Btn onClick={handleClose}>{t('close')}</Btn>
-        </footer>
-      </motion.div>
-    </div>,
-    document.getElementById('modal-root')!
+            <footer className="mt-2 text-right">
+              <Btn onClick={handleClose}>{t('close')}</Btn>
+            </footer>
+          </motion.div>
+        </div>,
+        document.getElementById('modal-root')!,
+      )}
+    </>
   );
 };
 

diff --git a/web/yarn.lock b/web/yarn.lock
@@ -1770,14 +1770,9 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001449:
-  version "1.0.30001478"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001478.tgz#0ef8a1cf8b16be47a0f9fc4ecfc952232724b32a"
-  integrity sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw==
-
-caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
+caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
   version "1.0.30001559"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz#95a982440d3d314c471db68d02664fb7536c5a30"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz"
   integrity sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==
 
 chalk@^2.0.0: