Converted <label> in <BaseLabel>

resources/scripts/admin/components/SelectNotePopup.vue

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

resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue

@@ -7,12 +7,11 @@
     <!-- edit customField  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.EDIT_CUSTOM_FIELDS)"
-      v-slot="slotProps"
       @click="editCustomField(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -20,12 +19,11 @@
     <!-- delete customField  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_CUSTOM_FIELDS)"
-      v-slot="slotProps"
       @click="removeCustomField(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue

@@ -12,10 +12,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_CUSTOMER)"
       :to="`/admin/customers/${row.id}/edit`"
     >
-      <BaseDropdownItem v-slot="slotProps">
+      <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -29,10 +29,10 @@
       "
       :to="`customers/${row.id}/view`"
     >
-      <BaseDropdownItem v-slot="slotProps">
+      <BaseDropdownItem>
         <BaseIcon
           name="EyeIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -41,12 +41,11 @@
     <!-- Delete Customer  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_CUSTOMER)"
-      v-slot="slotProps"
       @click="removeCustomer(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue

@@ -10,12 +10,11 @@
     <!-- Copy PDF url  -->
     <BaseDropdownItem
       v-if="route.name === 'estimates.view'"
-      v-slot="slotProps"
       @click="copyPdfUrl"
     >
       <BaseIcon
         name="LinkIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.copy_pdf_url') }}
     </BaseDropdownItem>
@@ -25,10 +24,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_ESTIMATE)"
       :to="`/admin/estimates/${row.id}/edit`"
     >
-      <BaseDropdownItem v-slot="slotProps">
+      <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -37,12 +36,11 @@
     <!-- Delete Estimate  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_ESTIMATE)"
-      v-slot="slotProps"
       @click="removeEstimate(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
@@ -55,10 +53,10 @@
       "
       :to="`estimates/${row.id}/view`"
     >
-      <BaseDropdownItem v-slot="slotProps">
+      <BaseDropdownItem>
         <BaseIcon
           name="EyeIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -67,12 +65,11 @@
     <!-- Convert into Invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
-      v-slot="slotProps"
       @click="convertInToinvoice(row.id)"
     >
       <BaseIcon
         name="DocumentTextIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('estimates.convert_to_invoice') }}
     </BaseDropdownItem>
@@ -84,12 +81,11 @@
         route.name !== 'estimates.view' &&
         userStore.hasAbilities(abilities.SEND_ESTIMATE)
       "
-      v-slot="slotProps"
       @click="onMarkAsSent(row.id)"
     >
       <BaseIcon
         name="CheckCircleIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('estimates.mark_as_sent') }}
     </BaseDropdownItem>
@@ -101,21 +97,20 @@
         route.name !== 'estimates.view' &&
         userStore.hasAbilities(abilities.SEND_ESTIMATE)
       "
-      v-slot="slotProps"
       @click="sendEstimate(row)"
     >
       <BaseIcon
         name="PaperAirplaneIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('estimates.send_estimate') }}
     </BaseDropdownItem>
 
     <!-- Resend Estimate -->
-    <BaseDropdownItem v-if="canResendEstimate(row)" v-slot="slotProps"  @click="sendEstimate(row)">
+    <BaseDropdownItem v-if="canResendEstimate(row)" @click="sendEstimate(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('estimates.resend_estimate') }}
     </BaseDropdownItem>
@@ -126,12 +121,11 @@
         row.status !== 'ACCEPTED' &&
         userStore.hasAbilities(abilities.EDIT_ESTIMATE)
       "
-      v-slot="slotProps"
       @click="onMarkAsAccepted(row.id)"
     >
       <BaseIcon
         name="CheckCircleIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('estimates.mark_as_accepted') }}
     </BaseDropdownItem>
@@ -142,12 +136,11 @@
         row.status !== 'REJECTED' &&
         userStore.hasAbilities(abilities.EDIT_ESTIMATE)
       "
-      v-slot="slotProps"
       @click="onMarkAsRejected(row.id)"
     >
       <BaseIcon
         name="XCircleIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('estimates.mark_as_rejected') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue

@@ -13,12 +13,11 @@
     <!-- edit expenseCategory  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.EDIT_EXPENSE)"
-      v-slot="slotProps"
       @click="editExpenseCategory(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -26,12 +25,11 @@
     <!-- delete expenseCategory  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
-      v-slot="slotProps"
       @click="removeExpenseCategory(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue

@@ -12,10 +12,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_EXPENSE)"
       :to="`/admin/expenses/${row.id}/edit`"
     >
-      <BaseDropdownItem v-slot="slotProps">
+      <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -24,12 +24,11 @@
     <!-- delete expense  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
-      v-slot="slotProps"
       @click="removeExpense(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue

@@ -12,20 +12,20 @@
       v-if="userStore.hasAbilities(abilities.EDIT_INVOICE)"
       :to="`/admin/invoices/${row.id}/edit`"
     >
-      <BaseDropdownItem v-show="row.allow_edit" v-slot="slotProps">
+      <BaseDropdownItem v-show="row.allow_edit">
         <BaseIcon
           name="PencilIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- Copy PDF url  -->
-    <BaseDropdownItem v-if="route.name === 'invoices.view'" v-slot="slotProps" @click="copyPdfUrl">
+    <BaseDropdownItem v-if="route.name === 'invoices.view'" @click="copyPdfUrl">
       <BaseIcon
         name="LinkIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.copy_pdf_url') }}
     </BaseDropdownItem>
@@ -38,29 +38,29 @@
       "
       :to="`/admin/invoices/${row.id}/view`"
     >
-      <BaseDropdownItem v-slot="slotProps">
+      <BaseDropdownItem>
         <BaseIcon
           name="EyeIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- Send Invoice Mail  -->
-    <BaseDropdownItem v-if="canSendInvoice(row)" v-slot="slotProps" @click="sendInvoice(row)">
+    <BaseDropdownItem v-if="canSendInvoice(row)" @click="sendInvoice(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('invoices.send_invoice') }}
     </BaseDropdownItem>
 
     <!-- Resend Invoice -->
-    <BaseDropdownItem v-if="canReSendInvoice(row)" v-slot="slotProps" @click="sendInvoice(row)">
+    <BaseDropdownItem v-if="canReSendInvoice(row)" @click="sendInvoice(row)">
       <BaseIcon
         name="PaperAirplaneIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('invoices.resend_invoice') }}
     </BaseDropdownItem>
@@ -69,21 +69,20 @@
     <router-link :to="`/admin/payments/${row.id}/create`">
       <BaseDropdownItem
         v-if="row.status == 'SENT' && route.name !== 'invoices.view'"
-        v-slot="slotProps"
       >
         <BaseIcon
           name="CreditCardIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('invoices.record_payment') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- Mark as sent Invoice -->
-    <BaseDropdownItem v-if="canSendInvoice(row)" v-slot="slotProps" @click="onMarkAsSent(row.id)">
+    <BaseDropdownItem v-if="canSendInvoice(row)" @click="onMarkAsSent(row.id)">
       <BaseIcon
         name="CheckCircleIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('invoices.mark_as_sent') }}
     </BaseDropdownItem>
@@ -91,12 +90,11 @@
     <!-- Clone Invoice into new invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
-      v-slot="slotProps"
       @click="cloneInvoiceData(row)"
     >
       <BaseIcon
         name="DocumentTextIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('invoices.clone_invoice') }}
     </BaseDropdownItem>
@@ -104,12 +102,11 @@
     <!--  Delete Invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_INVOICE)"
-      v-slot="slotProps"
       @click="removeInvoice(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue

@@ -12,8 +12,11 @@
       v-if="userStore.hasAbilities(abilities.EDIT_ITEM)"
       :to="`/admin/items/${row.id}/edit`"
     >
-      <BaseDropdownItem v-slot="slotProps">
-        <BaseIcon name="PencilIcon" :class="slotProps.class" />
+      <BaseDropdownItem>
+        <BaseIcon
+          name="PencilIcon"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+        />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
     </router-link>
@@ -21,10 +24,12 @@
     <!-- delete item  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_ITEM)"
-      v-slot="slotProps"
       @click="removeItem(row.id)"
     >
-      <BaseIcon name="TrashIcon" :class="slotProps.class" />
+      <BaseIcon
+        name="TrashIcon"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+      />
       {{ $t('general.delete') }}
     </BaseDropdownItem>
   </BaseDropdown>

resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue

@@ -10,12 +10,11 @@
     <!-- edit note  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.MANAGE_NOTE)"
-      v-slot="slotProps"
       @click="editNote(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -23,12 +22,11 @@
     <!-- delete note  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.MANAGE_NOTE)"
-      v-slot="slotProps"
       @click="removeNote(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue

@@ -8,31 +8,30 @@
     </template>
 
     <!-- Copy pdf url  -->
-    <BaseDropdownItem
+    <BaseDropdown-item
       v-if="
         route.name === 'payments.view' &&
         userStore.hasAbilities(abilities.VIEW_PAYMENT)
       "
-      v-slot="slotProps"
       class="rounded-md"
       @click="copyPdfUrl"
     >
       <BaseIcon
         name="LinkIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.copy_pdf_url') }}
-    </BaseDropdownItem>
+    </BaseDropdown-item>
 
     <!-- edit payment  -->
     <router-link
       v-if="userStore.hasAbilities(abilities.EDIT_PAYMENT)"
       :to="`/admin/payments/${row.id}/edit`"
     >
-      <BaseDropdownItem v-slot="slotProps">
+      <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -46,10 +45,10 @@
       "
       :to="`/admin/payments/${row.id}/view`"
     >
-      <BaseDropdownItem v-slot="slotProps">
+      <BaseDropdownItem>
         <BaseIcon
           name="EyeIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -62,12 +61,11 @@
         route.name !== 'payments.view' &&
         userStore.hasAbilities(abilities.SEND_PAYMENT)
       "
-      v-slot="slotProps"
       @click="sendPayment(row)"
     >
       <BaseIcon
         name="PaperAirplaneIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('payments.send_payment') }}
     </BaseDropdownItem>
@@ -75,12 +73,11 @@
     <!-- delete payment  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_PAYMENT)"
-      v-slot="slotProps"
       @click="removePayment(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue

@@ -8,19 +8,19 @@
     </template>
 
     <!-- edit paymentMode  -->
-    <BaseDropdownItem v-slot="slotProps"  @click="editPaymentMode(row.id)">
+    <BaseDropdownItem @click="editPaymentMode(row.id)">
       <BaseIcon
         name="PencilIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
 
     <!-- delete paymentMode  -->
-    <BaseDropdownItem v-slot="slotProps"  @click="removePaymentMode(row.id)">
+    <BaseDropdownItem @click="removePaymentMode(row.id)">
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue

@@ -15,10 +15,10 @@
       v-if="userStore.hasAbilities(abilities.EDIT_RECURRING_INVOICE)"
       :to="`/admin/recurring-invoices/${row.id}/edit`"
     >
-      <BaseDropdownItem v-slot="slotProps">
+      <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
@@ -32,10 +32,10 @@
       "
       :to="`recurring-invoices/${row.id}/view`"
     >
-      <BaseDropdownItem v-slot="slotProps">
+      <BaseDropdownItem>
         <BaseIcon
           name="EyeIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.view') }}
       </BaseDropdownItem>
@@ -44,12 +44,11 @@
     <!-- Delete Recurring Invoice  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_RECURRING_INVOICE)"
-      v-slot="slotProps"
       @click="removeMultipleRecurringInvoices(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue

@@ -10,12 +10,11 @@
     <!-- edit role  -->
     <BaseDropdownItem
       v-if="userStore.currentUser.is_owner"
-      v-slot="slotProps"
       @click="editRole(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -23,12 +22,11 @@
     <!-- delete role  -->
     <BaseDropdownItem
       v-if="userStore.currentUser.is_owner"
-      v-slot="slotProps"
       @click="removeRole(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue

@@ -10,12 +10,11 @@
     <!-- edit tax-type  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.EDIT_TAX_TYPE)"
-      v-slot="slotProps"
       @click="editTaxType(row.id)"
     >
       <BaseIcon
         name="PencilIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.edit') }}
     </BaseDropdownItem>
@@ -23,12 +22,11 @@
     <!-- delete tax-type  -->
     <BaseDropdownItem
       v-if="userStore.hasAbilities(abilities.DELETE_TAX_TYPE)"
-      v-slot="slotProps"
       @click="removeTaxType(row.id)"
     >
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue

@@ -9,20 +9,20 @@
 
     <!-- edit user  -->
     <router-link :to="`/admin/users/${row.id}/edit`">
-      <BaseDropdownItem v-slot="slotProps">
+      <BaseDropdownItem>
         <BaseIcon
           name="PencilIcon"
-          :class="slotProps.class"
+          class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
         />
         {{ $t('general.edit') }}
       </BaseDropdownItem>
     </router-link>
 
     <!-- delete user  -->
-    <BaseDropdownItem v-slot="slotProps" @click="removeUser(row.id)">
+    <BaseDropdownItem @click="removeUser(row.id)">
       <BaseIcon
         name="TrashIcon"
-        :class="slotProps.class"
+        class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
       />
       {{ $t('general.delete') }}
     </BaseDropdownItem>

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">
-      <label class="pr-2 mb-0" align="right">
+      <BaseLabel class="!pr-2 !mb-0" align="right">
         {{ $t('invoices.item.tax') }}
-      </label>
+      </BaseLabel>
 
       <BaseMultiselect
         v-model="selectedTax"
@@ -35,9 +35,9 @@
           >
             <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
 
-            <label
-              class="ml-2 text-sm leading-none cursor-pointer text-primary-400"
-              >{{ $t('invoices.add_new_tax') }}</label
+            <BaseLabel
+              class="!ml-2 !leading-none !cursor-pointer !text-primary-400"
+              >{{ $t('invoices.add_new_tax') }}</BaseLabel
             >
           </button>
         </template>

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

@@ -5,9 +5,9 @@
     >
       <SelectNotePopup :type="type" @select="onSelectNote" />
     </div>
-    <label class="text-gray-800 font-medium mb-4 text-sm">
+    <BaseLabel class="!text-gray-800 !mb-4 ">
       {{ $t('invoices.notes') }}
-    </label>
+    </BaseLabel>
     <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>
-      <label
+      <BaseLabel
         v-else
-        class="text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="!font-semibold  !text-gray-400 !uppercase"
       >
         {{ $t('estimates.sub_total') }}
-      </label>
+      </BaseLabel>
 
       <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 uppercase "
+        class="flex items-center justify-center m-0 text-lg text-black  dark:text-white 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"
+        class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase dark:text-gray-400"
       >
         {{ 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 uppercase "
+        class="flex items-center justify-center m-0 text-lg text-black dark:text-white 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>
-      <label
+      <BaseLabel
         v-else
-        class="text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class=" !font-semibold  !text-gray-400 !uppercase"
       >
         {{ $t('estimates.discount') }}
-      </label>
+      </BaseLabel>
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText
           :lines="1"
@@ -171,21 +171,21 @@
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <label
+      <BaseLabel
         v-else
-        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
-        >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
+        class="!m-0 !font-semibold  !text-gray-400 !uppercase"
+        >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</BaseLabel
       >
 
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
-      <label
+      <BaseLabel
         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" />
-      </label>
+      </BaseLabel>
     </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">
-    <label class="font-semibold leading-5 text-gray-500 uppercase">
+    <BaseLabel class="!font-semibold  !text-gray-500 !uppercase">
       {{ tax.name }} ({{ tax.percent }} %)
-    </label>
-    <label class="flex items-center justify-center text-lg text-black">
+    </BaseLabel>
+    <label class="flex items-center justify-center text-lg text-black dark:text-white">
       <BaseFormatMoney :amount="tax.amount" :currency="currency" />
 
       <BaseIcon

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

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

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

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

resources/scripts/admin/layouts/partials/TheSiteHeader.vue

@@ -24,8 +24,6 @@
       dark:border-white/10
     "
   >
-    <BaseDarkHighlight />
-
     <router-link
       to="/admin/dashboard"
       class="
@@ -74,7 +72,7 @@
         v-if="hasCreateAbilities"
         class="relative hidden float-left m-0 md:block"
       >
-        <BaseDropdown width-class="w-48" >
+        <BaseDropdown width-class="w-48">
           <template #activator>
             <div
               class="
@@ -88,21 +86,19 @@
                 bg-white
                 rounded
                 md:h-9 md:w-9
-                dark:bg-gray-700 dark:border-gray-500 dark:border
               "
             >
-              <BaseIcon name="PlusIcon" class="w-5 h-5 text-gray-600 dark:text-white" />
+              <BaseIcon name="PlusIcon" class="w-5 h-5 text-gray-600" />
             </div>
           </template>
 
           <router-link to="/admin/invoices/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
-              v-slot="slotProps"
             >
               <BaseIcon
                 name="DocumentTextIcon"
-                :class="slotProps.class"
+                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
               {{ $t('invoices.new_invoice') }}
@@ -111,11 +107,10 @@
           <router-link to="/admin/estimates/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
-              v-slot="slotProps"
             >
               <BaseIcon
                 name="DocumentIcon"
-                :class="slotProps.class"
+                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
               {{ $t('estimates.new_estimate') }}
@@ -125,11 +120,10 @@
           <router-link to="/admin/customers/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_CUSTOMER)"
-              v-slot="slotProps"
             >
               <BaseIcon
                 name="UserIcon"
-                :class="slotProps.class"
+                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
               {{ $t('customers.new_customer') }}
@@ -162,20 +156,20 @@
           </template>
 
           <router-link to="/admin/settings/account-settings">
-            <BaseDropdownItem v-slot="slotProps">
+            <BaseDropdownItem>
               <BaseIcon
                 name="CogIcon"
-                :class="slotProps.class"
+                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
               {{ $t('navigation.settings') }}
             </BaseDropdownItem>
           </router-link>
 
-          <BaseDropdownItem v-slot="slotProps" @click="logout">
+          <BaseDropdownItem @click="logout">
             <BaseIcon
               name="LogoutIcon"
-              :class="slotProps.class"
+              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
               aria-hidden="true"
             />
             {{ $t('navigation.logout') }}

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">
+          <label class="flex items-center justify-center text-gray-500 dark:text-gray-300">
             {{ $t('modules.no_modules_installed') }}
           </label>
         </div>

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

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

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

@@ -51,14 +51,14 @@
             </div>
           </template>
 
-          <BaseDropdownItem v-slot="slotProps" @click="onDownloadBckup(row.data)">
-            <BaseIcon name="CloudDownloadIcon" :class="slotProps.class" />
+          <BaseDropdownItem @click="onDownloadBckup(row.data)">
+            <BaseIcon name="CloudDownloadIcon" class="mr-3 text-gray-600" />
 
             {{ $t('general.download') }}
           </BaseDropdownItem>
 
-          <BaseDropdownItem v-slot="slotProps" @click="onRemoveBackup(row.data)">
-            <BaseIcon name="TrashIcon" :class="slotProps.class" />
+          <BaseDropdownItem @click="onRemoveBackup(row.data)">
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

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

@@ -45,30 +45,27 @@
 
           <BaseDropdownItem
             v-if="!row.data.set_as_default"
-            v-slot="slotProps"
             @click="setDefaultDiskData(row.data.id)"
           >
-            <BaseIcon :class="slotProps.class" name="CheckCircleIcon" />
+            <BaseIcon class="mr-3 tetx-gray-600" name="CheckCircleIcon" />
 
             {{ $t('settings.disk.set_default_disk') }}
           </BaseDropdownItem>
 
           <BaseDropdownItem
             v-if="row.data.type !== 'SYSTEM'"
-            v-slot="slotProps"
             @click="openEditDiskModal(row.data)"
           >
-            <BaseIcon name="PencilIcon" :class="slotProps.class" />
+            <BaseIcon name="PencilIcon" class="mr-3 text-gray-600" />
 
             {{ $t('general.edit') }}
           </BaseDropdownItem>
 
           <BaseDropdownItem
             v-if="row.data.type !== 'SYSTEM' && !row.data.set_as_default"
-            v-slot="slotProps"
             @click="removeDisk(row.data.id)"
           >
-            <BaseIcon name="TrashIcon" :class="slotProps.class" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

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

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

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

@@ -97,6 +97,7 @@
                   whitespace-nowrap
                   mr-2
                   min-w-[200px]
+                  dark:text-primary-400
                 "
               >
                 {{ element.label }}

resources/scripts/components/CompanySwitcher.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="companySwitchBar" class="relative rounded dark:text-white">
+  <div ref="companySwitchBar" class="relative rounded">
     <CompanyModal />
 
     <div
@@ -11,13 +11,11 @@
         h-8
         md:h-9
         ml-2
-      text-sm
-      text-white
+        text-sm text-white
         bg-white
         rounded
         cursor-pointer
         bg-opacity-20
-      dark:bg-gray-700
       "
       @click="isShow = !isShow"
     >
@@ -40,46 +38,32 @@
     >
       <div
         v-if="isShow"
-        class="
-        absolute
-        right-0
-        mt-2
-        bg-white
-        rounded-md
-        shadow-lg
-        dark:border
-        dark:border-white/10
-        dark:text-white
-        dark:bg-gray-800/[.95]
-        dark:shadow-glass
-        dark:backdrop-blur-xl
-        "
+        class="absolute right-0 mt-2 bg-white rounded-md shadow-lg"
       >
-        <BaseDarkHighlight class="z-[-1] top-0 left-0" />
         <div
           class="
             overflow-y-auto
-          scrollbar-thin
-          scrollbar-thumb-rounded-full
-          w-[250px] max-h-[350px]
-          scrollbar-thumb-gray-300
-          scrollbar-track-gray-10
+            scrollbar-thin scrollbar-thumb-rounded-full
+            w-[250px]
+            max-h-[350px]
+            scrollbar-thumb-gray-300 scrollbar-track-gray-10
             pb-4
           "
         >
-          <label
+          <BaseLabel
             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') }}
-          </label>
+          </BaseLabel>
 
           <div
             v-if="companyStore.companies.length < 1"
@@ -107,12 +91,9 @@
                   rounded-md
                   cursor-pointer
                   hover:bg-gray-100 hover:text-primary-500
-                dark:hover:bg-gray-700
-                text-gray-900
-                dark:text-white
                 "
                 :class="{
-                  'bg-gray-100 text-primary-500 dark:bg-gray-700':
+                  'bg-gray-100 text-primary-500':
                     companyStore.selectedCompany.id === company.id,
                 }"
                 @click="changeCompany(company)"
@@ -125,14 +106,13 @@
                       justify-center
                       mr-3
                       overflow-hidden
-                    text-sm
+                      text-base
                       font-semibold
                       bg-gray-200
                       rounded-md
                       w-9
                       h-9
                       text-primary-500
-                    dark:bg-gray-900
                     "
                   >
                     <span v-if="!company.logo">
@@ -161,12 +141,10 @@
             justify-center
             p-4
             pl-3
-          border-t-2
-          border-gray-100
+            border-t-2 border-gray-100
             cursor-pointer
             text-primary-400
             hover:text-primary-500
-          dark:border-gray-600
           "
           @click="addNewCompany"
         >

resources/scripts/components/GlobalSearchBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="searchBar" class="hidden rounded md:block relative dark:text-white">
+  <div ref="searchBar" class="hidden rounded md:block relative">
     <div>
       <BaseInput
         v-model="name"
@@ -41,11 +41,6 @@
           w-[300px]
           h-[200px]
           right-0
-          dark:border-white/10
-          dark:text-white
-          dark:bg-gray-800/[.95]
-          dark:shadow-glass
-          dark:backdrop-blur-xl
         "
       >
         <div
@@ -67,13 +62,13 @@
         </div>
         <div v-else>
           <div v-if="usersStore.customerList.length > 0">
-            <label class="text-sm text-gray-400 mb-0.5 block px-2 uppercase">
+            <BaseLabel class="!text-gray-400 !mb-0.5 !block !px-2 !uppercase">
               {{ $t('global_search.customers') }}
-            </label>
+            </BaseLabel>
             <div
               v-for="(customer, index) in usersStore.customerList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
             >
               <router-link
                 :to="{ path: `/admin/customers/${customer.id}/view` }"
@@ -92,7 +87,6 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
-                    dark:bg-gray-600
                   "
                 >
                   {{ initGenerator(customer.name) }}
@@ -114,15 +108,15 @@
           </div>
 
           <div v-if="usersStore.userList.length > 0" class="mt-2">
-            <label
-              class="text-sm text-gray-400 mb-2 block px-2 mb-0.5 uppercase"
+            <BaseLabel
+              class="!text-gray-400 !mb-2 !block !px-2 !uppercase"
             >
               {{ $t('global_search.users') }}
-            </label>
+            </BaseLabel>
             <div
               v-for="(user, index) in usersStore.userList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
             >
               <router-link
                 :to="{ path: `/admin/users/${user.id}/edit` }"

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'
+          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-white'
         } cursor-pointer `"
       >
         {{ label }}

resources/scripts/components/base/BaseCustomerSelectPopup.vue

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

resources/scripts/components/base/BaseDropdown.vue

@@ -69,8 +69,7 @@ const props = defineProps({
 })
 
 const containerClasses = computed(() => {
-  const baseClass = `dark:border dark:border-white/10 dark:text-white dark:bg-gray-800 dark:shadow-glass
-  origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none`
+  const baseClass = `origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none`
   return `${baseClass} ${props.containerClass}`
 })
 

resources/scripts/components/base/BaseDropdownItem.vue

@@ -2,20 +2,16 @@
   <MenuItem v-slot="{ active }" v-bind="$attrs">
     <a
       href="#"
-      class="group flex items-center px-4 py-2 text-sm font-normal"
       :class="[
-        active
-          ? 'bg-gray-100 text-gray-900 dark:text-white dark:bg-gray-700'
-          : 'text-gray-700 dark:text-gray-200',
+        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
+        'group flex items-center px-4 py-2 text-sm font-normal',
       ]"
     >
-      <slot :active="active" :class="defaultIconClass" />
+      <slot :active="active" />
     </a>
   </MenuItem>
 </template>
 
 <script setup>
 import { MenuItem } from '@headlessui/vue'
-const defaultIconClass =
-  'w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-white'
 </script>

resources/scripts/components/base/BaseEmptyPlaceholder.vue

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

resources/scripts/components/base/BaseFilterWrapper.vue

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

resources/scripts/components/base/BaseInputGroup.vue

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