From 58ca6f8de737d7eb2a48748b97425c1ae90bee4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 25 Aug 2020 16:08:11 +0100
Subject: [PATCH] chore(ui): tweak modal animations for mobile

---
 ui/src/Components/Modal/index.tsx        |  4 ++--
 ui/src/Styles/Components/MountModal.scss | 22 ++++++++++++----------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/ui/src/Components/Modal/index.tsx b/ui/src/Components/Modal/index.tsx
index 60b4a888d..6919f5dac 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={400}
+        timeout={300}
         onExited={onExited}
         enter
         exit
@@ -78,7 +78,7 @@ const Modal: FC<{
       <CSSTransition
         in={isOpen && !isUpper}
         classNames="components-animation-backdrop"
-        timeout={400}
+        timeout={300}
         enter
         exit
         unmountOnExit
diff --git a/ui/src/Styles/Components/MountModal.scss b/ui/src/Styles/Components/MountModal.scss
index b7f218c13..9fbef62b6 100644
--- a/ui/src/Styles/Components/MountModal.scss
+++ b/ui/src/Styles/Components/MountModal.scss
@@ -1,11 +1,12 @@
-$duration-modal: 0.2s;
-$move: -110%;
-$opacity-modal: 0.85;
+$duration-modal: 0.3s;
+$move: -400px;
+$opacity-modal: 0;
 
 $duration-bg: 0.2s;
 $opacity-bg: 0.8;
 
-$easing: ease-in-out;
+$easing-enter: ease-out;
+$easing-exit: ease-in;
 
 .components-animation-modal {
   will-change: opacity, transform;
@@ -17,8 +18,8 @@ $easing: ease-in-out;
 }
 .components-animation-modal-enter-active > .modal > .modal-dialog {
   opacity: 1;
-  transition: transform $duration-modal $easing $duration-bg,
-    opacity $duration-modal $easing $duration-bg;
+  transition: transform $duration-modal $easing-enter,
+    opacity $duration-modal $easing-enter;
   transform: translate(0, 0);
 }
 .components-animation-modal-exit > .modal > .modal-dialog {
@@ -28,7 +29,8 @@ $easing: ease-in-out;
 .components-animation-modal-exit-active > .modal > .modal-dialog {
   opacity: $opacity-modal;
   transform: translate(0, $move);
-  transition: transform $duration-modal $easing, opacity $duration-modal $easing;
+  transition: transform $duration-modal $easing-enter,
+    opacity $duration-modal $easing-enter;
 }
 
 .components-animation-backdrop {
@@ -40,16 +42,16 @@ $easing: ease-in-out;
 }
 .components-animation-backdrop-enter-active {
   opacity: $opacity-bg;
-  transition: opacity $duration-bg $easing;
+  transition: opacity $duration-bg $easing-exit;
 }
 .components-animation-backdrop-enter-done {
   opacity: $opacity-bg;
-  transition: opacity $duration-bg $easing;
+  transition: opacity $duration-bg $easing-exit;
 }
 .components-animation-backdrop-exit {
   opacity: $opacity-bg;
 }
 .components-animation-backdrop-exit-active {
   opacity: 0.01;
-  transition: opacity $duration-bg $easing $duration-modal;
+  transition: opacity $duration-bg $easing-exit;
 }