From 6e70930e8790997a87d712d095d9bda4bf47513b Mon Sep 17 00:00:00 2001
From: yashkanakiya <yashkanakiya281297@gmail.com>
Date: Thu, 23 Mar 2023 11:10:46 +0530
Subject: [PATCH] add dark mode in base modal

---
 .../modal-components/BackupModal.vue          |  2 +-
 .../modal-components/CategoryModal.vue        |  2 +-
 .../modal-components/CompanyModal.vue         |  2 +-
 .../modal-components/CustomerModal.vue        |  2 +-
 .../modal-components/DeleteCompanyModal.vue   |  2 +-
 .../ExchangeRateProviderModal.vue             |  2 +-
 .../modal-components/FileDiskModal.vue        |  2 +-
 .../components/modal-components/ItemModal.vue |  2 +-
 .../modal-components/ItemUnitModal.vue        |  2 +-
 .../modal-components/MailTestModal.vue        |  2 +-
 .../components/modal-components/NoteModal.vue |  2 +-
 .../modal-components/PaymentModeModal.vue     |  2 +-
 .../modal-components/RolesModal.vue           |  2 +-
 .../modal-components/SelectTemplateModal.vue  |  2 +-
 .../modal-components/SendEstimateModal.vue    |  2 +-
 .../modal-components/SendInvoiceModal.vue     |  2 +-
 .../modal-components/SendPaymentModal.vue     |  2 +-
 .../modal-components/TaxTypeModal.vue         |  2 +-
 .../modal-components/TaxationAddressModal.vue |  2 +-
 .../custom-fields/CustomFieldModal.vue        |  2 +-
 .../modal-components/disks/DoSpacesDisk.vue   |  2 +-
 .../modal-components/disks/DropboxDisk.vue    |  2 +-
 .../modal-components/disks/LocalDisk.vue      |  2 +-
 .../modal-components/disks/S3Disk.vue         |  2 +-
 .../scripts/components/base/BaseModal.vue     | 25 ++++++++++++++++---
 25 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/resources/scripts/admin/components/modal-components/BackupModal.vue b/resources/scripts/admin/components/modal-components/BackupModal.vue
index 88e6fc04..b3a4780f 100644
--- a/resources/scripts/admin/components/modal-components/BackupModal.vue
+++ b/resources/scripts/admin/components/modal-components/BackupModal.vue
@@ -58,7 +58,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/CategoryModal.vue b/resources/scripts/admin/components/modal-components/CategoryModal.vue
index 031280c3..13bd6dca 100644
--- a/resources/scripts/admin/components/modal-components/CategoryModal.vue
+++ b/resources/scripts/admin/components/modal-components/CategoryModal.vue
@@ -53,7 +53,7 @@
           flex
           justify-end
           p-4
-          border-t border-gray-200 border-solid border-modal-bg
+          border-t border-gray-200 border-solid border-modal-bg dark:border-gray-600
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/CompanyModal.vue b/resources/scripts/admin/components/modal-components/CompanyModal.vue
index 011218a1..a28b990a 100644
--- a/resources/scripts/admin/components/modal-components/CompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/CompanyModal.vue
@@ -116,7 +116,7 @@
         </BaseInputGrid>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+      <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600">
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
diff --git a/resources/scripts/admin/components/modal-components/CustomerModal.vue b/resources/scripts/admin/components/modal-components/CustomerModal.vue
index da158bfc..be737479 100644
--- a/resources/scripts/admin/components/modal-components/CustomerModal.vue
+++ b/resources/scripts/admin/components/modal-components/CustomerModal.vue
@@ -426,7 +426,7 @@
       </div>
 
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3 text-sm"
diff --git a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
index 661c972b..5bde3806 100644
--- a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
+++ b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
@@ -38,7 +38,7 @@
         </BaseInputGroup>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+      <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid border-modal-bg dark:border-gray-600">
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
diff --git a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
index b466ca64..cf8f682c 100644
--- a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
+++ b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
@@ -151,7 +151,7 @@
         />
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/FileDiskModal.vue b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
index 82274250..aa408853 100644
--- a/resources/scripts/admin/components/modal-components/FileDiskModal.vue
+++ b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
@@ -26,7 +26,7 @@
               flex
               justify-end
               p-4
-              border-t border-solid border-gray-light
+              border-t border-solid border-gray-light dark:border-gray-600
             "
           >
             <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/ItemModal.vue b/resources/scripts/admin/components/modal-components/ItemModal.vue
index 5fd3f21d..dd9e8d63 100644
--- a/resources/scripts/admin/components/modal-components/ItemModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemModal.vue
@@ -90,7 +90,7 @@
           </BaseInputGrid>
         </div>
         <div
-          class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+          class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
         >
           <BaseButton
             class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
index b9584358..d32acd5c 100644
--- a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
+++ b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
@@ -37,7 +37,7 @@
           flex
           justify-end
           p-4
-          border-t border-gray-200 border-solid border-modal-bg
+          border-t border-gray-200 border-solid dark:border-gray-600
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/MailTestModal.vue b/resources/scripts/admin/components/modal-components/MailTestModal.vue
index c71d0423..7ca54993 100644
--- a/resources/scripts/admin/components/modal-components/MailTestModal.vue
+++ b/resources/scripts/admin/components/modal-components/MailTestModal.vue
@@ -63,7 +63,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           variant="primary-outline"
diff --git a/resources/scripts/admin/components/modal-components/NoteModal.vue b/resources/scripts/admin/components/modal-components/NoteModal.vue
index aa5695aa..4c55448c 100644
--- a/resources/scripts/admin/components/modal-components/NoteModal.vue
+++ b/resources/scripts/admin/components/modal-components/NoteModal.vue
@@ -70,7 +70,7 @@
           justify-end
           px-4
           py-4
-          border-t border-solid border-gray-light
+          border-t border-gray-200 border-solid dark:border-gray-600
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
index 88c017d7..0c93b66b 100644
--- a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
+++ b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
@@ -30,7 +30,7 @@
       </div>
 
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           variant="primary-outline"
diff --git a/resources/scripts/admin/components/modal-components/RolesModal.vue b/resources/scripts/admin/components/modal-components/RolesModal.vue
index 70ebd651..4825258e 100644
--- a/resources/scripts/admin/components/modal-components/RolesModal.vue
+++ b/resources/scripts/admin/components/modal-components/RolesModal.vue
@@ -122,7 +122,7 @@
           flex
           justify-end
           p-4
-          border-t border-solid border--200 border-modal-bg
+          border-t border-gray-200 border-solid dark:border-gray-600
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
index b7280c3f..ff505a49 100644
--- a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
@@ -70,7 +70,7 @@
       </div>
     </div>
 
-    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
+    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600">
       <BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
         {{ $t('general.cancel') }}
       </BaseButton>
diff --git a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
index 795cdfeb..6ab4938a 100644
--- a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
@@ -63,7 +63,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
index 63e7e6af..60d27430 100644
--- a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
@@ -66,7 +66,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
index 6c786312..8fc556cb 100644
--- a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
+++ b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
@@ -66,7 +66,7 @@
         </BaseInputGrid>
       </div>
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3"
diff --git a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
index e7c1d76a..417cc2e7 100644
--- a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
@@ -96,7 +96,7 @@
           flex
           justify-end
           p-4
-          border-t border-solid border--200 border-modal-bg
+          border-t border-gray-200 border-solid dark:border-gray-600
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
index 0afdd994..535ab366 100644
--- a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
+++ b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
@@ -88,7 +88,7 @@
       </div>
 
       <div
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid dark:border-gray-600"
       >
         <BaseButton
           class="mr-3 text-sm"
diff --git a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
index d1a1c78d..a573dcef 100644
--- a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
+++ b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
@@ -178,7 +178,7 @@
           flex
           justify-end
           p-4
-          border-t border-solid border-gray-light border-modal-bg
+          border-t border-gray-200 border-solid dark:border-gray-600
         "
       >
         <BaseButton
diff --git a/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue b/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
index 0dd83e4c..23203641 100644
--- a/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
@@ -153,7 +153,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue b/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
index 75da1b9a..063efb52 100644
--- a/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
@@ -132,7 +132,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue b/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
index 7d539ff6..2f15cb70 100644
--- a/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
@@ -63,7 +63,7 @@
         </div>
 
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/admin/components/modal-components/disks/S3Disk.vue b/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
index 082c8e94..9bdbdd69 100644
--- a/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
+++ b/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
@@ -134,7 +134,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>
diff --git a/resources/scripts/components/base/BaseModal.vue b/resources/scripts/components/base/BaseModal.vue
index bb55fddc..0a83dc38 100644
--- a/resources/scripts/components/base/BaseModal.vue
+++ b/resources/scripts/components/base/BaseModal.vue
@@ -29,8 +29,21 @@
             leave-to="opacity-0"
           >
             <DialogOverlay
-              class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
-            />
+              class="
+              fixed
+              inset-0
+              transition-opacity
+              bg-gray-700
+              bg-opacity-25
+              dark:backdrop-blur-sm
+              dark:bg-gray-900/80
+              "
+            >
+              <BaseDarkHighlight
+                class="!bg-highlight/[.17] !top-1/2 -translate-y-1/2 mt-5 h-96"
+                :class="modalSize"
+              />
+            </DialogOverlay>
           </TransitionChild>
 
           <!-- This element is to trick the browser into centering the modal contents. -->
@@ -61,7 +74,11 @@
               my-4
               ${modalSize}
               sm:w-full
-              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
+              dark:shadow-glass
+              dark:border
+              dark:border-white/10
+              dark:bg-gray-800/90
+              border-t-8 border-solid rounded shadow-xl border-primary-500`"
             >
               <div
                 v-if="hasHeaderSlot"
@@ -74,6 +91,8 @@
                   text-lg
                   font-medium
                   text-black
+                  dark:text-white
+                  dark:border-gray-600
                   border-b border-gray-200 border-solid
                 "
               >