From 04ff8eca4c420420a69feca6d6427639a456b3c1 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 27 Dec 2022 01:44:41 +0800
Subject: [PATCH] Make modal backdrop appear nicely

I probably created too many similar keyframes
---
 src/components/loader.css | 10 +---------
 src/components/modal.css  |  1 +
 src/index.css             |  9 +++++++++
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/loader.css b/src/components/loader.css
index 09f827b7..dd327cb4 100644
--- a/src/components/loader.css
+++ b/src/components/loader.css
@@ -3,18 +3,10 @@
   width: 16px;
   height: 16px;
   pointer-events: none;
-  animation: slow-appear 0.3s ease-in-out 1s both;
+  animation: appear 0.3s ease-in-out 1s both;
   vertical-align: middle;
   margin: 8px;
 }
-@keyframes slow-appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 .loader-container.abrupt {
   animation: none;
 }
diff --git a/src/components/modal.css b/src/components/modal.css
index 53b1fb26..406e68da 100644
--- a/src/components/modal.css
+++ b/src/components/modal.css
@@ -10,6 +10,7 @@
   align-items: center;
   background-color: var(--backdrop-color);
   backdrop-filter: blur(24px);
+  animation: appear 0.5s var(--timing-function) both;
 }
 
 #modal-container > .light {
diff --git a/src/index.css b/src/index.css
index 635a46ea..8c01e487 100644
--- a/src/index.css
+++ b/src/index.css
@@ -267,6 +267,15 @@ code {
 
 /* KEYFRAMES */
 
+@keyframes appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;