From 732117e3a43b4949f57ccd141420d0dbe48f9ee5 Mon Sep 17 00:00:00 2001
From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
Date: Thu, 28 Jul 2022 12:15:42 +0300
Subject: [PATCH] Improve confirm modal animation

---
 .../ConfirmModal/ConfirmModal.module.css      | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/ConfirmModal/ConfirmModal.module.css b/packages/ui/src/components/ConfirmModal/ConfirmModal.module.css
index 3d44a79ae..07dae2d22 100644
--- a/packages/ui/src/components/ConfirmModal/ConfirmModal.module.css
+++ b/packages/ui/src/components/ConfirmModal/ConfirmModal.module.css
@@ -16,14 +16,42 @@
   }
 }
 
-.overlay[data-state='open'],
-.contentWrapper[data-state='open'] {
+@keyframes slideUp {
+  from {
+    transform: translateY(16px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(16px);
+    opacity: 0;
+  }
+}
+
+.overlay[data-state='open'] {
   animation: fadeIn 150ms ease-out;
 }
 
-.overlay[data-state='closed'],
+.overlay[data-state='closed'] {
+  animation: fadeOut 150ms ease-in 150ms;
+}
+
+.contentWrapper[data-state='open'] {
+  animation: slideUp 150ms ease-out;
+}
+
 .contentWrapper[data-state='closed'] {
-  animation: fadeOut 150ms ease-in;
+  animation: slideDown 150ms ease-in;
 }
 
 .overlay {