From b7230e747b5ceb204b5fd0560d4ce558f036d85c Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Tue, 10 Dec 2024 18:24:56 +0200
Subject: [PATCH] fix(Modal): animation enhancements

---
 .../components/Modal/Modal/Modal.module.scss  |  2 +-
 .../core/src/components/Modal/Modal/Modal.tsx |  2 +-
 .../Modal/utils/animationVariants.ts          | 53 ++++++++++++++-----
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/components/Modal/Modal/Modal.module.scss b/packages/core/src/components/Modal/Modal/Modal.module.scss
index 4da8d1afa2..ea27b4abdd 100644
--- a/packages/core/src/components/Modal/Modal/Modal.module.scss
+++ b/packages/core/src/components/Modal/Modal/Modal.module.scss
@@ -2,7 +2,7 @@
   --monday-modal-z-index: 10000;
   position: fixed;
   inset: 0;
-  background-color: rgba(41, 47, 76, 0.7);
+  background-color: var(--color-surface);
   z-index: var(--monday-modal-z-index);
 }
 
diff --git a/packages/core/src/components/Modal/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal/Modal.tsx
index 0a0a7fae54..d40514e829 100644
--- a/packages/core/src/components/Modal/Modal/Modal.tsx
+++ b/packages/core/src/components/Modal/Modal/Modal.tsx
@@ -98,7 +98,7 @@ const Modal = forwardRef(
                   <motion.div
                     ref={overlayRef}
                     variants={modalAnimationOverlayVariants}
-                    initial={false}
+                    initial="initial"
                     animate="enter"
                     exit="exit"
                     data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
diff --git a/packages/core/src/components/Modal/utils/animationVariants.ts b/packages/core/src/components/Modal/utils/animationVariants.ts
index 3aea7d75c2..c35eb79e2d 100644
--- a/packages/core/src/components/Modal/utils/animationVariants.ts
+++ b/packages/core/src/components/Modal/utils/animationVariants.ts
@@ -2,26 +2,35 @@ import { Variants } from "framer-motion";
 import { RefObject } from "react";
 
 export const modalAnimationOverlayVariants: Variants = {
+  initial: {
+    opacity: 0
+  },
   enter: {
-    opacity: 1,
+    opacity: 0.7,
     transition: {
-      duration: 0.2,
+      duration: 0.1,
       ease: [0.0, 0.0, 0.4, 1.0]
     }
   },
   exit: {
     opacity: 0,
     transition: {
-      duration: 0.15,
-      ease: [0.0, 0.0, 0.4, 1.0]
+      duration: 0.1,
+      ease: [0.6, 0.0, 1.0, 1.0]
     }
   }
 };
 
 export const modalAnimationCenterPopVariants: Variants = {
+  initial: {
+    opacity: 1,
+    scale: 1,
+    x: "-50%",
+    y: "-50%"
+  },
   enter: {
     opacity: [0, 1, 1],
-    scale: [0.65, 1, 1],
+    scale: [0.8, 1, 1],
     x: "-50%",
     y: "-50%",
     transition: {
@@ -32,30 +41,46 @@ export const modalAnimationCenterPopVariants: Variants = {
   },
   exit: {
     opacity: [1, 1, 0],
-    scale: [1, 1, 0.65],
+    scale: [1, 1, 0.8],
     x: "-50%",
     y: "-50%",
     transition: {
       duration: 0.1,
-      ease: [0.0, 0.0, 0.4, 1.0],
+      ease: [0.6, 0.0, 1.0, 1.0],
       times: [0, 0.5, 1]
     }
   }
 };
 
 export const modalAnimationAnchorPopVariants: Variants = {
+  initial: (anchorElementRef: RefObject<HTMLElement>) => {
+    const anchorRect = anchorElementRef.current.getBoundingClientRect();
+    const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+    const anchorCenterY = anchorRect.top + anchorRect.height / 2;
+
+    const x = `calc(-50% + ${anchorCenterX}px)`;
+    const y = `calc(-50% + ${anchorCenterY}px)`;
+
+    return {
+      opacity: 0,
+      scale: 0.8,
+      top: "50%",
+      left: "50%",
+      x,
+      y
+    };
+  },
   enter: {
-    opacity: [0, 1, 1],
-    scale: [0.65, 0.65, 1],
+    opacity: [0, 0, 1],
+    scale: [0.8, 0.8, 1],
     top: "50%",
     left: "50%",
     x: "-50%",
     y: "-50%",
     transition: {
-      delay: 0.05,
       duration: 0.2,
       ease: [0.0, 0.0, 0.4, 1.0],
-      times: [0, 0.2, 1]
+      times: [0, 0.4, 1]
     }
   },
   exit: (anchorElementRef: RefObject<HTMLElement>) => {
@@ -67,8 +92,8 @@ export const modalAnimationAnchorPopVariants: Variants = {
     const y = `calc(-50% + ${anchorCenterY}px)`;
 
     return {
-      opacity: [1, 1, 0],
-      scale: [1, 1, 0.75],
+      opacity: [1, 0, 0],
+      scale: [1, 0.8, 0.8],
       top: 0,
       left: 0,
       x,
@@ -76,7 +101,7 @@ export const modalAnimationAnchorPopVariants: Variants = {
       transition: {
         duration: 0.15,
         ease: [0.6, 0.0, 1.0, 1.0],
-        times: [0, 0.33, 1]
+        times: [0, 0.6, 1]
       }
     };
   }