add dark mode in BaseMoney and BaseTextArea

2025-10-27 11:41:09 -04:00 · 2023-03-22 15:51:10 +05:30
23 changed files with 165 additions and 228 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,23 +1,21 @@
 <template>
-  <div ref="companySwitchBar" class="relative rounded dark:text-white">
+  <div ref="companySwitchBar" class="relative rounded">
    <CompanyModal />

    <div
      class="
-      flex
-      items-center
-      justify-center
-      px-3
-      h-8
-      md:h-9
-      ml-2
-      text-sm
-      text-white
-      bg-white
-      rounded
-      cursor-pointer
-      bg-opacity-20
-      dark:bg-gray-700
+        flex
+        items-center
+        justify-center
+        px-3
+        h-8
+        md:h-9
+        ml-2
+        text-sm text-white
+        bg-white
+        rounded
+        cursor-pointer
+        bg-opacity-20
      "
      @click="isShow = !isShow"
    >
@ -40,42 +38,28 @@
    >
      <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
-          pb-4
+            overflow-y-auto
+            scrollbar-thin scrollbar-thumb-rounded-full
+            w-[250px]
+            max-h-[350px]
+            scrollbar-thumb-gray-300 scrollbar-track-gray-10
+            pb-4
          "
        >
          <label
            class="
-            px-3
-            py-2
-            text-xs
-            font-semibold
-            text-gray-400
-            mb-0.5
-            block uppercase
+              px-3
+              py-2
+              text-xs
+              font-semibold
+              text-gray-400
+              mb-0.5
+              block
+              uppercase
            "
          >
            {{ $t('company_switcher.label') }}
@ -84,13 +68,13 @@
          <div
            v-if="companyStore.companies.length < 1"
            class="
-            flex flex-col
-            items-center
-            justify-center
-            p-2
-            px-3
-            mt-4
-            text-base text-gray-400
+              flex flex-col
+              items-center
+              justify-center
+              p-2
+              px-3
+              mt-4
+              text-base text-gray-400
            "
          >
            <BaseIcon name="ExclamationCircleIcon" class="h-5 text-gray-400" />
@ -102,17 +86,14 @@
                v-for="(company, index) in companyStore.companies"
                :key="index"
                class="
-                p-2
-                px-3
-                rounded-md
-                cursor-pointer
-                hover:bg-gray-100 hover:text-primary-500
-                dark:hover:bg-gray-700
-                text-gray-900
-                dark:text-white
+                  p-2
+                  px-3
+                  rounded-md
+                  cursor-pointer
+                  hover:bg-gray-100 hover:text-primary-500
                "
                :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)"
@ -120,19 +101,18 @@
                <div class="flex items-center">
                  <span
                    class="
-                    flex
-                    items-center
-                    justify-center
-                    mr-3
-                    overflow-hidden
-                    text-sm
-                    font-semibold
-                    bg-gray-200
-                    rounded-md
-                    w-9
-                    h-9
-                    text-primary-500
-                    dark:bg-gray-900
+                      flex
+                      items-center
+                      justify-center
+                      mr-3
+                      overflow-hidden
+                      text-base
+                      font-semibold
+                      bg-gray-200
+                      rounded-md
+                      w-9
+                      h-9
+                      text-primary-500
                    "
                  >
                    <span v-if="!company.logo">
@ -156,17 +136,15 @@
        <div
          v-if="userStore.currentUser.is_owner"
          class="
-          flex
-          items-center
-          justify-center
-          p-4
-          pl-3
-          border-t-2
-          border-gray-100
-          cursor-pointer
-          text-primary-400
-          hover:text-primary-500
-          dark:border-gray-600
+            flex
+            items-center
+            justify-center
+            p-4
+            pl-3
+            border-t-2 border-gray-100
+            cursor-pointer
+            text-primary-400
+            hover:text-primary-500
          "
          @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/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/BaseMoney.vue
+++ b/resources/scripts/components/base/BaseMoney.vue
@ -39,7 +39,7 @@ const props = defineProps({
  inputClass: {
    type: String,
    default:
-      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black  dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500',
  },
  disabled: {
    type: Boolean,
@ -86,7 +86,7 @@ const currencyBindings = computed(() => {

 const invalidClass = computed(() => {
  if (props.invalid) {
-    return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
+    return 'border-red-500 dark:border-red-500 ring-red-500 dark:ring-red-500 focus:ring-red-500 dark:focus:ring-red-500 focus:border-red-500 dark:focus:border-red-500'
  }
  return 'focus:ring-primary-400 focus:border-primary-400'
 })
--- a/resources/scripts/components/base/BaseTextarea.vue
+++ b/resources/scripts/components/base/BaseTextarea.vue
@ -45,7 +45,7 @@ const props = defineProps({
  defaultInputClass: {
    type: String,
    default:
-      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 border-solid rounded outline-none',
+      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 dark:border-gray-600 border-solid rounded outline-none  dark:bg-gray-700 dark:text-white',
  },
  autosize: {
    type: Boolean,