Add dark mode in BaseEmptyPlaceholder

add dark mode in BaseFilterWrapper (#1189 )
add dark mode in base dialog component (#1174 )
2025-10-29 20:51:09 -04:00 · 2023-03-27 14:49:28 +05:30 · 2023-03-25 18:44:29 +05:30 · 2023-03-25 17:44:00 +05:30 · 2023-03-25 17:22:28 +05:30 · 2023-03-25 17:02:36 +05:30
35 changed files with 322 additions and 286 deletions
--- a/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/components/dropdowns/UserIndexDropdown.vue
+++ b/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>
--- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
+++ b/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') }}
--- a/resources/scripts/admin/views/settings/BackupSetting.vue
+++ b/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>
--- a/resources/scripts/admin/views/settings/FileDiskSetting.vue
+++ b/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>
--- a/resources/scripts/components/CompanySwitcher.vue
+++ b/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,30 +38,15 @@
    >
      <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
          "
        >
@ -75,7 +58,8 @@
              font-semibold
              text-gray-400
              mb-0.5
-            block uppercase
+              block
+              uppercase
            "
          >
            {{ $t('company_switcher.label') }}
@ -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"
        >
--- a/resources/scripts/components/GlobalSearchBar.vue
+++ b/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
@ -73,7 +68,7 @@
            <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) }}
@ -122,7 +116,7 @@
            <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` }"
--- a/resources/scripts/components/base-select/BaseMultiselect.vue
+++ b/resources/scripts/components/base-select/BaseMultiselect.vue
@ -437,21 +437,22 @@ export default {
      required: false,
      default: () => ({
        container:
-          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 rounded-md bg-white text-sm leading-snug outline-none max-h-10',
+          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-sm leading-snug outline-none max-h-10',
        containerDisabled:
-          'cursor-default bg-gray-200 bg-opacity-50 !text-gray-400',
+          'bg-gray-200 bg-opacity-50 !text-gray-400 dark:!text-gray-800 !dark:text-gray-500 !cursor-default dark:opacity-25',
        containerOpen: '',
        containerOpenTop: '',
        containerActive: 'ring-1 ring-primary-400 border-primary-400',
        containerInvalid:
-          'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400',
-        containerInvalidActive: 'ring-1 border-red-400 ring-red-400',
+          'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500 dark:border-red-500 dark:ring-red-500 dark:focus:ring-red-500 dark:focus:border-red-500',
+        containerInvalidActive:
+          'ring-1 border-red-500 ring-red-500 dark:ring-1 dark:border-red-500 dark:ring-red-500',
        singleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
        multipleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
        search:
-          'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5',
+          'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5 border-transparent focus:border-transparent focus:ring-0 dark:bg-gray-700 dark:text-white',
        tags: 'grow shrink flex flex-wrap mt-1 pl-2',
        tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap',
        tagDisabled: 'pr-2 !bg-gray-400 text-white',
@ -461,12 +462,12 @@ export default {
          'bg-multiselect-remove text-white bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
        tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
        tagsSearch:
-          'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
+          'absolute inset-0 border-0 focus:outline-none !shadow-none !focus:shadow-none appearance-none p-0 sm:text-sm font-sans box-border w-full dark:bg-gray-700',
        tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
        placeholder:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 text-sm',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 sm:text-sm dark:text-gray-500',
        caret:
-          'bg-multiselect-caret bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform',
+          'bg-multiselect-caret-black dark:bg-multiselect-caret-white bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform dark:text-white',
        caretOpen: 'rotate-180 pointer-events-auto',
        clear:
          'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80',
@ -475,7 +476,7 @@ export default {
        spinner:
          'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0',
        dropdown:
-          'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 translate-y-full border border-gray-300 mt-1 overflow-y-auto z-50 bg-white flex flex-col rounded-md',
+          'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 translate-y-full border border-gray-300 mt-1 overflow-y-auto z-50 bg-white dark:border-gray-600 flex flex-col rounded-md dark:bg-gray-800 dark:shadow-glass',
        dropdownTop:
          '-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
        dropdownHidden: 'hidden',
@ -483,7 +484,7 @@ export default {
        optionsTop: 'flex-col-reverse',
        group: 'p-0 m-0',
        groupLabel:
-          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
+          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 dark:bg-gray-700 dark:text-gray-400 cursor-default leading-normal',
        groupLabelPointable: 'cursor-pointer',
        groupLabelPointed: 'bg-gray-300 text-gray-700',
        groupLabelSelected: 'bg-primary-600 text-white',
@ -493,15 +494,18 @@ export default {
          'text-primary-100 bg-primary-600 bg-opacity-50 cursor-not-allowed',
        groupOptions: 'p-0 m-0',
        option:
-          'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
-        optionPointed: 'text-gray-800 bg-gray-100',
+          'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3 dark:text-gray-200',
+        optionPointed:
+          'text-gray-800 bg-gray-100 dark:text-white dark:bg-gray-700/30',
        optionSelected: 'text-white bg-primary-500',
-        optionDisabled: 'text-gray-300 cursor-not-allowed',
+        optionDisabled: 'text-gray-300 cursor-not-allowed dark:text-gray-400',
        optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
        optionSelectedDisabled:
          'text-primary-100 bg-primary-500 bg-opacity-50 cursor-not-allowed',
-        noOptions: 'py-2 px-3 text-gray-600 bg-white',
-        noResults: 'py-2 px-3 text-gray-600 bg-white',
+        noOptions:
+          'py-2 px-3 text-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200',
+        noResults:
+          'py-2 px-3 text-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200',
        fakeInput:
          'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
        spacer: 'h-9 py-px box-content',
--- a/resources/scripts/components/base/BaseBreadcrumb.vue
+++ b/resources/scripts/components/base/BaseBreadcrumb.vue
@ -1,6 +1,6 @@
 <template>
  <nav>
-    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset">
+    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset dark:text-gray-400">
      <slot />
    </ol>
  </nav>
--- a/resources/scripts/components/base/BaseBreadcrumbItem.vue
+++ b/resources/scripts/components/base/BaseBreadcrumbItem.vue
@ -8,7 +8,9 @@
        font-medium
        leading-5
        text-gray-900
+        dark:text-gray-400
        outline-none
+        dark:focus:ring-offset-gray-900
        focus:ring-2 focus:ring-offset-2 focus:ring-primary-400
      "
      :to="to"
--- a/resources/scripts/components/base/BaseButton.vue
+++ b/resources/scripts/components/base/BaseButton.vue
@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
+
 const props = defineProps({
  contentLoading: {
    type: Boolean,
@ -9,7 +10,7 @@ const props = defineProps({
  defaultClass: {
    type: String,
    default:
-      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
+      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800',
  },
  tag: {
    type: String,
@ -27,6 +28,10 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  loadingRight: {
+    type: Boolean,
+    default: false,
+  },
  size: {
    type: String,
    default: 'md',
@ -81,17 +86,17 @@ const placeHolderSize = computed(() => {

 const variantClass = computed(() => {
  return {
-    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
+    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 dark:bg-primary-500 dark:hover:bg-primary-600':
      props.variant === 'primary',
    'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
      props.variant === 'secondary',
-    'border-transparent  border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500':
+    'border-transparent border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-100 shadow-inner focus:ring-primary-500 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-transparent dark:hover:text-primary-500 dark:hover:border-primary-500':
      props.variant == 'primary-outline',
-    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
+    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-900':
      props.variant == 'white',
    'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
      props.variant === 'danger',
-    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
+    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0 dark:bg-gray-600 dark:text-white dark:hover:bg-opacity-60':
      props.variant === 'gray',
  }
 })
@ -124,6 +129,13 @@ const iconRightClass = computed(() => {
    'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl',
  }
 })
+
+const buttonDisabledClass = computed(() => {
+  if (props.disabled || props.loading)
+    return 'cursor-not-allowed bg-opacity-70 dark:!bg-opacity-40 hover:!bg-opacity-70 pointer-event-none'
+
+  return ''
+})
 </script>

 <template>
@ -141,15 +153,17 @@ const iconRightClass = computed(() => {
  <BaseCustomTag
    v-else
    :tag="tag"
-    :disabled="disabled"
-    :class="[defaultClass, sizeClass, variantClass, roundedClass]"
+    :disabled="disabled || loading"
+    :class="[defaultClass, sizeClass, variantClass, roundedClass, buttonDisabledClass]"
  >
-    <SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" />
+    <SpinnerIcon v-if="loading && !loadingRight" :class="[iconLeftClass, iconVariantClass]" />

-    <slot v-else name="left" :class="iconLeftClass"></slot>
+    <slot v-else name="left" :class="iconLeftClass" />

    <slot />

-    <slot name="right" :class="[iconRightClass, iconVariantClass]"></slot>
+    <SpinnerIcon v-if="loading && loadingRight" :class="[iconRightClass, iconVariantClass]" />
+
+    <slot v-else name="right" :class="[iconRightClass, iconVariantClass]" />
  </BaseCustomTag>
 </template>
--- a/resources/scripts/components/base/BaseCard.vue
+++ b/resources/scripts/components/base/BaseCard.vue
@ -1,5 +1,9 @@
 <template>
-  <div class="bg-white rounded-lg shadow">
+  <div
+    class="bg-white rounded-lg shadow dark:bg-gray-800 dark:text-white dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70 relative"
+  >
+    <BaseDarkHighlight class="z-[-1] mt-10" />
+
    <div
      v-if="hasHeaderSlot"
      class="px-5 py-4 text-black border-b border-gray-100 border-solid"
--- a/resources/scripts/components/base/BaseContentPlaceholders.vue
+++ b/resources/scripts/components/base/BaseContentPlaceholders.vue
@ -39,6 +39,8 @@ $base-content-placeholders-border-radius: 6px !default;
 $base-content-placeholders-line-height: 15px !default;
 $base-content-placeholders-spacing: 10px !default;

+$base-content-placeholders-primary-color-dark: rgb(71, 85, 105) !default;
+$base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
 // Animations
@keyframes vueContentPlaceholdersAnimation {
  0% {
@ -57,6 +59,10 @@ $base-content-placeholders-spacing: 10px !default;
  min-height: $base-content-placeholders-line-height;
  background: $base-content-placeholders-secondary-color;

+  .dark & {
+    background: $base-content-placeholders-secondary-color-dark;
+  }
+
  .base-content-placeholders-is-rounded & {
    border-radius: $base-content-placeholders-border-radius;
  }
@ -86,6 +92,15 @@ $base-content-placeholders-spacing: 10px !default;
    animation-name: vueContentPlaceholdersAnimation;
    animation-timing-function: linear;
  }
+
+  .dark .base-content-placeholders-is-animated &::before {
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
+      transparent 30%
+    );
+  }
 }

@mixin base-content-placeholders-spacing {
@ -156,6 +171,10 @@ $base-content-placeholders-spacing: 10px !default;
  min-height: $base-content-placeholders-line-height;
  background: $base-content-placeholders-secondary-color;

+  .dark & {
+    background: $base-content-placeholders-secondary-color-dark;
+  }
+  
  .base-content-placeholders-is-animated &::before {
    content: '';
    position: absolute;
@ -177,6 +196,14 @@ $base-content-placeholders-spacing: 10px !default;
    animation-timing-function: linear;
  }

+    .dark .base-content-placeholders-is-animated &::before {
+      background: linear-gradient(
+      to right,
+      transparent 0%,
+      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
+      transparent 30%
+    );
+  }
  // @include base-content-placeholders-spacing;
 }

--- a/resources/scripts/components/base/BaseDarkHighlight.vue
+++ b/resources/scripts/components/base/BaseDarkHighlight.vue
@ -0,0 +1,21 @@
+<template>
+  <div
+    class="
+      hidden
+      top-0
+      w-full
+      absolute
+      ml-auto
+      mr-auto
+      left-0
+      right-0
+      text-center
+      h-full
+      rounded-full
+      bg-highlight/[.10]
+      blur-2xl
+      dark:block
+      z-[-1]
+    "
+  />
+</template>
--- a/resources/scripts/components/base/BaseDialog.vue
+++ b/resources/scripts/components/base/BaseDialog.vue
@ -30,8 +30,13 @@
          leave-to="opacity-0"
        >
          <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
+            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:backdrop-blur-xl dark:bg-gray-900/80"
+          >
+           <BaseDarkHighlight
+            class="!bg-highlight/[.17] !top-1/2 h-60 -translate-y-1/2 mt-5"
+            :class="dialogSizeClasses"
          />
+          </DialogOverlay>
        </TransitionChild>

        <!-- This element is to trick the browser into centering the modal contents. -->
@ -64,6 +69,11 @@
              shadow-xl
              sm:my-8 sm:align-middle sm:w-full sm:p-6
              relative
+              dark:backdrop-blur-xl
+              dark:shadow-glass
+              dark:border
+              dark:border-white/10
+              dark:bg-gray-800
            "
            :class="dialogSizeClasses"
          >
@ -80,31 +90,31 @@
                  rounded-full
                "
                :class="{
-                  'bg-green-100': dialogStore.variant === 'primary',
-                  'bg-red-100': dialogStore.variant === 'danger',
+                  'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
+                  'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
                }"
              >
                <BaseIcon
                  v-if="dialogStore.variant === 'primary'"
                  name="CheckIcon"
-                  class="w-6 h-6 text-green-600"
+                  class="w-6 h-6 text-green-600 dark:text-white"
                />
                <BaseIcon
                  v-else
                  name="ExclamationIcon"
-                  class="w-6 h-6 text-red-600"
+                  class="w-6 h-6 text-red-600 dark:text-white"
                  aria-hidden="true"
                />
              </div>
              <div class="mt-3 text-center sm:mt-5">
                <DialogTitle
                  as="h3"
-                  class="text-lg font-medium leading-6 text-gray-900"
+                  class="text-lg font-medium leading-6 text-gray-900 dark:text-white"
                >
                  {{ dialogStore.title }}
                </DialogTitle>
                <div class="mt-2">
-                  <p class="text-sm text-gray-500">
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
                    {{ dialogStore.message }}
                  </p>
                </div>
--- a/resources/scripts/components/base/BaseDropdown.vue
+++ b/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}`
 })

--- a/resources/scripts/components/base/BaseDropdownItem.vue
+++ b/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>
--- a/resources/scripts/components/base/BaseEmptyPlaceholder.vue
+++ b/resources/scripts/components/base/BaseEmptyPlaceholder.vue
@ -1,13 +1,17 @@
 <template>
  <div class="flex flex-col items-center justify-center mt-16">
+    <div class="relative">
+      <BaseDarkHighlight class="bg-highlight/[.07] top-2" />
+
+      <div class="relative z-5 flex flex-col items-center">
        <div class="flex flex-col items-center justify-center">
-      <slot></slot>
+          <slot />
        </div>
        <div class="mt-2">
          <label class="font-medium">{{ title }}</label>
        </div>
-    <div class="mt-2">
-      <label class="text-gray-500">
+        <div class="mt-2 text-center md:text-left">
+          <label class="text-gray-500 dark:text-gray-400">
            {{ description }}
          </label>
        </div>
@ -15,6 +19,8 @@
          <slot name="actions" />
        </div>
      </div>
+    </div>
+  </div>
 </template>

 <script setup>
--- a/resources/scripts/components/base/BaseFilterWrapper.vue
+++ b/resources/scripts/components/base/BaseFilterWrapper.vue
@ -7,7 +7,7 @@
    leave-from-class="opacity-100"
    leave-to-class="opacity-0"
  >
-    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded">
+    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded dark:bg-gray-800">
      <slot name="filter-header" />

      <label
@ -20,6 +20,7 @@
          hover:text-gray-700
          top-2.5
          right-3.5
+          dark:text-gray-300
        "
        @click="$emit('clear')"
      >
--- a/resources/scripts/components/base/BasePageHeader.vue
+++ b/resources/scripts/components/base/BasePageHeader.vue
@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-wrap justify-between">
    <div>
-      <h3 class="text-2xl font-bold text-left text-black">
+      <h3 class="text-2xl font-bold text-left text-black dark:text-white">
        {{ title }}
      </h3>
      <slot />
--- a/resources/scripts/components/base/BaseSwitch.vue
+++ b/resources/scripts/components/base/BaseSwitch.vue
@ -7,7 +7,7 @@

      <Switch
        v-model="enabled"
-        :class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
+        :class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
        class="
          relative
          inline-flex
@ -21,7 +21,11 @@
        v-bind="$attrs"
      >
        <span
-          :class="enabled ? 'translate-x-6' : 'translate-x-1'"
+          :class="
+            enabled
+              ? 'translate-x-6 dark:bg-white'
+              : 'translate-x-1 dark:bg-gray-500'
+          "
          class="
            inline-block
            w-4
--- a/resources/scripts/components/base/BaseSwitchSection.vue
+++ b/resources/scripts/components/base/BaseSwitchSection.vue
@ -5,12 +5,12 @@
    <div class="flex flex-col">
      <SwitchLabel
        as="p"
-        class="p-0 mb-1 text-sm leading-snug text-black font-medium"
+        class="p-0 mb-1 text-sm leading-snug text-black font-medium dark:text-white"
        passive
      >
        {{ title }}
      </SwitchLabel>
-      <SwitchDescription class="text-sm text-gray-500">
+      <SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
        {{ description }}
      </SwitchDescription>
    </div>
@ -18,7 +18,7 @@
      :disabled="disabled"
      :model-value="modelValue"
      :class="[
-        modelValue ? 'bg-primary-500' : 'bg-gray-200',
+        modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
        'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
      ]"
      @update:modelValue="onUpdate"
@ -26,7 +26,7 @@
      <span
        aria-hidden="true"
        :class="[
-          modelValue ? 'translate-x-5' : 'translate-x-0',
+          modelValue ? 'translate-x-5 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
          'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
        ]"
      />
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -36,6 +36,7 @@ module.exports = {
          900: withOpacityValue('--color-primary-900'),
        },
        black: '#040405',
+        highlight: 'rgb(56, 189, 248)',
        red: colors.red,
        teal: colors.teal,
        gray: colors.slate,
@ -44,10 +45,15 @@ module.exports = {
        88: '22rem',
      },
      backgroundImage: (theme) => ({
-        'multiselect-caret': `url("${svgToDataUri(
-          `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        'multiselect-caret-black': `url("${svgToDataUri(
+          `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="black">
            <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
-</svg>`
+          </svg>`,
+        )}")`,
+        'multiselect-caret-white': `url("${svgToDataUri(
+          `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
+            <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>`,
        )}")`,
        'multiselect-spinner': `url("${svgToDataUri(
          `<svg viewBox="0 0 512 512" fill="${theme(
Author	SHA1	Message	Date
yashkanakiya	19e20474e7	Add dark mode in BaseEmptyPlaceholder	2023-03-27 14:49:28 +05:30
Yash Kanakiya	c5acf1343e	add dark mode in BaseFilterWrapper (#1189 )	2023-03-25 18:44:29 +05:30
Yash Kanakiya	0321ca5515	add dark mode in base dialog component (#1174 )	2023-03-25 17:44:00 +05:30
Yash Kanakiya	bd345949e5	add dark mode in BaseContentPlaceholders (#1184 )	2023-03-25 17:22:28 +05:30
Yash Kanakiya	b4b00ebdd6	add dark base switch & base switcher (#1173 ) * add dark mode base switch & switcher * fix indentation	2023-03-25 17:02:36 +05:30
Yash Kanakiya	43316dae28	add dark mode in BreadCrumb and PageHeader. (#1172 )	2023-03-25 16:50:44 +05:30
Yash Kanakiya	80e2548b38	add base multiselect (#1163 ) * add base multiselect * fix invalid state class in dark mode --------- Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>	2023-03-25 16:47:40 +05:30
Yogesh Gohil	e8d92cd641	Merge pull request #1158 from crater-invoice/dark-button add dark mode in button	2023-03-25 12:47:52 +05:30
yogesh-gohil	2c8bb38531	add disabled button class and loading right prop	2023-03-25 12:38:37 +05:30
Yogesh Gohil	04c7ae39a2	Merge pull request #1157 from crater-invoice/dark-card add dark card and dark highlight component	2023-03-25 12:08:38 +05:30
yashkanakiya	af2482a69c	fix white variant dark mode in base button	2023-03-23 15:04:53 +05:30
yashkanakiya	cac35826c2	add dark mode in button	2023-03-20 18:22:30 +05:30
yashkanakiya	18b5705372	Merge branch 'dark-mode' of https://github.com/crater-invoice/crater into dark-card	2023-03-20 17:20:03 +05:30
yashkanakiya	c61fbad5ce	add dark base card and darkHighlight component	2023-03-20 16:31:56 +05:30
yashkanakiya	2e93082282	add dark theme in blade file	2023-03-20 11:45:14 +05:30
yashkanakiya	ca55221c4f	add dark mode in sidebar and header	2023-03-17 18:25:17 +05:30