From ecbff16a880183563c71a40a4c4154547305f8e4 Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Sun, 30 Jan 2022 16:24:40 +0000
Subject: [PATCH] modal: change transition

now a simple fade-in/fade-out, which is part of tailwind.config.js
rather than modal.css.
---
 css/modal.css       | 13 -------------
 package-lock.json   |  1 +
 tailwind.config.js  | 22 ++++++++++++++++++++++
 ts/modules/modal.ts | 11 ++++++-----
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/css/modal.css b/css/modal.css
index 4ff4931..ef6536e 100644
--- a/css/modal.css
+++ b/css/modal.css
@@ -10,19 +10,6 @@
     background-color: rgba(0,0,0,40%);
 }
 
-.modal-shown {
-    display: block;
-}
-
-@keyframes modal-hide {
-    from { opacity: 1; }
-    to { opacity: 0; }
-}
-
-.modal-hiding {
-    animation: modal-hide 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
 .modal-close {
     float: right;
     color: #aaa;
diff --git a/package-lock.json b/package-lock.json
index 3ee9fbe..9b652f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10165,6 +10165,7 @@
     },
     "nightwind": {
       "version": "git+ssh://git@github.com/yonson2/nightwind.git#755e4b34e0cd782291822b88ad969c69404900da",
+      "integrity": "sha512-eibdkEdOFtBj/1iTk3W0CP9+GXwW1OXcoLBm+Pf7Sq5JLRmailuhaxGrKlNjZH9Wn8yYPO+LuYHg3NMG27Gjuw==",
       "from": "nightwind@github:yonson2/nightwind",
       "requires": {}
     },
diff --git a/tailwind.config.js b/tailwind.config.js
index 8774ee4..e6c93da 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,28 @@ module.exports = {
   darkMode: 'class',
   theme: {
       extend: {
+          keyframes: {
+              'fade-in': {
+                  '0%': {
+                      opacity: '0'
+                  },
+                  '100%': {
+                      opacity: '1'
+                  }
+              },
+              'fade-out': {
+                  '0%': {
+                      opacity: '1'
+                  },
+                  '100%': {
+                      opacity: '0'
+                  }
+              },
+          },
+          animation: {
+              'fade-in': 'fade-in 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+              'fade-out': 'fade-out 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+          },
           colors: {
               neutral: colors.slate,
               positive: colors.green,
diff --git a/ts/modules/modal.ts b/ts/modules/modal.ts
index 7bbc071..dcd2ad8 100644
--- a/ts/modules/modal.ts
+++ b/ts/modules/modal.ts
@@ -24,11 +24,12 @@ export class Modal implements Modal {
         if (event) {
             event.preventDefault();
         }
-        this.modal.classList.add('modal-hiding');
+        this.modal.classList.add('animate-fade-out');
+        this.modal.classList.remove("animate-fade-in");
         const modal = this.modal;
         const listenerFunc = () => {
-            modal.classList.remove('modal-shown');
-            modal.classList.remove('modal-hiding');
+            modal.classList.remove('block');
+            modal.classList.remove('animate-fade-out');
             modal.removeEventListener(window.animationEvent, listenerFunc);
             document.dispatchEvent(this.closeEvent);
         };
@@ -43,11 +44,11 @@ export class Modal implements Modal {
     }
 
     show = () => {
-        this.modal.classList.add('modal-shown');
+        this.modal.classList.add('block', 'animate-fade-in');
         document.dispatchEvent(this.openEvent);
     }
     toggle = () => {
-        if (this.modal.classList.contains('modal-shown')) {
+        if (this.modal.classList.contains('animate-fade-in')) {
             this.close();
         } else {
             this.show();