add dark mode in base heading

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">
-    {{ $t(`settings.customization.${type}s.${type}_number_format`) }}
-  </h6>
-  <p class="mt-1 text-sm text-gray-500">
-    {{
+  <BaseHeading
+    type="heading-title"
+    :subtitle="
       $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>
-  <p class="mt-1 text-sm text-gray-500">
-    {{ $t('settings.customization.estimates.convert_estimate_description') }}
-  </p>
+  </BaseHeading>
 
   <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>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.estimates.default_formats_description') }}
-    </p>
+    </BaseHeading>
 
     <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>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.estimates.expiry_date_description') }}
-    </p>
+    </BaseHeading>
 
     <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>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.invoices.default_formats_description') }}
-    </p>
+    </BaseHeading>
 
     <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
+    type="heading-title"
+    :subtitle="
+      $t('settings.customization.invoices.due_date_description')
+    "
+  >
     {{ $t('settings.customization.invoices.due_date') }}
-    </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.invoices.due_date_description') }}
-    </p>
+  </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>
-  <p class="mt-1 text-sm text-gray-500">
-    {{ $t('settings.customization.invoices.retrospective_edits_description') }}
-  </p>
+  </BaseHeading>
 
   <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>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
-      {{ $t('settings.customization.payments.default_formats_description') }}
-    </p>
+    </BaseHeading>
 
     <BaseInputGroup
       :label="$t('settings.customization.payments.default_payment_email_body')"

resources/scripts/components/base/BaseButton.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
-
 const props = defineProps({
   contentLoading: {
     type: Boolean,
@@ -10,7 +9,7 @@ const props = defineProps({
   defaultClass: {
     type: String,
     default:
-      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
+      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
   },
   tag: {
     type: String,
@@ -28,10 +27,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  loadingRight: {
-    type: Boolean,
-    default: false,
-  },
   size: {
     type: String,
     default: 'md',
@@ -86,17 +81,17 @@ const placeHolderSize = computed(() => {
 
 const variantClass = computed(() => {
   return {
-    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 dark:bg-primary-500 dark:hover:bg-primary-600':
+    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
       props.variant === 'primary',
     'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
       props.variant === 'secondary',
-    'border-transparent border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-100 shadow-inner focus:ring-primary-500 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-transparent dark:hover:text-primary-500 dark:hover:border-primary-500':
+    'border-transparent  border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500':
       props.variant == 'primary-outline',
-    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-900':
+    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
       props.variant == 'white',
     'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
       props.variant === 'danger',
-    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0 dark:bg-gray-600 dark:text-white dark:hover:bg-opacity-60':
+    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
       props.variant === 'gray',
   }
 })
@@ -129,13 +124,6 @@ const iconRightClass = computed(() => {
     'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl',
   }
 })
-
-const buttonDisabledClass = computed(() => {
-  if (props.disabled || props.loading)
-    return 'cursor-not-allowed bg-opacity-70 dark:!bg-opacity-40 hover:!bg-opacity-70 pointer-event-none'
-
-  return ''
-})
 </script>
 
 <template>
@@ -153,17 +141,15 @@ const buttonDisabledClass = computed(() => {
   <BaseCustomTag
     v-else
     :tag="tag"
-    :disabled="disabled || loading"
-    :class="[defaultClass, sizeClass, variantClass, roundedClass, buttonDisabledClass]"
+    :disabled="disabled"
+    :class="[defaultClass, sizeClass, variantClass, roundedClass]"
   >
-    <SpinnerIcon v-if="loading && !loadingRight" :class="[iconLeftClass, iconVariantClass]" />
+    <SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" />
 
-    <slot v-else name="left" :class="iconLeftClass" />
+    <slot v-else name="left" :class="iconLeftClass"></slot>
 
     <slot />
 
-    <SpinnerIcon v-if="loading && loadingRight" :class="[iconRightClass, iconVariantClass]" />
-
-    <slot v-else name="right" :class="[iconRightClass, iconVariantClass]" />
+    <slot name="right" :class="[iconRightClass, iconVariantClass]"></slot>
   </BaseCustomTag>
 </template>

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-500 uppercase text-base': props.type === 'section-title',
+    'text-gray-900 text-lg font-medium dark:text-white': props.type === 'heading-title',
+    'text-gray-500 uppercase text-base dark:text-gray-300': props.type === 'section-title',
   }
 })
 </script>

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]
           "
         >