From d12e9968ea95f48ac7b6bdba5732de014cc10f66 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Thu, 10 Nov 2022 11:17:34 +0300
Subject: [PATCH] added animation

---
 public/akaunting-js/generalAction.js                   |  8 ++++----
 public/css/app.css                                     | 10 +++++-----
 .../views/components/table/actions-mobile.blade.php    |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index f608d6058..014a2a966 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -52,12 +52,12 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
     if (document.body.clientWidth <= 768) {
         table.querySelectorAll('[data-table-list]').forEach((actions) => {
             actions.querySelector('[data-mobile-actions]').addEventListener('click', function() {
-                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show', 'flex');
-                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('hidden');
+                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show');
+                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('opacity-0', 'invisible');
       
                 this.closest('td').querySelector('[data-mobile-actions-modal]').addEventListener('click', function() {
-                    this.classList.add('hidden');
-                    this.classList.remove('show', 'flex');
+                    this.classList.add('opacity-0', 'invisible');
+                    this.classList.remove('show');
                 });
             });
         });
diff --git a/public/css/app.css b/public/css/app.css
index 63164f7b4..69ff04e17 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -54493,16 +54493,16 @@ body{
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-100:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-lilac-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(245 247 250 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-200:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
diff --git a/resources/views/components/table/actions-mobile.blade.php b/resources/views/components/table/actions-mobile.blade.php
index e0a311ddc..eca50ca8a 100644
--- a/resources/views/components/table/actions-mobile.blade.php
+++ b/resources/views/components/table/actions-mobile.blade.php
@@ -14,7 +14,7 @@
 
 <div
     data-mobile-actions-modal
-    class="modal w-full h-full fixed top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 hidden modal-background"
+    class="modal w-full h-full fixed flex top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 opacity-0 invisible modal-background transition-opacity"
 >
     <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0 max-w-md">
         <div class="p-2 bg-body rounded-lg">