From 95640b82424fd57f577d5c6244c2957bcd8ceafd Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 19 Aug 2022 11:38:14 +0530
Subject: [PATCH] Update dialog animation

---
 src/app/atoms/modal/RawModal.jsx  |  1 -
 src/app/atoms/modal/RawModal.scss | 55 +++++++++++++++++--------------
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/app/atoms/modal/RawModal.jsx b/src/app/atoms/modal/RawModal.jsx
index 306d7d1b..450be0e0 100644
--- a/src/app/atoms/modal/RawModal.jsx
+++ b/src/app/atoms/modal/RawModal.jsx
@@ -42,7 +42,6 @@ function RawModal({
       shouldCloseOnEsc={closeFromOutside}
       shouldCloseOnOverlayClick={closeFromOutside}
       shouldReturnFocusAfterClose={false}
-      closeTimeoutMS={300}
     >
       {children}
     </Modal>
diff --git a/src/app/atoms/modal/RawModal.scss b/src/app/atoms/modal/RawModal.scss
index 72a64d76..4da7d6c9 100644
--- a/src/app/atoms/modal/RawModal.scss
+++ b/src/app/atoms/modal/RawModal.scss
@@ -1,27 +1,3 @@
-.ReactModal__Overlay {
-  opacity: 0;
-  transition: opacity 200ms var(--fluid-slide-up);
-}
-.ReactModal__Overlay--after-open{
-  opacity: 1;
-}
-.ReactModal__Overlay--before-close{
-  opacity: 0;
-}
-
-.ReactModal__Content {
-  transform: translateY(100%);
-  transition: transform 200ms var(--fluid-slide-up);
-}
-
-.ReactModal__Content--after-open{
-  transform: translateY(0);
-}
-
-.ReactModal__Content--before-close{
-  transform: translateY(100%);
-}
-
 .raw-modal {
   --small-modal-width: 525px;
   --medium-modal-width: 712px;
@@ -60,4 +36,35 @@
     height: 100%;
     background-color: var(--bg-overlay);
   }
+}
+
+.ReactModal__Overlay {
+  animation: raw-modal--overlay 150ms;
+}
+
+.ReactModal__Content {
+  animation: raw-modal--content 150ms;
+}
+
+@keyframes raw-modal--content {
+  0% {
+    transform: scale(1.1);
+    opacity: .5;
+  }
+  80% {
+    transform: scale(.995);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes raw-modal--overlay {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
\ No newline at end of file