add dark mode in base heading

resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue

@@ -50,11 +50,21 @@
           </BaseInputGroup>
         </template>
       </ValidateEach>
-      <BaseModalFooter>
+      <div
+        slot="footer"
+        class="
+          z-0
+          flex
+          justify-end
+          mt-4
+          pt-4
+          border-t border-gray-200 border-solid border-modal-bg
+        "
+      >
         <BaseButton :loading="isSaving" variant="primary" type="submit">
           {{ $t('general.save') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseCard>
 </template>

resources/scripts/admin/components/modal-components/BackupModal.vue

@@ -57,7 +57,9 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -82,7 +84,7 @@
           </template>
           {{ $t('general.create') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/CategoryModal.vue

@@ -47,7 +47,15 @@
         </BaseInputGrid>
       </div>
 
-      <BaseModalFooter>
+      <div
+        class="
+          z-0
+          flex
+          justify-end
+          p-4
+          border-t border-gray-200 border-solid border-modal-bg
+        "
+      >
         <BaseButton
           type="button"
           variant="primary-outline"
@@ -72,7 +80,7 @@
           </template>
           {{ categoryStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/CompanyModal.vue

@@ -116,7 +116,7 @@
         </BaseInputGrid>
       </div>
 
-       <BaseModalFooter>
+      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -141,7 +141,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/CustomerModal.vue

@@ -425,7 +425,9 @@
         </BaseTabGroup>
       </div>
 
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           class="mr-3 text-sm"
           type="button"
@@ -445,7 +447,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue

@@ -38,7 +38,7 @@
         </BaseInputGroup>
       </div>
 
-      <BaseModalFooter>
+      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -63,7 +63,7 @@
           </template>
           {{ $t('general.delete') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue

@@ -150,7 +150,9 @@
           @Remove="removeUsedSelectedCurrencies"
         />
       </div>
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -177,7 +179,7 @@
             exchangeRateStore.isEdit ? $t('general.update') : $t('general.save')
           }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/FileDiskModal.vue

@@ -20,7 +20,15 @@
         @submit="createNewDisk"
       >
         <template #default="slotProps">
-          <BaseModalFooter>
+          <div
+            class="
+              z-0
+              flex
+              justify-end
+              p-4
+              border-t border-solid border-gray-light
+            "
+          >
             <BaseButton
               class="mr-3 text-sm"
               variant="primary-outline"
@@ -44,7 +52,7 @@
 
               {{ $t('general.save') }}
             </BaseButton>
-          </BaseModalFooter>
+          </div>
         </template>
       </component>
     </div>

resources/scripts/admin/components/modal-components/ItemModal.vue

@@ -89,7 +89,9 @@
             </BaseInputGroup>
           </BaseInputGrid>
         </div>
-        <BaseModalFooter>
+        <div
+          class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+        >
           <BaseButton
             class="mr-3"
             variant="primary-outline"
@@ -109,7 +111,7 @@
             </template>
             {{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
           </BaseButton>
-        </BaseModalFooter>
+        </div>
       </form>
     </div>
   </BaseModal>

resources/scripts/admin/components/modal-components/ItemUnitModal.vue

@@ -31,7 +31,15 @@
         </BaseInputGroup>
       </div>
 
-      <BaseModalFooter>
+      <div
+        class="
+          z-0
+          flex
+          justify-end
+          p-4
+          border-t border-gray-200 border-solid border-modal-bg
+        "
+      >
         <BaseButton
           type="button"
           variant="primary-outline"
@@ -58,7 +66,7 @@
             itemStore.isItemUnitEdit ? $t('general.update') : $t('general.save')
           }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/MailTestModal.vue

@@ -62,7 +62,9 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-     <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           variant="primary-outline"
           type="button"
@@ -82,7 +84,7 @@
           </template>
           {{ $t('general.send') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/NoteModal.vue

@@ -63,7 +63,16 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-     <BaseModalFooter>
+      <div
+        class="
+          z-0
+          flex
+          justify-end
+          px-4
+          py-4
+          border-t border-solid border-gray-light
+        "
+      >
         <BaseButton
           class="mr-2"
           variant="primary-outline"
@@ -84,7 +93,7 @@
           </template>
           {{ noteStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/PaymentModeModal.vue

@@ -29,7 +29,9 @@
         </BaseInputGroup>
       </div>
 
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           variant="primary-outline"
           class="mr-3"
@@ -54,7 +56,7 @@
               : $t('general.save')
           }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/RolesModal.vue

@@ -72,7 +72,7 @@
         </div>
       </div>
 
-      <div class="border-t border-gray-200 dark:border-gray-600 py-3">
+      <div class="border-t border-gray-200 py-3">
         <div
           class="
             grid grid-cols-1
@@ -89,7 +89,7 @@
             :key="gIndex"
             class="flex flex-col space-y-1"
           >
-            <p class="text-sm text-gray-500 dark:text-gray-200 border-b dark:border-gray-600 pb-1 mb-2">
+            <p class="text-sm text-gray-500 border-b border-gray-200 pb-1 mb-2">
               {{ gIndex }}
             </p>
             <div
@@ -116,7 +116,15 @@
           </span>
         </div>
       </div>
-      <BaseModalFooter>
+      <div
+        class="
+          z-0
+          flex
+          justify-end
+          p-4
+          border-t border-solid border--200 border-modal-bg
+        "
+      >
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -136,7 +144,7 @@
           </template>
           {{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/SelectTemplateModal.vue

@@ -70,7 +70,7 @@
       </div>
     </div>
 
-    <BaseModalFooter>
+    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
       <BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
         {{ $t('general.cancel') }}
       </BaseButton>
@@ -80,7 +80,7 @@
         </template>
         {{ $t('general.choose') }}
       </BaseButton>
-    </BaseModalFooter>
+    </div>
   </BaseModal>
 </template>
 

resources/scripts/admin/components/modal-components/SendEstimateModal.vue

@@ -62,7 +62,9 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -83,7 +85,7 @@
           <BaseIcon v-if="!isLoading" name="PhotographIcon" class="h-5 mr-2" />
           {{ $t('general.preview') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -104,7 +106,9 @@
         ></iframe>
       </div>
 
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -123,7 +127,7 @@
           <BaseIcon v-if="!isLoading" name="PaperAirplaneIcon" class="mr-2" />
           {{ $t('general.send') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </div>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/SendInvoiceModal.vue

@@ -65,7 +65,9 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -91,7 +93,7 @@
           </template>
           {{ $t('general.preview') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -112,7 +114,9 @@
           style="min-height: 500px"
         ></iframe>
       </div>
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -136,7 +140,7 @@
           />
           {{ $t('general.send') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </div>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/SendPaymentModal.vue

@@ -65,7 +65,9 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -91,7 +93,7 @@
           </template>
           {{ $t('general.preview') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -112,7 +114,9 @@
           style="min-height: 500px"
         ></iframe>
       </div>
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -136,7 +140,7 @@
           />
           {{ $t('general.send') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </div>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/TaxTypeModal.vue

@@ -90,7 +90,15 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <BaseModalFooter>
+      <div
+        class="
+          z-0
+          flex
+          justify-end
+          p-4
+          border-t border-solid border--200 border-modal-bg
+        "
+      >
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -114,7 +122,7 @@
           </template>
           {{ taxTypeStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/TaxationAddressModal.vue

@@ -87,7 +87,9 @@
         </BaseInputGrid>
       </div>
 
-      <BaseModalFooter>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
+      >
         <BaseButton
           class="mr-3 text-sm"
           type="button"
@@ -107,7 +109,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue

@@ -172,7 +172,15 @@
         </div>
       </div>
 
-      <BaseModalFooter>
+      <div
+        class="
+          z-0
+          flex
+          justify-end
+          p-4
+          border-t border-solid border-gray-light border-modal-bg
+        "
+      >
         <BaseButton
           class="mr-3"
           type="button"
@@ -199,7 +207,7 @@
             !customFieldStore.isEdit ? $t('general.save') : $t('general.update')
           }}
         </BaseButton>
-      </BaseModalFooter>
+      </div>
     </form>
   </BaseModal>
 </template>

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 dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

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 dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

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 dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

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 dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/views/settings/CompanyInfoSettings.vue

@@ -113,10 +113,10 @@
 
       <div v-if="companyStore.companies.length !== 1" class="py-5">
         <BaseDivider class="my-4" />
-        <h3 class="text-lg leading-6 font-medium text-gray-900">
+        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
           {{ $tc('settings.company_info.delete_company') }}
         </h3>
-        <div class="mt-2 max-w-xl text-sm text-gray-500">
+        <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
           <p>
             {{ $tc('settings.company_info.delete_company_description') }}
           </p>

resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue

@@ -7,7 +7,7 @@
           {{ $t('settings.menu_title.exchange_rate') }}
         </h6>
         <p
-          class="mt-2 text-sm leading-snug text-left text-gray-500"
+          class="mt-2 text-sm leading-snug text-left text-gray-500 dark:text-gray-400"
           style="max-width: 680px"
         >
           {{ $t('settings.exchange_rate.providers_description') }}

resources/scripts/admin/views/settings/customization/NumberCustomizer.vue

@@ -1,12 +1,12 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
+  <BaseHeading
-    {{ $t(`settings.customization.${type}s.${type}_number_format`) }}
+    type="heading-title"
-  </h6>
+    :subtitle="
-  <p class="mt-1 text-sm text-gray-500">
-    {{
       $t(`settings.customization.${type}s.${type}_number_format_description`)
-    }}
+    "
-  </p>
+  >
+    {{ $t(`settings.customization.${type}s.${type}_number_format`) }}
+  </BaseHeading>
 
   <div class="overflow-x-auto">
     <table class="w-full mt-6 table-fixed">
@@ -29,6 +29,7 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
+              dark:border-gray-600
             "
           ></th>
           <th
@@ -41,6 +42,7 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
+              dark:text-gray-300 dark:border-gray-600
             "
           >
             Component
@@ -55,6 +57,7 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
+              dark:text-gray-300 dark:border-gray-600
             "
           >
             Parameter
@@ -69,13 +72,14 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
+              dark:border-gray-600
             "
           ></th>
         </tr>
       </thead>
       <draggable
         v-model="selectedFields"
-        class="divide-y divide-gray-200"
+        class="divide-y divide-gray-200 dark:divide-gray-600"
         item-key="id"
         tag="tbody"
         handle=".handle"
@@ -97,12 +101,13 @@
                   whitespace-nowrap
                   mr-2
                   min-w-[200px]
+                  dark:text-primary-400
                 "
               >
                 {{ element.label }}
               </label>
 
-              <p class="text-xs text-gray-500 mt-1">
+              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                 {{ element.description }}
               </p>
             </td>

resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue

@@ -1,10 +1,12 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
+  <BaseHeading
+    type="heading-title"
+    :subtitle="
+      $t('settings.customization.estimates.convert_estimate_description')
+    "
+    >
     {{ $tc('settings.customization.estimates.convert_estimate_options') }}
-  </h6>
+  </BaseHeading>
-  <p class="mt-1 text-sm text-gray-500">
-    {{ $t('settings.customization.estimates.convert_estimate_description') }}
-  </p>
 
   <BaseInputGroup required>
     <BaseRadio

resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue

@@ -1,11 +1,13 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <BaseHeading
+      type="heading-title"
+      :subtitle="
+        $t('settings.customization.estimates.default_formats_description')
+      "
+    >
       {{ $t('settings.customization.estimates.default_formats') }}
-    </h6>
+    </BaseHeading>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.estimates.default_formats_description') }}
-    </p>
 
     <BaseInputGroup
       :label="

resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue

@@ -1,11 +1,13 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <BaseHeading
+      type="heading-title"
+      :subtitle="
+        $t('settings.customization.estimates.expiry_date_description')
+      "
+    >
       {{ $t('settings.customization.estimates.expiry_date') }}
-    </h6>
+    </BaseHeading>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.estimates.expiry_date_description') }}
-    </p>
 
     <BaseSwitchSection
       v-model="expiryDateAutoField"

resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue

@@ -1,11 +1,13 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <BaseHeading
+      type="heading-title"
+      :subtitle="
+        $t('settings.customization.invoices.default_formats_description')
+      "
+    >
       {{ $t('settings.customization.invoices.default_formats') }}
-    </h6>
+    </BaseHeading>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.invoices.default_formats_description') }}
-    </p>
 
     <BaseInputGroup
       :label="$t('settings.customization.invoices.default_invoice_email_body')"

resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue

@@ -1,11 +1,13 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <BaseHeading
-      {{ $t('settings.customization.invoices.due_date') }}
+    type="heading-title"
-    </h6>
+    :subtitle="
-    <p class="mt-1 text-sm text-gray-500 mb-2">
+      $t('settings.customization.invoices.due_date_description')
-      {{ $t('settings.customization.invoices.due_date_description') }}
+    "
-    </p>
+  >
+    {{ $t('settings.customization.invoices.due_date') }}
+  </BaseHeading>
 
     <BaseSwitchSection
       v-model="dueDateAutoField"

resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue

@@ -1,10 +1,12 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
+  <BaseHeading
+    type="heading-title"
+    :subtitle="
+      $t('settings.customization.invoices.retrospective_edits_description')
+    "
+  >
     {{ $tc('settings.customization.invoices.retrospective_edits') }}
-  </h6>
+  </BaseHeading>
-  <p class="mt-1 text-sm text-gray-500">
-    {{ $t('settings.customization.invoices.retrospective_edits_description') }}
-  </p>
 
   <BaseInputGroup required>
     <BaseRadio

resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue

@@ -1,11 +1,13 @@
 <template>
   <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+     <BaseHeading
+      type="heading-title"
+      :subtitle="
+        $t('settings.customization.payments.default_formats_description')
+      "
+    >
       {{ $t('settings.customization.payments.default_formats') }}
-    </h6>
+    </BaseHeading>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.payments.default_formats_description') }}
-    </p>
 
     <BaseInputGroup
       :label="$t('settings.customization.payments.default_payment_email_body')"

resources/scripts/components/base/BaseHeading.vue

@@ -2,6 +2,21 @@
   <h6 :class="typeClass">
     <slot />
   </h6>
+  
+  <p
+    v-if="subtitle"
+    class="
+      mt-2
+      text-sm
+      leading-snug
+      text-gray-500
+      dark:text-gray-400
+      max-w-[680px]
+    "
+  >
+    {{ subtitle }}
+  </p>
+
 </template>
 
 <script setup>
@@ -14,12 +29,16 @@ const props = defineProps({
       return ['section-title', 'heading-title'].indexOf(value) !== -1
     },
   },
+  subtitle: {
+    type: String,
+    default: '',
+  },
 })
 
 const typeClass = computed(() => {
   return {
-    'text-gray-900 text-lg font-medium': props.type === 'heading-title',
+    'text-gray-900 text-lg font-medium dark:text-white': props.type === 'heading-title',
-    'text-gray-500 uppercase text-base': props.type === 'section-title',
+    'text-gray-500 uppercase text-base dark:text-gray-300': props.type === 'section-title',
   }
 })
 </script>

resources/scripts/components/base/BaseModal.vue

@@ -29,21 +29,8 @@
             leave-to="opacity-0"
           >
             <DialogOverlay
-              class="
+              class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
-              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. -->
@@ -74,11 +61,7 @@
               my-4
               ${modalSize}
               sm:w-full
-              dark:shadow-glass
+              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
-              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"
@@ -91,8 +74,6 @@
                   text-lg
                   font-medium
                   text-black
-                  dark:text-white
-                  dark:border-gray-600
                   border-b border-gray-200 border-solid
                 "
               >

resources/scripts/components/base/BaseModalFooter.vue

@@ -1,14 +0,0 @@
-<template>
-  <div
-    class="
-      z-0
-      flex
-      justify-end
-      p-4
-      border-t border-gray-200 border-solid
-      dark:border-gray-600
-    "
-  >
-    <slot />
-  </div>
-</template>

resources/scripts/components/base/BaseSettingCard.vue

@@ -11,7 +11,7 @@
             mt-2
             text-sm
             leading-snug
-            text-left text-gray-500
+            text-left text-gray-500 dark:text-gray-400
             max-w-[680px]
           "
         >