From a38c1fc4a14096ffaed7159f15c739d249298509 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 24 Jul 2020 20:18:18 +0100
Subject: [PATCH] chore(ui): tweak modal animations

---
 ui/src/Components/Modal/index.tsx        |  4 +--
 ui/src/Styles/Components/MountModal.scss | 31 +++++++++++++-----------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/ui/src/Components/Modal/index.tsx b/ui/src/Components/Modal/index.tsx
index 6919f5dac..60b4a888d 100644
--- a/ui/src/Components/Modal/index.tsx
+++ b/ui/src/Components/Modal/index.tsx
@@ -65,7 +65,7 @@ const Modal: FC<{
       <CSSTransition
         in={isOpen}
         classNames="components-animation-modal"
-        timeout={300}
+        timeout={400}
         onExited={onExited}
         enter
         exit
@@ -78,7 +78,7 @@ const Modal: FC<{
       <CSSTransition
         in={isOpen && !isUpper}
         classNames="components-animation-backdrop"
-        timeout={300}
+        timeout={400}
         enter
         exit
         unmountOnExit
diff --git a/ui/src/Styles/Components/MountModal.scss b/ui/src/Styles/Components/MountModal.scss
index 00c69a7a7..b7f218c13 100644
--- a/ui/src/Styles/Components/MountModal.scss
+++ b/ui/src/Styles/Components/MountModal.scss
@@ -1,25 +1,26 @@
-$duration: 0.3s;
-$move: -33%;
-$opacity-modal: 0.5;
+$duration-modal: 0.2s;
+$move: -110%;
+$opacity-modal: 0.85;
+
+$duration-bg: 0.2s;
 $opacity-bg: 0.8;
+
 $easing: ease-in-out;
 
 .components-animation-modal {
   will-change: opacity, transform;
   transform: translateZ(0);
 }
-
 .components-animation-modal-enter > .modal > .modal-dialog {
   opacity: $opacity-modal;
   transform: translate(0, $move);
 }
-
 .components-animation-modal-enter-active > .modal > .modal-dialog {
   opacity: 1;
-  transition: transform $duration $easing, opacity $duration $easing;
+  transition: transform $duration-modal $easing $duration-bg,
+    opacity $duration-modal $easing $duration-bg;
   transform: translate(0, 0);
 }
-
 .components-animation-modal-exit > .modal > .modal-dialog {
   opacity: 1;
   transform: translate(0, 0);
@@ -27,26 +28,28 @@ $easing: ease-in-out;
 .components-animation-modal-exit-active > .modal > .modal-dialog {
   opacity: $opacity-modal;
   transform: translate(0, $move);
-  transition: transform $duration $easing, opacity $duration $easing;
+  transition: transform $duration-modal $easing, opacity $duration-modal $easing;
 }
 
+.components-animation-backdrop {
+  will-change: opacity;
+  transform: translateZ(0);
+}
 .components-animation-backdrop-enter {
-  opacity: $opacity-modal;
+  opacity: 0.01;
 }
 .components-animation-backdrop-enter-active {
   opacity: $opacity-bg;
-  transition: opacity $duration $easing;
+  transition: opacity $duration-bg $easing;
 }
-
 .components-animation-backdrop-enter-done {
   opacity: $opacity-bg;
-  transition: opacity $duration $easing;
+  transition: opacity $duration-bg $easing;
 }
-
 .components-animation-backdrop-exit {
   opacity: $opacity-bg;
 }
 .components-animation-backdrop-exit-active {
   opacity: 0.01;
-  transition: opacity $duration $easing;
+  transition: opacity $duration-bg $easing $duration-modal;
 }