fix indentation on dashboard chart

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -130,7 +130,6 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
-          dark:border-gray-600
         "
       >
         <!-- Tabs -->

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

@@ -127,7 +127,6 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
-          dark:border-gray-600
         "
       >
         <!-- Tabs -->

resources/scripts/admin/views/recurring-invoices/Index.vue

@@ -121,7 +121,6 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
-          dark:border-gray-600
         "
       >
         <!-- Tabs -->

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

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

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

@@ -113,10 +113,10 @@
 
       <div v-if="companyStore.companies.length !== 1" class="py-5">
         <BaseDivider class="my-4" />
-        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+        <h3 class="text-lg leading-6 font-medium text-gray-900">
           {{ $tc('settings.company_info.delete_company') }}
         </h3>
-        <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
+        <div class="mt-2 max-w-xl text-sm text-gray-500">
           <p>
             {{ $tc('settings.company_info.delete_company_description') }}
           </p>

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

@@ -7,7 +7,7 @@
           {{ $t('settings.menu_title.exchange_rate') }}
         </h6>
         <p
-          class="mt-2 text-sm leading-snug text-left text-gray-500 dark:text-gray-400"
+          class="mt-2 text-sm leading-snug text-left text-gray-500"
           style="max-width: 680px"
         >
           {{ $t('settings.exchange_rate.providers_description') }}

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

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

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

@@ -1,12 +1,12 @@
 <template>
-  <BaseHeading
+  <h6 class="text-gray-900 text-lg font-medium">
-    type="heading-title"
-    :subtitle="
-      $t(`settings.customization.${type}s.${type}_number_format_description`)
-    "
-  >
     {{ $t(`settings.customization.${type}s.${type}_number_format`) }}
-  </BaseHeading>
+  </h6>
+  <p class="mt-1 text-sm text-gray-500">
+    {{
+      $t(`settings.customization.${type}s.${type}_number_format_description`)
+    }}
+  </p>
 
   <div class="overflow-x-auto">
     <table class="w-full mt-6 table-fixed">
@@ -29,7 +29,6 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
-              dark:border-gray-600
             "
           ></th>
           <th
@@ -42,7 +41,6 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
-              dark:text-gray-300 dark:border-gray-600
             "
           >
             Component
@@ -57,7 +55,6 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
-              dark:text-gray-300 dark:border-gray-600
             "
           >
             Parameter
@@ -72,14 +69,13 @@
               leading-5
               text-left text-gray-700
               border-t border-b border-gray-200 border-solid
-              dark:border-gray-600
             "
           ></th>
         </tr>
       </thead>
       <draggable
         v-model="selectedFields"
-        class="divide-y divide-gray-200 dark:divide-gray-600"
+        class="divide-y divide-gray-200"
         item-key="id"
         tag="tbody"
         handle=".handle"
@@ -101,13 +97,12 @@
                   whitespace-nowrap
                   mr-2
                   min-w-[200px]
-                  dark:text-primary-400
                 "
               >
                 {{ element.label }}
               </label>
 
-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              <p class="text-xs text-gray-500 mt-1">
                 {{ element.description }}
               </p>
             </td>

resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue

@@ -1,12 +1,10 @@
 <template>
-  <BaseHeading
+  <h6 class="text-gray-900 text-lg font-medium">
-    type="heading-title"
-    :subtitle="
-      $t('settings.customization.estimates.convert_estimate_description')
-    "
-    >
     {{ $tc('settings.customization.estimates.convert_estimate_options') }}
-  </BaseHeading>
+  </h6>
+  <p class="mt-1 text-sm text-gray-500">
+    {{ $t('settings.customization.estimates.convert_estimate_description') }}
+  </p>
 
   <BaseInputGroup required>
     <BaseRadio

resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue

@@ -1,13 +1,11 @@
 <template>
   <form @submit.prevent="submitForm">
-    <BaseHeading
+    <h6 class="text-gray-900 text-lg font-medium">
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.estimates.default_formats_description')
-      "
-    >
       {{ $t('settings.customization.estimates.default_formats') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.estimates.default_formats_description') }}
+    </p>
 
     <BaseInputGroup
       :label="

resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue

@@ -1,13 +1,11 @@
 <template>
   <form @submit.prevent="submitForm">
-    <BaseHeading
+    <h6 class="text-gray-900 text-lg font-medium">
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.estimates.expiry_date_description')
-      "
-    >
       {{ $t('settings.customization.estimates.expiry_date') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.estimates.expiry_date_description') }}
+    </p>
 
     <BaseSwitchSection
       v-model="expiryDateAutoField"

resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue

@@ -1,13 +1,11 @@
 <template>
   <form @submit.prevent="submitForm">
-    <BaseHeading
+    <h6 class="text-gray-900 text-lg font-medium">
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.invoices.default_formats_description')
-      "
-    >
       {{ $t('settings.customization.invoices.default_formats') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.invoices.default_formats_description') }}
+    </p>
 
     <BaseInputGroup
       :label="$t('settings.customization.invoices.default_invoice_email_body')"

resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue

@@ -1,13 +1,11 @@
 <template>
   <form @submit.prevent="submitForm">
-    <BaseHeading
+    <h6 class="text-gray-900 text-lg font-medium">
-    type="heading-title"
-    :subtitle="
-      $t('settings.customization.invoices.due_date_description')
-    "
-  >
       {{ $t('settings.customization.invoices.due_date') }}
-  </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.invoices.due_date_description') }}
+    </p>
 
     <BaseSwitchSection
       v-model="dueDateAutoField"

resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue

@@ -1,12 +1,10 @@
 <template>
-  <BaseHeading
+  <h6 class="text-gray-900 text-lg font-medium">
-    type="heading-title"
-    :subtitle="
-      $t('settings.customization.invoices.retrospective_edits_description')
-    "
-  >
     {{ $tc('settings.customization.invoices.retrospective_edits') }}
-  </BaseHeading>
+  </h6>
+  <p class="mt-1 text-sm text-gray-500">
+    {{ $t('settings.customization.invoices.retrospective_edits_description') }}
+  </p>
 
   <BaseInputGroup required>
     <BaseRadio

resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue

@@ -1,13 +1,11 @@
 <template>
   <form @submit.prevent="submitForm">
-     <BaseHeading
+    <h6 class="text-gray-900 text-lg font-medium">
-      type="heading-title"
-      :subtitle="
-        $t('settings.customization.payments.default_formats_description')
-      "
-    >
       {{ $t('settings.customization.payments.default_formats') }}
-    </BaseHeading>
+    </h6>
+    <p class="mt-1 text-sm text-gray-500 mb-2">
+      {{ $t('settings.customization.payments.default_formats_description') }}
+    </p>
 
     <BaseInputGroup
       :label="$t('settings.customization.payments.default_payment_email_body')"

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-sm text-white
-      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="
+        class="absolute right-0 mt-2 bg-white rounded-md shadow-lg"
-        absolute
-        right-0
-        mt-2
-        bg-white
-        rounded-md
-        shadow-lg
-        dark:border
-        dark:border-white/10
-        dark:text-white
-        dark:bg-gray-800/[.95]
-        dark:shadow-glass
-        dark:backdrop-blur-xl
-        "
       >
-        <BaseDarkHighlight class="z-[-1] top-0 left-0" />
         <div
           class="
             overflow-y-auto
-          scrollbar-thin
+            scrollbar-thin scrollbar-thumb-rounded-full
-          scrollbar-thumb-rounded-full
+            w-[250px]
-          w-[250px] max-h-[350px]
+            max-h-[350px]
-          scrollbar-thumb-gray-300
+            scrollbar-thumb-gray-300 scrollbar-track-gray-10
-          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-t-2 border-gray-100
-          border-gray-100
             cursor-pointer
             text-primary-400
             hover:text-primary-500
-          dark:border-gray-600
           "
           @click="addNewCompany"
         >

resources/scripts/components/GlobalSearchBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="searchBar" class="hidden rounded md:block relative dark:text-white">
+  <div ref="searchBar" class="hidden rounded md:block relative">
     <div>
       <BaseInput
         v-model="name"
@@ -41,11 +41,6 @@
           w-[300px]
           h-[200px]
           right-0
-          dark:border-white/10
-          dark:text-white
-          dark:bg-gray-800/[.95]
-          dark:shadow-glass
-          dark:backdrop-blur-xl
         "
       >
         <div
@@ -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` }"
@@ -141,7 +135,6 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
-                    dark:bg-gray-600
                   "
                 >
                   {{ initGenerator(user.name) }}

resources/scripts/components/base-select/BaseMultiselect.vue

@@ -437,22 +437,21 @@ 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 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 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 rounded-md bg-white text-sm leading-snug outline-none max-h-10',
         containerDisabled:
-          'bg-gray-200 bg-opacity-50 !text-gray-400 dark:!text-gray-800 !dark:text-gray-500 !cursor-default dark:opacity-25',
+          'cursor-default bg-gray-200 bg-opacity-50 !text-gray-400',
         containerOpen: '',
         containerOpenTop: '',
         containerActive: 'ring-1 ring-primary-400 border-primary-400',
         containerInvalid:
-          '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',
+          'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400',
-        containerInvalidActive:
+        containerInvalidActive: 'ring-1 border-red-400 ring-red-400',
-          '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 dark:text-white',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
         multipleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 dark:text-white',
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
         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 border-transparent focus:border-transparent focus:ring-0 dark:bg-gray-700 dark:text-white',
+          'w-full absolute inset-0 outline-none appearance-none box-border border-0 text-sm font-sans bg-white rounded-md pl-3.5',
         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',
@@ -462,12 +461,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 sm:text-sm font-sans box-border w-full dark:bg-gray-700',
+          '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',
         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 sm:text-sm dark:text-gray-500',
+          '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',
         caret:
-          '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',
+          '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',
         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',
@@ -476,7 +475,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 dark:border-gray-600 flex flex-col rounded-md dark:bg-gray-800 dark:shadow-glass',
+          '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',
         dropdownTop:
           '-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
         dropdownHidden: 'hidden',
@@ -484,7 +483,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 dark:bg-gray-700 dark:text-gray-400 cursor-default leading-normal',
+          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
         groupLabelPointable: 'cursor-pointer',
         groupLabelPointed: 'bg-gray-300 text-gray-700',
         groupLabelSelected: 'bg-primary-600 text-white',
@@ -494,18 +493,15 @@ 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 dark:text-gray-200',
+          'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
-        optionPointed:
+        optionPointed: 'text-gray-800 bg-gray-100',
-          '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 dark:text-gray-400',
+        optionDisabled: 'text-gray-300 cursor-not-allowed',
         optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
         optionSelectedDisabled:
           'text-primary-100 bg-primary-500 bg-opacity-50 cursor-not-allowed',
-        noOptions:
+        noOptions: 'py-2 px-3 text-gray-600 bg-white',
-          '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',
-        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',

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 dark:text-gray-400">
+    <ol class="flex flex-wrap py-4 text-gray-900 rounded list-reset">
       <slot />
     </ol>
   </nav>

resources/scripts/components/base/BaseBreadcrumbItem.vue

@@ -8,9 +8,7 @@
         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"

resources/scripts/components/base/BaseButton.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue'
 import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
-
 const props = defineProps({
   contentLoading: {
     type: Boolean,
@@ -10,7 +9,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 dark:focus:ring-offset-gray-800',
+      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2',
   },
   tag: {
     type: String,
@@ -28,10 +27,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  loadingRight: {
-    type: Boolean,
-    default: false,
-  },
   size: {
     type: String,
     default: 'md',
@@ -86,17 +81,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 dark:bg-primary-500 dark:hover:bg-primary-600':
+    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
       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-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':
+    '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':
       props.variant == 'primary-outline',
-    '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':
+    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
       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 dark:bg-gray-600 dark:text-white dark:hover:bg-opacity-60':
+    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
       props.variant === 'gray',
   }
 })
@@ -129,13 +124,6 @@ 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>
@@ -153,17 +141,15 @@ const buttonDisabledClass = computed(() => {
   <BaseCustomTag
     v-else
     :tag="tag"
-    :disabled="disabled || loading"
+    :disabled="disabled"
-    :class="[defaultClass, sizeClass, variantClass, roundedClass, buttonDisabledClass]"
+    :class="[defaultClass, sizeClass, variantClass, roundedClass]"
   >
-    <SpinnerIcon v-if="loading && !loadingRight" :class="[iconLeftClass, iconVariantClass]" />
+    <SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" />
 
-    <slot v-else name="left" :class="iconLeftClass" />
+    <slot v-else name="left" :class="iconLeftClass"></slot>
 
     <slot />
 
-    <SpinnerIcon v-if="loading && loadingRight" :class="[iconRightClass, iconVariantClass]" />
+    <slot name="right" :class="[iconRightClass, iconVariantClass]"></slot>
-
-    <slot v-else name="right" :class="[iconRightClass, iconVariantClass]" />
   </BaseCustomTag>
 </template>

resources/scripts/components/base/BaseCard.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
+  <div class="bg-white rounded-lg shadow">
-    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"

resources/scripts/components/base/BaseCheckbox.vue

@@ -15,12 +15,12 @@
         v-if="label"
         :for="id"
         :class="`font-medium ${
-          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600 dark:text-white'
+          disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-600'
         } cursor-pointer `"
       >
         {{ label }}
       </label>
-      <p v-if="description" class="text-gray-500 dark:text-gray-400">{{ description }}</p>
+      <p v-if="description" class="text-gray-500">{{ description }}</p>
     </div>
   </div>
 </template>
@@ -51,7 +51,7 @@ const props = defineProps({
   },
   checkboxClass: {
     type: String,
-    default: 'w-4 h-4 border-gray-300 rounded cursor-pointer dark:bg-gray-600 dark:border-gray-500',
+    default: 'w-4 h-4 border-gray-300 rounded cursor-pointer',
   },
   setInitialValue: {
     type: Boolean,

resources/scripts/components/base/BaseContentPlaceholders.vue

@@ -39,8 +39,6 @@ $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% {
@@ -59,10 +57,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !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;
   }
@@ -92,15 +86,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !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 {
@@ -171,10 +156,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !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;
@@ -196,14 +177,6 @@ $base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !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;
 }
 

resources/scripts/components/base/BaseCustomInput.vue

@@ -40,7 +40,6 @@
                 font-normal
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-700/60
                 rounded
                 ml-1
                 py-0.5

resources/scripts/components/base/BaseCustomerAddressDisplay.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="address"
-    class="text-sm font-bold leading-5 text-black non-italic space-y-1 dark:text-white"
+    class="text-sm font-bold leading-5 text-black non-italic space-y-1"
   >
     <p v-if="address?.address_street_1">{{ address?.address_street_1 }},</p>
 

resources/scripts/components/base/BaseCustomerSelectPopup.vue

@@ -20,7 +20,6 @@
         border border-gray-200 border-solid
         min-h-[170px]
         rounded-md
-        dark:border-white/10 dark:bg-gray-800/50
       "
       @click.stop
     >
@@ -28,7 +27,7 @@
         <BaseText
           :text="selectedCustomer.name"
           :length="30"
-          class="flex-1 text-base font-medium text-left text-gray-900 dark:text-white"
+          class="flex-1 text-base font-medium text-left text-gray-900"
         />
         <div class="flex">
           <a
@@ -193,7 +192,6 @@
             border border-gray-200 border-solid
             rounded-md
             min-h-[170px]
-            dark:border-white/10 dark:bg-gray-700/60 dark:text-white
           "
         >
           <BaseIcon
@@ -209,12 +207,11 @@
               bg-gray-200
               rounded-full
               font-base
-              dark:bg-gray-700
             "
           />
 
           <div class="mt-1">
-            <label class="text-lg font-medium text-gray-900 dark:text-white">
+            <label class="text-lg font-medium text-gray-900">
               {{ $t('customers.new_customer') }}
               <span class="text-red-500"> * </span>
             </label>
@@ -249,11 +246,6 @@
               shadow-lg
               ring-1 ring-black ring-opacity-5
               bg-white
-               dark:border
-              dark:border-white/10
-              dark:bg-gray-800
-              dark:text-white
-              dark:shadow-glass
             "
           >
             <div class="relative">
@@ -273,7 +265,6 @@
                   overflow-auto
                   list
                   border-t border-gray-200
-                  dark:border-white/10
                 "
               >
                 <li
@@ -289,7 +280,6 @@
                     hover:cursor-pointer hover:bg-gray-100
                     focus:outline-none focus:bg-gray-100
                     last:border-b-0
-                    dark:border-white/10 dark:hover:bg-gray-700/30
                   "
                   @click="selectNewCustomer(customer.id, close)"
                 >
@@ -309,7 +299,6 @@
                       bg-gray-300
                       rounded-full
                       avatar
-                      dark:bg-gray-600
                     "
                   >
                     {{ initGenerator(customer.name) }}
@@ -344,9 +333,9 @@
                 </li>
                 <div
                   v-if="customerStore.customers.length === 0"
-                  class="flex justify-center p-5 text-gray-400 dark:text-gray-300"
+                  class="flex justify-center p-5 text-gray-400"
                 >
-                  <label class="text-base text-gray-500 cursor-pointer dark:text-gray-300">
+                  <label class="text-base text-gray-500 cursor-pointer">
                     {{ $t('customers.no_customers_found') }}
                   </label>
                 </div>
@@ -368,10 +357,6 @@
                 border-none
                 outline-none
                 focus:bg-gray-300
-                dark:bg-gray-600/70
-                dark:shadow-glass
-                dark:backdrop-blur-xl
-                dark:hover:bg-gray-600/80
               "
               @click="openCustomerModal"
             >

resources/scripts/components/base/BaseDarkHighlight.vue

@@ -1,21 +0,0 @@
-<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>

resources/scripts/components/base/BaseDescriptionListItem.vue

@@ -10,7 +10,7 @@
         {{ label }}
       </BaseLabel>
 
-      <p class="text-sm font-bold leading-5 text-black non-italic dark:text-white">
+      <p class="text-sm font-bold leading-5 text-black non-italic">
         {{ value }}
 
         <slot />

resources/scripts/components/base/BaseDialog.vue

@@ -30,13 +30,8 @@
           leave-to="opacity-0"
         >
           <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:backdrop-blur-xl dark:bg-gray-900/80"
+            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
-          >
-           <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. -->
@@ -69,11 +64,6 @@
               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"
           >
@@ -90,31 +80,31 @@
                   rounded-full
                 "
                 :class="{
-                  'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
+                  'bg-green-100': dialogStore.variant === 'primary',
-                  'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
+                  'bg-red-100': dialogStore.variant === 'danger',
                 }"
               >
                 <BaseIcon
                   v-if="dialogStore.variant === 'primary'"
                   name="CheckIcon"
-                  class="w-6 h-6 text-green-600 dark:text-white"
+                  class="w-6 h-6 text-green-600"
                 />
                 <BaseIcon
                   v-else
                   name="ExclamationIcon"
-                  class="w-6 h-6 text-red-600 dark:text-white"
+                  class="w-6 h-6 text-red-600"
                   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 dark:text-white"
+                  class="text-lg font-medium leading-6 text-gray-900"
                 >
                   {{ dialogStore.title }}
                 </DialogTitle>
                 <div class="mt-2">
-                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                  <p class="text-sm text-gray-500">
                     {{ dialogStore.message }}
                   </p>
                 </div>

resources/scripts/components/base/BaseDivider.vue

@@ -1,3 +1,3 @@
 <template>
-  <hr class="w-full text-gray-300 dark:bg-gray-600" />
+  <hr class="w-full text-gray-300" />
 </template>

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
+  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`
-  origin-top-right rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none`
   return `${baseClass} ${props.containerClass}`
 })
 

resources/scripts/components/base/BaseDropdownItem.vue

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

resources/scripts/components/base/BaseEmptyPlaceholder.vue

@@ -1,17 +1,13 @@
 <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 text-center md:text-left">
+    <div class="mt-2">
-          <label class="text-gray-500 dark:text-gray-400">
+      <label class="text-gray-500">
         {{ description }}
       </label>
     </div>
@@ -19,8 +15,6 @@
       <slot name="actions" />
     </div>
   </div>
-    </div>
-  </div>
 </template>
 
 <script setup>

resources/scripts/components/base/BaseErrorAlert.vue

@@ -1,18 +1,11 @@
 <template>
-  <div
+  <div class="rounded-md bg-red-50 p-4">
-    class="
-      rounded-md
-      bg-red-50
-      p-4
-      dark:border dark:border-red-400 dark:bg-transparent
-    "
-  >
     <div class="flex">
       <div class="shrink-0">
-        <XCircleIcon class="h-5 w-5 text-red-400 dark:text-red-500" aria-hidden="true" />
+        <XCircleIcon class="h-5 w-5 text-red-400" aria-hidden="true" />
       </div>
       <div class="ml-3">
-        <h3 class="text-sm font-medium text-red-800 dark:text-red-500">
+        <h3 class="text-sm font-medium text-red-800">
           {{ errorTitle }}
         </h3>
         <div class="mt-2 text-sm text-red-700">

resources/scripts/components/base/BaseFileUploader.vue

@@ -21,7 +21,6 @@
       group
       min-h-[100px]
       bg-gray-50
-      dark:bg-gray-700 dark:border-gray-600
     "
     :class="avatar ? 'w-32 h-32' : 'w-full'"
   >
@@ -50,7 +49,7 @@
 
       <a
         href="#"
-        class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group dark:bg-gray-900"
+        class="absolute z-30 bg-white rounded-full -bottom-3 -right-3 group"
         @click.prevent.stop="onBrowse"
       >
         <BaseIcon
@@ -96,7 +95,7 @@
 
     <div
       v-else-if="localFiles.length && avatar && !multiple"
-      class="flex w-full h-full border border-gray-200 rounded dark:border-gray-600"
+      class="flex w-full h-full border border-gray-200 rounded"
     >
       <img
         v-if="localFiles[0].image"
@@ -170,11 +169,10 @@
           -right-3
           group
           hover:border-gray-300
-          dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
         "
         @click.prevent.stop="onAvatarRemove(localFiles[0])"
       >
-        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
+        <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
       </a>
     </div>
 
@@ -197,7 +195,6 @@
           hover:border-gray-500
           relative
           max-w-md
-          dark:border-gray-600 dark:bg-transparent dark:hover:border-gray-700
         "
         @click.prevent
       >
@@ -273,7 +270,6 @@
             -right-3
             group
             hover:border-gray-300
-            dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
           "
           @click.prevent.stop="onFileRemove(index)"
         >
@@ -297,7 +293,6 @@
           hover:border-gray-500
           relative
           max-w-md
-          dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-700
         "
         @click.prevent
       >
@@ -373,11 +368,10 @@
             -right-3
             group
             hover:border-gray-300
-            dark:border-gray-600 dark:bg-gray-900 dark:hover:border-gray-700
           "
           @click.prevent.stop="onFileRemove(index)"
         >
-          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black dark:text-white" />
+          <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
         </a>
       </a>
     </div>

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 dark:bg-gray-800">
+    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded">
       <slot name="filter-header" />
 
       <label
@@ -20,7 +20,6 @@
           hover:text-gray-700
           top-2.5
           right-3.5
-          dark:text-gray-300
         "
         @click="$emit('clear')"
       >

resources/scripts/components/base/BaseHeading.vue

@@ -2,21 +2,6 @@
   <h6 :class="typeClass">
     <slot />
   </h6>
-  
-  <p
-    v-if="subtitle"
-    class="
-      mt-2
-      text-sm
-      leading-snug
-      text-gray-500
-      dark:text-gray-400
-      max-w-[680px]
-    "
-  >
-    {{ subtitle }}
-  </p>
-
 </template>
 
 <script setup>
@@ -29,16 +14,12 @@ const props = defineProps({
       return ['section-title', 'heading-title'].indexOf(value) !== -1
     },
   },
-  subtitle: {
-    type: String,
-    default: '',
-  },
 })
 
 const typeClass = computed(() => {
   return {
-    'text-gray-900 text-lg font-medium dark:text-white': props.type === 'heading-title',
+    'text-gray-900 text-lg font-medium': props.type === 'heading-title',
-    'text-gray-500 uppercase text-base dark:text-gray-300': props.type === 'section-title',
+    'text-gray-500 uppercase text-base': props.type === 'section-title',
   }
 })
 </script>

resources/scripts/components/base/BaseInput.vue

@@ -65,7 +65,6 @@
         rounded-l-md
         bg-gray-50
         sm:text-sm
-        dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
       "
     >
       {{ addon }}
@@ -83,7 +82,7 @@
         pointer-events-none
       "
     >
-      <span class="text-gray-500 dark:text-white sm:text-sm ">
+      <span class="text-gray-500 sm:text-sm">
         {{ inlineAddon }}
       </span>
     </div>
@@ -200,7 +199,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      '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',
+      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
   },
   iconLeftClass: {
     type: String,
@@ -251,8 +250,7 @@ const inputAddonClass = computed(() => {
 
 const inputInvalidClass = computed(() => {
   if (props.invalid) {
-    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 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
-
   }
 
   return 'focus:ring-primary-400 focus:border-primary-400'
@@ -260,7 +258,7 @@ const inputInvalidClass = computed(() => {
 
 const inputDisabledClass = computed(() => {
   if (props.disabled) {
-    return `border-gray-100 bg-gray-100 !text-gray-400 dark:!text-gray-200   ring-gray-200 focus:ring-gray-200 focus:border-gray-100 dark:opacity-25 `
+    return `border-gray-100 bg-gray-100 !text-gray-400 ring-gray-200 focus:ring-gray-200 focus:border-gray-100`
   }
 
   return ''

resources/scripts/components/base/BaseItemSelect.vue

@@ -12,7 +12,6 @@
         bg-gray-200
         border border-gray-200 border-solid
         rounded
-        dark:bg-gray-900/70 dark:border-gray-700
       "
     >
       {{ item.name }}

resources/scripts/components/base/BaseModal.vue

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

resources/scripts/components/base/BaseModalFooter.vue

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

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  dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500',
+      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
   },
   disabled: {
     type: Boolean,
@@ -86,7 +86,7 @@ const currencyBindings = computed(() => {
 
 const invalidClass = computed(() => {
   if (props.invalid) {
-    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 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
   }
   return 'focus:ring-primary-400 focus:border-primary-400'
 })

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 dark:text-white">
+      <h3 class="text-2xl font-bold text-left text-black">
         {{ title }}
       </h3>
       <slot />

resources/scripts/components/base/BaseRadio.vue

@@ -19,7 +19,7 @@
             ]"
             aria-hidden="true"
           >
-            <span class="rounded-full bg-white w-1.5 h-1.5"  :class="{ 'bg-white': checked }"/>
+            <span class="rounded-full bg-white w-1.5 h-1.5" />
           </span>
           <div class="flex flex-col ml-3">
             <RadioGroupLabel
@@ -66,11 +66,11 @@ const props = defineProps({
   },
   checkedStateClass: {
     type: String,
-    default: 'bg-primary-600 ',
+    default: 'bg-primary-600',
   },
   unCheckedStateClass: {
     type: String,
-    default: 'bg-white dark:bg-transparent',
+    default: 'bg-white ',
   },
   optionGroupActiveStateClass: {
     type: String,
@@ -78,16 +78,16 @@ const props = defineProps({
   },
   checkedStateLabelClass: {
     type: String,
-    default: 'text-primary-900 dark:text-primary-400',
+    default: 'text-primary-900 ',
   },
   unCheckedStateLabelClass: {
     type: String,
-    default: 'text-gray-900 dark:text-white',
+    default: 'text-gray-900',
   },
   optionGroupClass: {
     type: String,
     default:
-      'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center dark:border-gray-600',
+      'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
   },
   optionGroupLabelClass: {
     type: String,

resources/scripts/components/base/BaseSelectAction.vue

@@ -11,10 +11,6 @@
       bg-gray-200
       cursor-pointer
       text-primary-400
-      dark:bg-gray-600/70
-      dark:backdrop-blur-xl
-      dark:shadow-glass
-      dark:hover:bg-gray-600/80
     "
   >
     <slot />

resources/scripts/components/base/BaseSelectInput.vue

@@ -12,7 +12,7 @@
   >
     <ListboxLabel
       v-if="label"
-      class="block text-sm not-italic font-medium text-gray-800 mb-0.5 dark:text-white"
+      class="block text-sm not-italic font-medium text-gray-800 mb-0.5"
     >
       {{ label }}
     </ListboxLabel>
@@ -28,13 +28,14 @@
           pr-10
           text-left
           bg-white
-          dark:bg-gray-700
+          border border-gray-200
           rounded-md
           shadow-sm
           cursor-default
           focus:outline-none
           focus:ring-1
-          focus:ring-primary-400 focus:border-primary-400
+          focus:ring-primary-500
+          focus:border-primary-500
           sm:text-sm
         "
       >
@@ -88,7 +89,6 @@
             ring-1 ring-black ring-opacity-5
             focus:outline-none
             sm:text-sm
-            dark:bg-gray-700
           "
         >
           <ListboxOption
@@ -100,7 +100,7 @@
           >
             <li
               :class="[
-                active ? 'text-white bg-primary-600' : 'text-gray-900 dark:text-white',
+                active ? 'text-white bg-primary-600' : 'text-gray-900',
                 'cursor-default select-none relative py-2 pl-3 pr-9',
               ]"
             >

resources/scripts/components/base/BaseSettingCard.vue

@@ -11,7 +11,7 @@
             mt-2
             text-sm
             leading-snug
-            text-left text-gray-500 dark:text-gray-400
+            text-left text-gray-500
             max-w-[680px]
           "
         >

resources/scripts/components/base/BaseSwitch.vue

@@ -7,7 +7,7 @@
 
       <Switch
         v-model="enabled"
-        :class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
+        :class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
         class="
           relative
           inline-flex
@@ -21,11 +21,7 @@
         v-bind="$attrs"
       >
         <span
-          :class="
+          :class="enabled ? 'translate-x-6' : 'translate-x-1'"
-            enabled
-              ? 'translate-x-6 dark:bg-white'
-              : 'translate-x-1 dark:bg-gray-500'
-          "
           class="
             inline-block
             w-4

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 dark:text-white"
+        class="p-0 mb-1 text-sm leading-snug text-black font-medium"
         passive
       >
         {{ title }}
       </SwitchLabel>
-      <SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
+      <SwitchDescription class="text-sm text-gray-500">
         {{ description }}
       </SwitchDescription>
     </div>
@@ -18,7 +18,7 @@
       :disabled="disabled"
       :model-value="modelValue"
       :class="[
-        modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
+        modelValue ? 'bg-primary-500' : 'bg-gray-200',
         '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 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
+          modelValue ? 'translate-x-5' : 'translate-x-0',
           'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
         ]"
       />

resources/scripts/components/base/BaseTabGroup.vue

@@ -7,7 +7,7 @@
     >
       <TabList
         :class="[
-          'flex border-b border-grey-light dark:border-gray-600',
+          'flex border-b border-grey-light',
           'relative overflow-x-auto overflow-y-hidden',
           'lg:pb-0 lg:ml-0',
         ]"
@@ -22,8 +22,8 @@
             :class="[
               'px-8 py-2 text-sm leading-5 font-medium flex items-center relative border-b-2 mt-4 focus:outline-none whitespace-nowrap',
               selected
-                ? 'border-primary-400 text-black font-medium dark:text-white'
+                ? ' border-primary-400 text-black font-medium'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:border-gray-500',
+                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
             ]"
           >
             {{ tab.title }}

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 dark:border-gray-600 border-solid rounded outline-none  dark:bg-gray-700 dark:text-white',
+      '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',
   },
   autosize: {
     type: Boolean,

resources/scripts/components/base/base-editor/BaseEditor.vue

@@ -16,15 +16,13 @@
       text-left
       bg-white
       border border-gray-200
-      dark:border-gray-600
       rounded-md
       min-h-[200px]
       overflow-hidden
-      dark:bg-gray-700 dark:text-white
     "
   >
     <div v-if="editor" class="editor-content">
-      <div class="flex justify-end p-2 border-b border-gray-200 dark:border-gray-600 md:hidden">
+      <div class="flex justify-end p-2 border-b border-gray-200 md:hidden">
         <BaseDropdown width-class="w-48">
           <template #activator>
             <div
@@ -44,256 +42,6 @@
               <dots-vertical-icon class="w-6 h-6 text-gray-600" />
             </div>
           </template>
-          <div class="flex flex-wrap space-x-1 dark:text-white">
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
-              @click="editor.chain().focus().toggleBold().run()"
-            >
-              <bold-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
-              @click="editor.chain().focus().toggleItalic().run()"
-            >
-              <italic-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
-              @click="editor.chain().focus().toggleStrike().run()"
-            >
-              <strikethrough-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
-              @click="editor.chain().focus().toggleCode().run()"
-            >
-              <coding-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
-              @click="editor.chain().focus().setParagraph().run()"
-            >
-              <paragraph-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{
-                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }),
-              }"
-              @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-            >
-              H1
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{
-                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }),
-              }"
-              @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-            >
-              H2
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{
-                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }),
-              }"
-              @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-            >
-              H3
-            </span>
-
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
-              @click="editor.chain().focus().toggleBulletList().run()"
-            >
-              <list-ul-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
-              @click="editor.chain().focus().toggleOrderedList().run()"
-            >
-              <list-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
-              @click="editor.chain().focus().toggleBlockquote().run()"
-            >
-              <quote-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
-              @click="editor.chain().focus().toggleCodeBlock().run()"
-            >
-              <code-block-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
-              @click="editor.chain().focus().undo().run()"
-            >
-              <undo-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-            <span
-              class="
-                flex
-                items-center
-                justify-center
-                w-6
-                h-6
-                rounded-sm
-                cursor-pointer
-                hover:bg-gray-100
-                dark:hover:bg-gray-800
-              "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
-              @click="editor.chain().focus().redo().run()"
-            >
-              <redo-icon class="h-3 cursor-pointer fill-current" />
-            </span>
-          </div>
-        </BaseDropdown>
-      </div>
-      <div class="hidden p-2 border-b border-gray-200 dark:border-gray-600 md:flex">
           <div class="flex flex-wrap space-x-1">
             <span
               class="
@@ -305,9 +53,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
+              :class="{ 'bg-gray-200': editor.isActive('bold') }"
               @click="editor.chain().focus().toggleBold().run()"
             >
               <bold-icon class="h-3 cursor-pointer fill-current" />
@@ -322,9 +69,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
+              :class="{ 'bg-gray-200': editor.isActive('italic') }"
               @click="editor.chain().focus().toggleItalic().run()"
             >
               <italic-icon class="h-3 cursor-pointer fill-current" />
@@ -339,9 +85,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
+              :class="{ 'bg-gray-200': editor.isActive('strike') }"
               @click="editor.chain().focus().toggleStrike().run()"
             >
               <strikethrough-icon class="h-3 cursor-pointer fill-current" />
@@ -356,9 +101,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
+              :class="{ 'bg-gray-200': editor.isActive('code') }"
               @click="editor.chain().focus().toggleCode().run()"
             >
               <coding-icon class="h-3 cursor-pointer fill-current" />
@@ -373,9 +117,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
+              :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
               @click="editor.chain().focus().setParagraph().run()"
             >
               <paragraph-icon class="h-3 cursor-pointer fill-current" />
@@ -390,9 +133,10 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }) }"
+              :class="{
+                'bg-gray-200': editor.isActive('heading', { level: 1 }),
+              }"
               @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
             >
               H1
@@ -407,9 +151,10 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }) }"
+              :class="{
+                'bg-gray-200': editor.isActive('heading', { level: 2 }),
+              }"
               @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
             >
               H2
@@ -424,9 +169,10 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }) }"
+              :class="{
+                'bg-gray-200': editor.isActive('heading', { level: 3 }),
+              }"
               @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
             >
               H3
@@ -442,9 +188,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
+              :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
               @click="editor.chain().focus().toggleBulletList().run()"
             >
               <list-ul-icon class="h-3 cursor-pointer fill-current" />
@@ -459,9 +204,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
+              :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
               @click="editor.chain().focus().toggleOrderedList().run()"
             >
               <list-icon class="h-3 cursor-pointer fill-current" />
@@ -476,9 +220,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
+              :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
               @click="editor.chain().focus().toggleBlockquote().run()"
             >
               <quote-icon class="h-3 cursor-pointer fill-current" />
@@ -493,9 +236,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
+              :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
               @click="editor.chain().focus().toggleCodeBlock().run()"
             >
               <code-block-icon class="h-3 cursor-pointer fill-current" />
@@ -510,9 +252,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
+              :class="{ 'bg-gray-200': editor.isActive('undo') }"
               @click="editor.chain().focus().undo().run()"
             >
               <undo-icon class="h-3 cursor-pointer fill-current" />
@@ -527,9 +268,238 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-              dark:hover:bg-gray-800
               "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
+              :class="{ 'bg-gray-200': editor.isActive('redo') }"
+              @click="editor.chain().focus().redo().run()"
+            >
+              <redo-icon class="h-3 cursor-pointer fill-current" />
+            </span>
+          </div>
+        </BaseDropdown>
+      </div>
+      <div class="hidden p-2 border-b border-gray-200 md:flex">
+        <div class="flex flex-wrap space-x-1">
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('bold') }"
+            @click="editor.chain().focus().toggleBold().run()"
+          >
+            <bold-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('italic') }"
+            @click="editor.chain().focus().toggleItalic().run()"
+          >
+            <italic-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('strike') }"
+            @click="editor.chain().focus().toggleStrike().run()"
+          >
+            <strikethrough-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('code') }"
+            @click="editor.chain().focus().toggleCode().run()"
+          >
+            <coding-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
+            @click="editor.chain().focus().setParagraph().run()"
+          >
+            <paragraph-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 1 }) }"
+            @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+          >
+            H1
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 2 }) }"
+            @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+          >
+            H2
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 3 }) }"
+            @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+          >
+            H3
+          </span>
+
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
+            @click="editor.chain().focus().toggleBulletList().run()"
+          >
+            <list-ul-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
+            @click="editor.chain().focus().toggleOrderedList().run()"
+          >
+            <list-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
+            @click="editor.chain().focus().toggleBlockquote().run()"
+          >
+            <quote-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
+            @click="editor.chain().focus().toggleCodeBlock().run()"
+          >
+            <code-block-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('undo') }"
+            @click="editor.chain().focus().undo().run()"
+          >
+            <undo-icon class="h-3 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive('redo') }"
             @click="editor.chain().focus().redo().run()"
           >
             <redo-icon class="h-3 cursor-pointer fill-current" />
@@ -544,9 +514,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'left' }) }"
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'left' }) }"
             @click="editor.chain().focus().setTextAlign('left').run()"
           >
             <menu-alt2-icon class="h-5 cursor-pointer fill-current" />
@@ -561,9 +530,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'right' }) }"
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'right' }) }"
             @click="editor.chain().focus().setTextAlign('right').run()"
           >
             <menu-alt3-icon class="h-5 cursor-pointer fill-current" />
@@ -578,10 +546,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
             :class="{
-              'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'justify' }),
+              'bg-gray-200': editor.isActive({ textAlign: 'justify' }),
             }"
             @click="editor.chain().focus().setTextAlign('justify').run()"
           >
@@ -597,9 +564,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'center' }) }"
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'center' }) }"
             @click="editor.chain().focus().setTextAlign('center').run()"
           >
             <menu-center-icon class="h-5 cursor-pointer fill-current" />

resources/scripts/components/base/base-table/BaseTable.vue

@@ -7,18 +7,11 @@
             relative
             overflow-hidden
             bg-white
-            border-b
+            border-b border-gray-200
-            border-gray-200
             shadow
             sm:rounded-lg
-            dark:shadow-glass
-            dark:border
-            dark:border-white/10
-            dark:bg-gray-800/70
           "
         >
-          <BaseDarkHighlight v-if="darkHighlight" class="z-[-1]" />
-
           <slot name="header" />
           <table :class="tableClass">
             <thead :class="theadClass">
@@ -58,11 +51,7 @@
               <tr
                 v-for="placeRow in placeholderCount"
                 :key="placeRow"
-                :class="
+                :class="placeRow % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
-                  placeRow % 2 === 0
-                    ? 'bg-white dark:bg-gray-800'
-                    : 'bg-gray-50 dark:bg-gray-800'
-                "
               >
                 <td
                   v-for="column in columns"
@@ -86,11 +75,7 @@
               <tr
                 v-for="(row, index) in sortedRows"
                 :key="index"
-                :class="
+                :class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'"
-                  index % 2 === 0
-                    ? 'bg-white dark:bg-transparent'
-                    : 'bg-gray-50 dark:bg-gray-700/20 dark:border-y dark:border-gray-600'
-                "
               >
                 <td
                   v-for="column in columns"
@@ -118,10 +103,7 @@
               justify-center
               w-full
               h-full
-              bg-white
+              bg-white bg-opacity-60
-              bg-opacity-60
-              dark:bg-gray-700
-              dark:bg-opacity-60
             "
           >
             <SpinnerIcon class="w-10 h-10 text-primary-500" />
@@ -181,12 +163,9 @@ const props = defineProps({
   sortOrder: { type: String, default: '' },
   tableClass: {
     type: String,
-    default: 'min-w-full divide-y divide-gray-200 dark:divide-gray-600',
+    default: 'min-w-full divide-y divide-gray-200',
-  },
-  theadClass: {
-    type: String,
-    default: 'bg-gray-50 dark:bg-gray-800 dark:text-white',
   },
+  theadClass: { type: String, default: 'bg-gray-50' },
   tbodyClass: { type: String, default: '' },
   noResultsMessage: {
     type: String,
@@ -207,10 +186,6 @@ const props = defineProps({
     type: Number,
     default: 3,
   },
-  darkHighlight: {
-    type: Boolean,
-    default: false,
-  },
 })
 
 let rows = reactive([])
@@ -261,7 +236,7 @@ function getColumn(columnName) {
 
 function getThClass(column) {
   let classes =
-    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-white'
+    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'
 
   if (column.defaultThClass) {
     classes = column.defaultThClass
@@ -281,8 +256,7 @@ function getThClass(column) {
 }
 
 function getTdClass(column) {
-  let classes =
+  let classes = 'px-6 py-4 text-sm text-gray-500 whitespace-nowrap'
-    'px-6 py-4 text-sm text-gray-500 whitespace-nowrap dark:text-gray-300'
 
   if (column.defaultTdClass) {
     classes = column.defaultTdClass
@@ -335,7 +309,6 @@ function changeSorting(column) {
   }
 
   if (!usesLocalData.value) {
-    if (pagination.value) pagination.value.currentPage = 1
     mapDataToRows()
   }
 }
@@ -353,9 +326,7 @@ async function pageChange(page) {
   await mapDataToRows()
 }
 
-async function refresh(isPreservePage = false) {
+async function refresh() {
-  if (pagination.value && !isPreservePage) pagination.value.currentPage = 1
-
   await mapDataToRows()
 }
 

resources/scripts/components/base/base-table/BaseTablePagination.vue

@@ -10,14 +10,13 @@
       bg-white
       border-t border-gray-200
       sm:px-6
-      dark:bg-transparent dark:border-white/10
     "
   >
     <div class="flex justify-between flex-1 sm:hidden">
       <a
         href="#"
         :class="{
-          'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
+          'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
             pagination.currentPage === 1,
         }"
         class="
@@ -33,7 +32,6 @@
           border border-gray-300
           rounded-md
           hover:bg-gray-50
-          dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
         "
         @click="pageClicked(pagination.currentPage - 1)"
       >
@@ -42,7 +40,7 @@
       <a
         href="#"
         :class="{
-          'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
+          'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
             pagination.currentPage === pagination.totalPages,
         }"
         class="
@@ -59,7 +57,6 @@
           border border-gray-300
           rounded-md
           hover:bg-gray-50
-          dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
         "
         @click="pageClicked(pagination.currentPage + 1)"
       >
@@ -68,12 +65,12 @@
     </div>
     <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
       <div>
-        <p class="text-sm text-gray-700 dark:text-gray-400">
+        <p class="text-sm text-gray-700">
           Showing
           {{ ' ' }}
           <span
             v-if="pagination.limit && pagination.currentPage"
-            class="font-medium dark:text-gray-200"
+            class="font-medium"
           >
             {{
               pagination.currentPage * pagination.limit - (pagination.limit - 1)
@@ -84,7 +81,7 @@
           {{ ' ' }}
           <span
             v-if="pagination.limit && pagination.currentPage"
-            class="font-medium dark:text-gray-200"
+            class="font-medium"
           >
             <span
               v-if="
@@ -101,7 +98,7 @@
           {{ ' ' }}
           of
           {{ ' ' }}
-          <span v-if="pagination.totalCount" class="font-medium dark:text-gray-200">
+          <span v-if="pagination.totalCount" class="font-medium">
             {{ pagination.totalCount }}
           </span>
           {{ ' ' }}
@@ -116,7 +113,7 @@
           <a
             href="#"
             :class="{
-              'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
+              'disabled cursor-normal pointer-events-none !bg-gray-100 !text-gray-400':
                 pagination.currentPage === 1,
             }"
             class="
@@ -132,7 +129,6 @@
               border border-gray-300
               rounded-l-md
               hover:bg-gray-50
-              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
             @click="pageClicked(pagination.currentPage - 1)"
           >
@@ -144,9 +140,9 @@
             href="#"
             aria-current="page"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
+              'z-10 bg-primary-50 border-primary-500 text-primary-600':
                 isActive(1),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
+              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
                 !isActive(1),
             }"
             class="
@@ -177,7 +173,6 @@
               text-gray-700
               bg-white
               border border-gray-300
-              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
           >
             ...
@@ -187,9 +182,9 @@
             :key="page"
             href="#"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
+              'z-10 bg-primary-50 border-primary-500 text-primary-600':
                 isActive(page),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
+              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
                 !isActive(page),
               disabled: page === '...',
             }"
@@ -225,7 +220,6 @@
               text-gray-700
               bg-white
               border border-gray-300
-              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
           >
             ...
@@ -235,9 +229,9 @@
             href="#"
             aria-current="page"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600 dark:bg-primary-500 dark:text-white':
+              'z-10 bg-primary-50 border-primary-500 text-primary-600':
                 isActive(pagination.totalPages),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300':
+              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
                 !isActive(pagination.totalPages),
             }"
             class="
@@ -269,10 +263,9 @@
               border border-gray-300
               rounded-r-md
               hover:bg-gray-50
-              dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300
             "
             :class="{
-              'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400 dark:!bg-gray-800 dark:!text-gray-500':
+              'disabled cursor-default pointer-events-none !bg-gray-100 !text-gray-400':
                 pagination.currentPage === pagination.totalPages,
             }"
             @click="pageClicked(pagination.currentPage + 1)"

resources/scripts/components/icons/dashboard/PaymentIcon.vue

@@ -5,30 +5,27 @@
     viewBox="0 0 50 50"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    :class="colorClass"
   >
-    <circle cx="25" cy="25" r="25" :class="bgColor" />
+    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
     <path
       d="M17.8 17.8C17.1635 17.8 16.5531 18.0529 16.103 18.503C15.6529 18.9531 15.4 19.5635 15.4 20.2V21.4H34.6V20.2C34.6 19.5635 34.3472 18.9531 33.8971 18.503C33.447 18.0529 32.8365 17.8 32.2 17.8H17.8Z"
-      :class="color"
+      fill="currentColor"
     />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M34.6 23.8H15.4V29.8C15.4 30.4366 15.6529 31.047 16.103 31.4971C16.5531 31.9472 17.1635 32.2 17.8 32.2H32.2C32.8365 32.2 33.447 31.9472 33.8971 31.4971C34.3472 31.047 34.6 30.4366 34.6 29.8V23.8ZM17.8 28.6C17.8 28.2818 17.9265 27.9766 18.1515 27.7515C18.3765 27.5265 18.6818 27.4 19 27.4H20.2C20.5183 27.4 20.8235 27.5265 21.0486 27.7515C21.2736 27.9766 21.4 28.2818 21.4 28.6C21.4 28.9183 21.2736 29.2235 21.0486 29.4486C20.8235 29.6736 20.5183 29.8 20.2 29.8H19C18.6818 29.8 18.3765 29.6736 18.1515 29.4486C17.9265 29.2235 17.8 28.9183 17.8 28.6ZM23.8 27.4C23.4818 27.4 23.1765 27.5265 22.9515 27.7515C22.7265 27.9766 22.6 28.2818 22.6 28.6C22.6 28.9183 22.7265 29.2235 22.9515 29.4486C23.1765 29.6736 23.4818 29.8 23.8 29.8H25C25.3183 29.8 25.6235 29.6736 25.8486 29.4486C26.0736 29.2235 26.2 28.9183 26.2 28.6C26.2 28.2818 26.0736 27.9766 25.8486 27.7515C25.6235 27.5265 25.3183 27.4 25 27.4H23.8Z"
-      :class="color"
+      fill="currentColor"
     />
   </svg>
 </template>
 
 <script setup>
 const props = defineProps({
-  color: {
+  colorClass: {
     type: String,
-  default: 'fill-primary-500 dark:fill-white',
+    default: 'text-primary-500',
-  },
-  bgColor: {
-    type: String,
-    default: 'fill-gray-100 dark:fill-primary-400',
   },
 })
 </script>

resources/scripts/components/list/BaseListItem.vue

@@ -33,8 +33,8 @@ export default {
       return !!slots.icon
     })
     let containerClass = computed(() => {
-      if (props.active) return `${defaultClass} text-primary-500 dark:text-primary-400`
+      if (props.active) return `${defaultClass} text-primary-500`
-      else return `${defaultClass} text-gray-500 dark:text-gray-300`
+      else return `${defaultClass} text-gray-500`
     })
     return {
       hasIconSlot,

resources/scripts/components/notifications/NotificationItem.vue

@@ -1,8 +1,6 @@
 <template>
   <div
-    :class="success || info
+    :class="success || info ? 'bg-white' : 'bg-red-50'"
-      ? 'bg-white dark:border dark:border-white/10 dark:text-white dark:bg-gray-800/[.80] dark:shadow-glass dark:backdrop-blur-sm'
-      : 'bg-red-50 dark:bg-red-400/[.70] dark:shadow-glass dark:backdrop-blur-sm'"
     class="
       max-w-sm
       mb-3
@@ -50,7 +48,7 @@
             </svg>
             <svg
               v-if="error"
-              class="w-6 h-6 text-red-400 dark:text-white"
+              class="w-6 h-6 text-red-400"
               fill="currentColor"
               viewBox="0 0 24 24"
             >
@@ -64,9 +62,7 @@
           <div class="flex-1 w-0 ml-3 text-left">
             <p
               :class="`text-sm leading-5 font-medium ${
-                success || info
+                success || info ? 'text-gray-900' : 'text-red-800'
-                  ? 'text-gray-900 dark:text-white'
-                  : 'text-red-800 dark:text-white'
               }`"
             >
               {{
@@ -79,9 +75,7 @@
             </p>
             <p
               :class="`mt-1 text-sm leading-5 ${
-                success || info
+                success || info ? 'text-gray-500' : 'text-red-700'
-                  ? 'text-gray-500 dark:text-gray-400'
-                  : 'text-red-700 dark:text-red-200'
               }`"
             >
               {{
@@ -98,7 +92,7 @@
               :class="
                 success || info
                   ? ' text-gray-400 focus:text-gray-500'
-                  : 'text-red-400 focus:text-red-500 dark:text-red-100'
+                  : 'text-red-400 focus:text-red-500'
               "
               class="
                 inline-flex

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

@@ -2,9 +2,8 @@
   <Disclosure
     v-slot="{ open }"
     as="nav"
-    class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full dark:bg-gray-800"
+    class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full"
   >
-    <BaseDarkHighlight />
     <div class="mx-auto px-8">
       <div class="flex justify-between h-16 w-full">
         <div class="flex">
@@ -34,8 +33,8 @@
               :to="`/${globalStore.companySlug}${item.link}`"
               :class="[
                 hasActiveUrl(item.link)
-                  ? 'border-primary-500 text-primary-600 dark:text-primary-400'
+                  ? 'border-primary-500 text-primary-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-200',
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
                 'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
               ]"
             >
@@ -44,6 +43,20 @@
           </div>
         </div>
         <div class="hidden sm:ml-6 sm:flex sm:items-center">
+          <button
+            type="button"
+            class="
+              bg-white
+              p-1
+              rounded-full
+              text-gray-400
+              hover:text-gray-500
+              focus:outline-none
+              focus:ring-2
+              focus:ring-offset-2
+              focus:ring-primary-500
+            "
+          ></button>
 
           <!-- Profile dropdown -->
 
@@ -72,7 +85,7 @@
               <router-link :to="{ name: 'customer.profile' }">
                 <BaseDropdownItem>
                   <CogIcon
-                    class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200"
+                    class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
                     aria-hidden="true"
                   />
                   {{ $t('navigation.settings') }}
@@ -81,7 +94,7 @@
 
               <BaseDropdownItem @click="logout">
                 <LogoutIcon
-                  class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200"
+                  class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
                   aria-hidden="true"
                 />
                 {{ $t('navigation.logout') }}
@@ -105,8 +118,6 @@
               focus:ring-2
               focus:ring-offset-2
               focus:ring-primary-500
-              dark:bg-gray-700
-              dark:focus:ring-offset-gray-900
             "
           >
             <span class="sr-only">Open main menu</span>
@@ -125,15 +136,15 @@
           :to="`/${globalStore.companySlug}${item.link}`"
           :class="[
             hasActiveUrl(item.link)
-              ? 'bg-primary-50 border-primary-500 text-primary-700 dark:bg-gray-700 dark:text-primary-400'
+              ? 'bg-primary-50 border-primary-500 text-primary-700'
-              : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
+              : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
             'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
           ]"
           :aria-current="item.current ? 'page' : undefined"
           >{{ item.title }}
         </router-link>
       </div>
-      <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-500">
+      <div class="pt-4 pb-3 border-t border-gray-200">
         <div class="flex items-center px-4">
           <div class="shrink-0">
             <img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
@@ -142,10 +153,26 @@
             <div class="text-base font-medium text-gray-800">
               {{ globalStore.currentUser.title }}
             </div>
-            <div class="text-sm font-medium text-gray-500 dark:text-gray-200">
+            <div class="text-sm font-medium text-gray-500">
               {{ globalStore.currentUser.email }}
             </div>
           </div>
+          <button
+            type="button"
+            class="
+              ml-auto
+              bg-white
+              shrink-0
+              p-1
+              rounded-full
+              text-gray-400
+              hover:text-gray-500
+              focus:outline-none
+              focus:ring-2
+              focus:ring-offset-2
+              focus:ring-primary-500
+            "
+          ></button>
         </div>
         <div class="mt-3 space-y-1">
           <router-link
@@ -155,7 +182,7 @@
             :class="[
               hasActiveUrl(item.link)
                 ? 'bg-primary-50 border-primary-500 text-primary-700'
-                : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
+                : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
               'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
             ]"
             >{{ item.title }}</router-link

resources/scripts/customer/views/dashboard/DashboardStatsItem.vue

@@ -12,24 +12,18 @@
       hover:bg-gray-50
       xl:p-4
       lg:col-span-2
-      dark:backdrop-blur-xl
-      dark:shadow-glass
-      dark:border
-      dark:border-white/10
-      dark:bg-gray-800/70
     "
     :class="{ 'lg:!col-span-3': large }"
     :to="route"
   >
     <div>
-      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
+      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
         <slot />
       </span>
-      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
+      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
         {{ label }}
       </span>
     </div>
-      <BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
     <div class="flex items-center">
       <component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
     </div>