add dark mode in base heading

resources/scripts/admin/components/SelectNotePopup.vue

@@ -83,25 +83,25 @@
                   @click="selectNote(index, close)"
                 >
                   <div class="flex justify-between px-2">
-                    <BaseLabel
+                    <label
                       class="
-                        !m-0
-                        !text-base
-                        !font-semibold
-                        !leading-tight
-                        !text-gray-700
-                        !cursor-pointer
+                        m-0
+                        text-base
+                        font-semibold
+                        leading-tight
+                        text-gray-700
+                        cursor-pointer
                       "
                     >
                       {{ note.name }}
-                    </BaseLabel>
+                    </label>
                   </div>
                 </div>
               </div>
               <div v-else class="flex justify-center p-5 text-gray-400">
-                <BaseLabel class="!text-base !text-gray-500">
+                <label class="text-base text-gray-500">
                   {{ $t('general.no_note_found') }}
-                </BaseLabel>
+                </label>
               </div>
             </div>
             <button
@@ -122,18 +122,19 @@
               @click="openNoteModal"
             >
               <BaseIcon name="CheckCircleIcon" class="text-primary-400" />
-              <BaseLabel
+              <label
                 class="
-                  !m-0
-                  !ml-3
-                  !leading-none
-                  !cursor-pointer
-                  !font-base
-                  !text-primary-400
+                  m-0
+                  ml-3
+                  text-sm
+                  leading-none
+                  cursor-pointer
+                  font-base
+                  text-primary-400
                 "
               >
                 {{ $t('settings.customization.notes.add_new_note') }}
-              </BaseLabel>
+              </label>
             </button>
           </div>
         </PopoverPanel>

resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex items-center justify-between mb-3">
     <div class="flex items-center text-base" style="flex: 4">
-      <BaseLabel class="!pr-2 !mb-0" align="right">
+      <label class="pr-2 mb-0" align="right">
         {{ $t('invoices.item.tax') }}
-      </BaseLabel>
+      </label>
 
       <BaseMultiselect
         v-model="selectedTax"
@@ -35,9 +35,9 @@
           >
             <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
 
-            <BaseLabel
-              class="!ml-2 !leading-none !cursor-pointer !text-primary-400"
-              >{{ $t('invoices.add_new_tax') }}</BaseLabel
+            <label
+              class="ml-2 text-sm leading-none cursor-pointer text-primary-400"
+              >{{ $t('invoices.add_new_tax') }}</label
             >
           </button>
         </template>

resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue

@@ -5,9 +5,9 @@
     >
       <SelectNotePopup :type="type" @select="onSelectNote" />
     </div>
-    <BaseLabel class="!text-gray-800 !mb-4 ">
+    <label class="text-gray-800 font-medium mb-4 text-sm">
       {{ $t('invoices.notes') }}
-    </BaseLabel>
+    </label>
     <BaseCustomInput
       v-model="store[storeProp].notes"
       :content-loading="store.isFetchingInitialSettings"

resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue

@@ -16,12 +16,12 @@
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <BaseLabel
+      <label
         v-else
-        class="!font-semibold  !text-gray-400 !uppercase"
+        class="text-sm font-semibold leading-5 text-gray-400 uppercase"
       >
         {{ $t('estimates.sub_total') }}
-      </BaseLabel>
+      </label>
 
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
@@ -29,7 +29,7 @@
 
       <label
         v-else
-        class="flex items-center justify-center m-0 text-lg text-black  dark:text-white uppercase "
+        class="flex items-center justify-center m-0 text-lg text-black uppercase "
       >
         <BaseFormatMoney
           :amount="store.getSubTotal"
@@ -48,7 +48,7 @@
       </BaseContentPlaceholders>
       <label
         v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase dark:text-gray-400"
+        class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase"
       >
         {{ tax.name }} - {{ tax.percent }}%
       </label>
@@ -59,7 +59,7 @@
 
       <label
         v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="flex items-center justify-center m-0 text-lg text-black dark:text-white uppercase "
+        class="flex items-center justify-center m-0 text-lg text-black uppercase "
       >
         <BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
       </label>
@@ -75,12 +75,12 @@
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <BaseLabel
+      <label
         v-else
-        class=" !font-semibold  !text-gray-400 !uppercase"
+        class="text-sm font-semibold leading-5 text-gray-400 uppercase"
       >
         {{ $t('estimates.discount') }}
-      </BaseLabel>
+      </label>
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText
           :lines="1"
@@ -171,21 +171,21 @@
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <BaseLabel
+      <label
         v-else
-        class="!m-0 !font-semibold  !text-gray-400 !uppercase"
-        >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</BaseLabel
+        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
+        >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
       >
 
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <BaseLabel
+      <label
         v-else
-        class="!flex !items-center !justify-center !text-lg !uppercase  !text-primary-400"
+        class="flex items-center justify-center text-lg uppercase  text-primary-400"
       >
         <BaseFormatMoney :amount="store.getTotal" :currency="defaultCurrency" />
-      </BaseLabel>
+      </label>
     </div>
   </div>
 </template>

resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex items-center justify-between w-full mt-2 text-sm">
-    <BaseLabel class="!font-semibold  !text-gray-500 !uppercase">
+    <label class="font-semibold leading-5 text-gray-500 uppercase">
       {{ tax.name }} ({{ tax.percent }} %)
-    </BaseLabel>
-    <label class="flex items-center justify-center text-lg text-black dark:text-white">
+    </label>
+    <label class="flex items-center justify-center text-lg text-black">
       <BaseFormatMoney :amount="tax.amount" :currency="currency" />
 
       <BaseIcon

resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue

@@ -88,37 +88,38 @@
                     @click="selectTaxType(taxType, close)"
                   >
                     <div class="flex justify-between px-2">
-                      <BaseLabel
+                      <label
                         class="
-                          !m-0
-                          !text-base
-                          !font-semibold
-                          !leading-tight
-                          !cursor-pointer
+                          m-0
+                          text-base
+                          font-semibold
+                          leading-tight
+                          text-gray-700
+                          cursor-pointer
                         "
                       >
                         {{ taxType.name }}
-                      </BaseLabel>
+                      </label>
 
-                      <BaseLabel
+                      <label
                         class="
-                          !m-0
-                          !text-base
-                          !font-semibold
-                          !text-gray-700
-                          !cursor-pointer
+                          m-0
+                          text-base
+                          font-semibold
+                          text-gray-700
+                          cursor-pointer
                         "
                       >
                         {{ taxType.percent }} %
-                      </BaseLabel>
+                      </label>
                     </div>
                   </div>
                 </div>
 
                 <div v-else class="flex justify-center p-5 text-gray-400">
-                  <BaseLabel class="!text-base !text-gray-500 !cursor-pointer">
+                  <label class="text-base text-gray-500 cursor-pointer">
                     {{ $t('general.no_tax_found') }}
-                  </BaseLabel>
+                  </label>
                 </div>
               </div>
 
@@ -141,18 +142,19 @@
                 @click="openTaxTypeModal"
               >
                 <BaseIcon name="CheckCircleIcon" class="text-primary-400" />
-                <BaseLabel
+                <label
                   class="
-                    !m-0
-                    !ml-3
-                    !leading-none
-                    !cursor-pointer
-                    !font-base
-                    !text-primary-400
+                    m-0
+                    ml-3
+                    text-sm
+                    leading-none
+                    cursor-pointer
+                    font-base
+                    text-primary-400
                   "
                 >
                   {{ $t('estimates.add_new_tax') }}
-                </BaseLabel>
+                </label>
               </button>
             </div>
           </PopoverPanel>

resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <BaseLabel class="!flex !text-gray-800 !mb-2">
+    <label class="flex text-gray-800 font-medium text-sm mb-2">
       {{ $t('general.select_template') }}
       <span class="text-sm text-red-500"> *</span>
-    </BaseLabel>
+    </label>
     <BaseButton
       type="button"
       class="flex justify-center w-full text-sm lg:w-auto hover:bg-gray-200"

resources/scripts/admin/views/modules/Index.vue

@@ -53,7 +53,7 @@
           </div>
         </div>
         <div v-else class="mt-24">
-          <label class="flex items-center justify-center text-gray-500 dark:text-gray-300">
+          <label class="flex items-center justify-center text-gray-500">
             {{ $t('modules.no_modules_installed') }}
           </label>
         </div>

resources/scripts/admin/views/payments/Create.vue

@@ -215,9 +215,9 @@
             <SelectNotePopup type="Payment" @select="onSelectNote" />
           </div>
 
-          <BaseLabel class="!mb-4  !text-gray-800">
+          <label class="mb-4 text-sm font-medium text-gray-800">
             {{ $t('estimates.notes') }}
-          </BaseLabel>
+          </label>
 
           <BaseCustomInput
             v-model="paymentStore.currentPayment.notes"

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/UpdateAppSetting.vue

@@ -4,9 +4,9 @@
     :description="$t('settings.update_app.description')"
   >
     <div class="pb-8 ml-0">
-      <BaseLabel class="!input-label">
+      <label class="text-sm not-italic font-medium input-label">
         {{ $t('settings.update_app.current_version') }}
-      </BaseLabel>
+      </label>
 
       <div
         class="
@@ -64,9 +64,9 @@
           </div>
         </div>
 
-        <BaseLabel class="!input-label">
+        <label class="text-sm not-italic font-medium input-label">
           {{ $t('settings.update_app.next_version') }}
-        </BaseLabel>
+        </label>
         <br />
         <div
           class="
@@ -99,9 +99,9 @@
           v-html="description"
         ></div>
 
-        <BaseLabel class=" !input-label">
+        <label class="text-sm not-italic font-medium input-label">
           {{ $t('settings.update_app.requirements') }}
-        </BaseLabel>
+        </label>
 
         <table class="w-1/2 mt-2 border-2 border-gray-200 BaseTable-fixed">
           <tr

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"
@@ -103,7 +107,7 @@
                 {{ 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">
-      {{ $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
+    type="heading-title"
+    :subtitle="
+      $t('settings.customization.invoices.due_date_description')
+    "
+  >
+    {{ $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>
-  <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/CompanySwitcher.vue

@@ -50,20 +50,20 @@
             pb-4
           "
         >
-          <BaseLabel
+          <label
             class="
-              !px-3
-              !py-2
-              !text-xs
-              !font-semibold
-              !text-gray-400
-              !mb-0.5
-              !block
-              !uppercase
+              px-3
+              py-2
+              text-xs
+              font-semibold
+              text-gray-400
+              mb-0.5
+              block
+              uppercase
             "
           >
             {{ $t('company_switcher.label') }}
-          </BaseLabel>
+          </label>
 
           <div
             v-if="companyStore.companies.length < 1"

resources/scripts/components/GlobalSearchBar.vue

@@ -62,9 +62,9 @@
         </div>
         <div v-else>
           <div v-if="usersStore.customerList.length > 0">
-            <BaseLabel class="!text-gray-400 !mb-0.5 !block !px-2 !uppercase">
+            <label class="text-sm text-gray-400 mb-0.5 block px-2 uppercase">
               {{ $t('global_search.customers') }}
-            </BaseLabel>
+            </label>
             <div
               v-for="(customer, index) in usersStore.customerList"
               :key="index"
@@ -108,11 +108,11 @@
           </div>
 
           <div v-if="usersStore.userList.length > 0" class="mt-2">
-            <BaseLabel
-              class="!text-gray-400 !mb-2 !block !px-2 !uppercase"
+            <label
+              class="text-sm text-gray-400 mb-2 block px-2 mb-0.5 uppercase"
             >
               {{ $t('global_search.users') }}
-            </BaseLabel>
+            </label>
             <div
               v-for="(user, index) in usersStore.userList"
               :key="index"

resources/scripts/components/base/BaseCheckbox.vue

@@ -15,7 +15,7 @@
         v-if="label"
         :for="id"
         :class="`font-medium ${
-          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-white'
+          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600'
         } cursor-pointer `"
       >
         {{ label }}

resources/scripts/components/base/BaseCustomerSelectPopup.vue

@@ -69,29 +69,31 @@
       </div>
       <div class="grid grid-cols-2 gap-8 mt-2">
         <div v-if="selectedCustomer.billing" class="flex flex-col">
-          <BaseLabel
+          <label
             class="
-              !mb-1
-              !text-left !text-gray-400
-              !uppercase
-              !whitespace-nowrap
+              mb-1
+              text-sm
+              font-medium
+              text-left text-gray-400
+              uppercase
+              whitespace-nowrap
             "
           >
             {{ $t('general.bill_to') }}
-          </BaseLabel>
+          </label>
 
           <div
             v-if="selectedCustomer.billing"
             class="flex flex-col flex-1 p-0 text-left"
           >
-            <BaseLabel
+            <label
               v-if="selectedCustomer.billing.name"
-              class="!relative !w-11/12 !truncate"
+              class="relative w-11/12 text-sm truncate"
             >
               {{ selectedCustomer.billing.name }}
-            </BaseLabel>
+            </label>
 
-            <BaseLabel class="!relative !w-11/12  !truncate">
+            <label class="relative w-11/12 text-sm truncate">
               <span v-if="selectedCustomer.billing.city">
                 {{ selectedCustomer.billing.city }}
               </span>
@@ -106,40 +108,42 @@
               <span v-if="selectedCustomer.billing.state">
                 {{ selectedCustomer.billing.state }}
               </span>
-            </BaseLabel>
-            <BaseLabel
+            </label>
+            <label
               v-if="selectedCustomer.billing.zip"
-              class="!relative !w-11/12 !truncate"
+              class="relative w-11/12 text-sm truncate"
             >
               {{ selectedCustomer.billing.zip }}
-            </BaseLabel>
+            </label>
           </div>
         </div>
 
         <div v-if="selectedCustomer.shipping" class="flex flex-col">
-          <BaseLabel
+          <label
             class="
-              !mb-1
-              !text-left !text-gray-400
-              !uppercase
-              !whitespace-nowrap
+              mb-1
+              text-sm
+              font-medium
+              text-left text-gray-400
+              uppercase
+              whitespace-nowrap
             "
           >
             {{ $t('general.ship_to') }}
-          </BaseLabel>
+          </label>
 
           <div
             v-if="selectedCustomer.shipping"
             class="flex flex-col flex-1 p-0 text-left"
           >
-            <BaseLabel
+            <label
               v-if="selectedCustomer.shipping.name"
-              class="!relative !w-11/12 !truncate"
+              class="relative w-11/12 text-sm truncate"
             >
               {{ selectedCustomer.shipping.name }}
-            </BaseLabel>
+            </label>
 
-            <BaseLabel class="!relative !w-11/12 !truncate">
+            <label class="relative w-11/12 text-sm truncate">
               <span v-if="selectedCustomer.shipping.city">
                 {{ selectedCustomer.shipping.city }}
               </span>
@@ -154,13 +158,13 @@
               <span v-if="selectedCustomer.shipping.state">
                 {{ selectedCustomer.shipping.state }}
               </span>
-            </BaseLabel>
-            <BaseLabel
+            </label>
+            <label
               v-if="selectedCustomer.shipping.zip"
-              class="!relative !w-11/12 !text-sm !truncate"
+              class="relative w-11/12 text-sm truncate"
             >
               {{ selectedCustomer.shipping.zip }}
-            </BaseLabel>
+            </label>
           </div>
         </div>
       </div>
@@ -207,7 +211,7 @@
           />
 
           <div class="mt-1">
-            <label class="text-lg font-medium text-gray-900 dark:text-white">
+            <label class="text-lg font-medium text-gray-900">
               {{ $t('customers.new_customer') }}
               <span class="text-red-500"> * </span>
             </label>
@@ -331,9 +335,9 @@
                   v-if="customerStore.customers.length === 0"
                   class="flex justify-center p-5 text-gray-400"
                 >
-                  <BaseLabel class="!text-base !text-gray-500 !cursor-pointer">
+                  <label class="text-base text-gray-500 cursor-pointer">
                     {{ $t('customers.no_customers_found') }}
-                  </BaseLabel>
+                  </label>
                 </div>
               </ul>
             </div>
@@ -358,18 +362,19 @@
             >
               <BaseIcon name="UserAddIcon" class="text-primary-400" />
 
-              <BaseLabel
+              <label
                 class="
-                  !m-0
-                  !ml-3
-                  !leading-none
-                  !cursor-pointer
-                  !font-base
-                  !text-primary-400
+                  m-0
+                  ml-3
+                  text-sm
+                  leading-none
+                  cursor-pointer
+                  font-base
+                  text-primary-400
                 "
               >
                 {{ $t('customers.add_new_customer') }}
-              </BaseLabel>
+              </label>
             </button>
           </PopoverPanel>
         </div>

resources/scripts/components/base/BaseEmptyPlaceholder.vue

@@ -4,10 +4,10 @@
       <slot></slot>
     </div>
     <div class="mt-2">
-      <BaseLabel >{{ title }}</BaseLabel>
+      <label class="font-medium">{{ title }}</label>
     </div>
     <div class="mt-2">
-      <label class="text-gray-500 dark:text-gray-400">
+      <label class="text-gray-500">
         {{ description }}
       </label>
     </div>

resources/scripts/components/base/BaseFilterWrapper.vue

@@ -20,7 +20,6 @@
           hover:text-gray-700
           top-2.5
           right-3.5
-          dark:text-gray-300
         "
         @click="$emit('clear')"
       >

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/BaseInputGroup.vue

@@ -3,15 +3,18 @@
     <BaseContentPlaceholders v-if="contentLoading">
       <BaseContentPlaceholdersText :lines="1" :class="contentLoadClass" />
     </BaseContentPlaceholders>
-    <BaseLabel
+    <label
       v-else-if="label"
       :class="labelClasses"
       class="
-        !flex
-        !items-center
-        !text-gray-800
-        !whitespace-nowrap
-        !justify-between
+        flex
+        text-sm
+        not-italic
+        items-center
+        font-medium
+        text-gray-800
+        whitespace-nowrap
+        justify-between
       "
     >
       <div>
@@ -25,10 +28,10 @@
         name="InformationCircleIcon"
         class="h-4 text-gray-400 cursor-pointer hover:text-gray-600"
       />
-    </BaseLabel>
+    </label>
     <div :class="inputContainerClasses">
       <slot></slot>
-      <span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light dark:text-gray-400">
+      <span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light">
         {{ helpText }}
       </span>
       <span v-if="error" class="block mt-0.5 text-sm text-red-500">

resources/scripts/components/base/BaseLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <label class="text-sm not-italic font-medium leading-5 text-primary-800   dark:!text-gray-300">
+  <label class="text-sm not-italic font-medium leading-5 text-primary-800">
     <slot />
   </label>
 </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]
           "
         >