fix dropdown issues

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue

@@ -153,7 +153,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue

@@ -132,7 +132,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/LocalDisk.vue

@@ -63,7 +63,7 @@
         </div>
 
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/S3Disk.vue

@@ -134,7 +134,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

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

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

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

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

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

@@ -45,27 +45,30 @@
 
           <BaseDropdownItem
             v-if="!row.data.set_as_default"
+            v-slot="slotProps"
             @click="setDefaultDiskData(row.data.id)"
           >
-            <BaseIcon class="mr-3 tetx-gray-600" name="CheckCircleIcon" />
+            <BaseIcon :class="slotProps.class" 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="mr-3 text-gray-600" />
+            <BaseIcon name="PencilIcon" :class="slotProps.class" />
 
             {{ $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="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" :class="slotProps.class" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>

resources/scripts/components/CompanySwitcher.vue

@@ -1,21 +1,23 @@
 <template>
-  <div ref="companySwitchBar" class="relative rounded">
+  <div ref="companySwitchBar" class="relative rounded dark:text-white">
     <CompanyModal />
 
     <div
       class="
-        flex
+      flex
-        items-center
+      items-center
-        justify-center
+      justify-center
-        px-3
+      px-3
-        h-8
+      h-8
-        md:h-9
+      md:h-9
-        ml-2
+      ml-2
-        text-sm text-white
+      text-sm
-        bg-white
+      text-white
-        rounded
+      bg-white
-        cursor-pointer
+      rounded
-        bg-opacity-20
+      cursor-pointer
+      bg-opacity-20
+      dark:bg-gray-700
       "
       @click="isShow = !isShow"
     >
@@ -38,28 +40,42 @@
     >
       <div
         v-if="isShow"
-        class="absolute right-0 mt-2 bg-white rounded-md shadow-lg"
+        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
+        "
       >
+        <BaseDarkHighlight class="z-[-1] top-0 left-0" />
         <div
           class="
-            overflow-y-auto
+          overflow-y-auto
-            scrollbar-thin scrollbar-thumb-rounded-full
+          scrollbar-thin
-            w-[250px]
+          scrollbar-thumb-rounded-full
-            max-h-[350px]
+          w-[250px] max-h-[350px]
-            scrollbar-thumb-gray-300 scrollbar-track-gray-10
+          scrollbar-thumb-gray-300
-            pb-4
+          scrollbar-track-gray-10
+          pb-4
           "
         >
           <label
             class="
-              px-3
+            px-3
-              py-2
+            py-2
-              text-xs
+            text-xs
-              font-semibold
+            font-semibold
-              text-gray-400
+            text-gray-400
-              mb-0.5
+            mb-0.5
-              block
+            block uppercase
-              uppercase
             "
           >
             {{ $t('company_switcher.label') }}
@@ -68,13 +84,13 @@
           <div
             v-if="companyStore.companies.length < 1"
             class="
-              flex flex-col
+            flex flex-col
-              items-center
+            items-center
-              justify-center
+            justify-center
-              p-2
+            p-2
-              px-3
+            px-3
-              mt-4
+            mt-4
-              text-base text-gray-400
+            text-base text-gray-400
             "
           >
             <BaseIcon name="ExclamationCircleIcon" class="h-5 text-gray-400" />
@@ -86,14 +102,17 @@
                 v-for="(company, index) in companyStore.companies"
                 :key="index"
                 class="
-                  p-2
+                p-2
-                  px-3
+                px-3
-                  rounded-md
+                rounded-md
-                  cursor-pointer
+                cursor-pointer
-                  hover:bg-gray-100 hover:text-primary-500
+                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':
+                  'bg-gray-100 text-primary-500 dark:bg-gray-700':
                     companyStore.selectedCompany.id === company.id,
                 }"
                 @click="changeCompany(company)"
@@ -101,18 +120,19 @@
                 <div class="flex items-center">
                   <span
                     class="
-                      flex
+                    flex
-                      items-center
+                    items-center
-                      justify-center
+                    justify-center
-                      mr-3
+                    mr-3
-                      overflow-hidden
+                    overflow-hidden
-                      text-base
+                    text-sm
-                      font-semibold
+                    font-semibold
-                      bg-gray-200
+                    bg-gray-200
-                      rounded-md
+                    rounded-md
-                      w-9
+                    w-9
-                      h-9
+                    h-9
-                      text-primary-500
+                    text-primary-500
+                    dark:bg-gray-900
                     "
                   >
                     <span v-if="!company.logo">
@@ -136,15 +156,17 @@
         <div
           v-if="userStore.currentUser.is_owner"
           class="
-            flex
+          flex
-            items-center
+          items-center
-            justify-center
+          justify-center
-            p-4
+          p-4
-            pl-3
+          pl-3
-            border-t-2 border-gray-100
+          border-t-2
-            cursor-pointer
+          border-gray-100
-            text-primary-400
+          cursor-pointer
-            hover:text-primary-500
+          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">
+  <div ref="searchBar" class="hidden rounded md:block relative dark:text-white">
     <div>
       <BaseInput
         v-model="name"
@@ -41,6 +41,11 @@
           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
@@ -68,7 +73,7 @@
             <div
               v-for="(customer, index) in usersStore.customerList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
             >
               <router-link
                 :to="{ path: `/admin/customers/${customer.id}/view` }"
@@ -87,6 +92,7 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
+                    dark:bg-gray-600
                   "
                 >
                   {{ initGenerator(customer.name) }}
@@ -116,7 +122,7 @@
             <div
               v-for="(user, index) in usersStore.userList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
             >
               <router-link
                 :to="{ path: `/admin/users/${user.id}/edit` }"

resources/scripts/components/base/BaseDropdown.vue

@@ -69,7 +69,8 @@ const props = defineProps({
 })
 
 const containerClasses = computed(() => {
-  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`
+  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`
   return `${baseClass} ${props.containerClass}`
 })
 

resources/scripts/components/base/BaseDropdownItem.vue

@@ -2,16 +2,20 @@
   <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' : 'text-gray-700',
+        active
-        'group flex items-center px-4 py-2 text-sm font-normal',
+          ? 'bg-gray-100 text-gray-900 dark:text-white dark:bg-gray-700'
+          : 'text-gray-700 dark:text-gray-200',
       ]"
     >
-      <slot :active="active" />
+      <slot :active="active" :class="defaultIconClass" />
     </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/BaseModal.vue

@@ -29,21 +29,8 @@
             leave-to="opacity-0"
           >
             <DialogOverlay
-              class="
+              class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
-              fixed
+            />
-              inset-0
-              transition-opacity
-              bg-gray-700
-              bg-opacity-25
-              dark:backdrop-blur-sm
-              dark:bg-gray-900/80
-              "
-            >
-              <BaseDarkHighlight
-                class="!bg-highlight/[.17] !top-1/2 -translate-y-1/2 mt-5 h-96"
-                :class="modalSize"
-              />
-            </DialogOverlay>
           </TransitionChild>
 
           <!-- This element is to trick the browser into centering the modal contents. -->
@@ -74,11 +61,7 @@
               my-4
               ${modalSize}
               sm:w-full
-              dark:shadow-glass
+              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
-              dark:border
-              dark:border-white/10
-              dark:bg-gray-800/90
-              border-t-8 border-solid rounded shadow-xl border-primary-500`"
             >
               <div
                 v-if="hasHeaderSlot"
@@ -91,8 +74,6 @@
                   text-lg
                   font-medium
                   text-black
-                  dark:text-white
-                  dark:border-gray-600
                   border-b border-gray-200 border-solid
                 "
               >

resources/scripts/components/base/BaseModalFooter.vue

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