test frontend build

.github/workflows/uffizzi-build.yml

@@ -14,8 +14,6 @@ jobs:
     steps:
       - name: Checkout git repo
         uses: actions/checkout@v3
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2        
       - name: Generate UUID image name
         id: uuid
         run: echo "UUID_TAG_APP=$(uuidgen)" >> $GITHUB_ENV
@@ -33,11 +31,10 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           file: ./uffizzi/Dockerfile
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
 
   build-nginx:
+    needs: 
+      - build-application
     name: Build and Push `nginx`
     runs-on: ubuntu-latest
     if: ${{ github.event_name != 'pull_request' || github.event.action != 'closed' }}
@@ -65,6 +62,8 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           file: ./uffizzi/nginx/Dockerfile
+          build-args: |
+            BASE_IMAGE=${{ needs.build-application.outputs.tags }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
 

resources/scripts/admin/components/charts/LineChart.vue

@@ -6,17 +6,8 @@
 
 <script setup>
 import Chart from 'chart.js'
-import {
+import { ref, reactive, computed, onMounted, watchEffect, inject } from 'vue'
-  ref,
-  reactive,
-  computed,
-  onMounted,
-  watchEffect,
-  inject,
-  watch,
-} from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
 
 const utils = inject('utils')
 
@@ -53,11 +44,9 @@ const props = defineProps({
   },
 })
 
-const isDarkModeOn = document.documentElement.classList.contains('dark')
 let myLineChart = null
 const graph = ref(null)
 const companyStore = useCompanyStore()
-const globalStore = useGlobalStore()
 const defaultCurrency = computed(() => {
   return companyStore.selectedCompanyCurrency
 })
@@ -71,14 +60,6 @@ watchEffect(() => {
   }
 })
 
-watch(
-  () => globalStore.isDarkModeOn,
-  () => {
-    myLineChart.reset()
-    updateColors()
-  }
-)
-
 onMounted(() => {
   let context = graph.value.getContext('2d')
   let options = reactive({
@@ -100,8 +81,6 @@ onMounted(() => {
     },
   })
 
-  const salesColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
-
   let data = reactive({
     labels: props.labels,
     datasets: [
@@ -110,16 +89,16 @@ onMounted(() => {
         fill: false,
         lineTension: 0.3,
         backgroundColor: 'rgba(230, 254, 249)',
-        borderColor: salesColor,
+        borderColor: '#040405',
         borderCapStyle: 'butt',
         borderDash: [],
         borderDashOffset: 0.0,
         borderJoinStyle: 'miter',
-        pointBorderColor: salesColor,
+        pointBorderColor: '#040405',
         pointBackgroundColor: '#fff',
         pointBorderWidth: 1,
         pointHoverRadius: 5,
-        pointHoverBackgroundColor: salesColor,
+        pointHoverBackgroundColor: '#040405',
         pointHoverBorderColor: 'rgba(220,220,220,1)',
         pointHoverBorderWidth: 2,
         pointRadius: 4,
@@ -215,12 +194,4 @@ function update() {
     lazy: true,
   })
 }
-
-function updateColors() {
-  const newColor = globalStore.isDarkModeOn ? '#ffffff' : '#040405'
-
-  myLineChart.data.datasets[0].borderColor = newColor
-  myLineChart.data.datasets[0].pointBorderColor = newColor
-  myLineChart.data.datasets[0].pointHoverBackgroundColor = newColor
-}
 </script>

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/LayoutBasic.vue

@@ -12,6 +12,8 @@
       class="h-screen h-screen-ios overflow-y-auto md:pl-56 xl:pl-64 min-h-0"
     >
       <div class="pt-16 pb-16">
+        <h1>Testing</h1>
+
         <router-view />
       </div>
     </main>

resources/scripts/admin/layouts/LayoutInstallation.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="h-screen overflow-y-auto text-base">
+    <h1>Testing</h1>
     <NotificationRoot />
 
     <div class="container mx-auto px-4">

resources/scripts/admin/layouts/LayoutLogin.vue

@@ -93,6 +93,9 @@
         >
           {{ pageHeading }}
         </h1>
+
+        <h1>Testing</h1>
+
         <p
           class="
             hidden

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

@@ -15,17 +15,8 @@
       bg-gradient-to-r
       from-primary-500
       to-primary-400
-      dark:from-gray-700/70 dark:to-gray-800/70
-      bg-primary-500
-      dark:bg-transparent
-      dark:backdrop-blur-xl
-      dark:shadow-glass
-      dark:border
-      dark:border-white/10
     "
   >
-    <BaseDarkHighlight />
-
     <router-link
       to="/admin/dashboard"
       class="
@@ -62,7 +53,6 @@
         cursor-pointer
         md:hidden md:ml-0
         hover:bg-gray-100
-        dark:bg-gray-800 dark:border-gray-500 dark:border
       "
       @click.prevent="onToggle"
     >
@@ -74,7 +64,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 +78,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 +99,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 +112,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 +148,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/layouts/partials/TheSiteSidebar.vue

@@ -15,9 +15,7 @@
         leave-from="opacity-100"
         leave-to="opacity-0"
       >
-        <DialogOverlay
+        <DialogOverlay class="fixed inset-0 bg-gray-600 bg-opacity-75" />
-          class="fixed inset-0 bg-gray-600 bg-opacity-75 dark:bg-gray-900/90"
-        />
       </TransitionChild>
 
       <TransitionChild
@@ -29,9 +27,7 @@
         leave-from="translate-x-0"
         leave-to="-translate-x-full"
       >
-        <div
+        <div class="relative flex flex-col flex-1 w-full max-w-xs bg-white">
-          class="relative flex flex-col flex-1 w-full max-w-xs bg-white dark:bg-gray-800"
-        >
           <TransitionChild
             as="template"
             enter="ease-in-out duration-300"
@@ -44,17 +40,18 @@
             <div class="absolute top-0 right-0 pt-2 -mr-12">
               <button
                 class="
-                flex
+                  flex
-                items-center
+                  items-center
-                justify-center
+                  justify-center
-                w-10
+                  w-10
-                h-10
+                  h-10
-                ml-1
+                  ml-1
-                rounded-full
+                  rounded-full
-                focus:outline-none
+                  focus:outline-none
-                focus:ring-2
+                  focus:ring-2
-                focus:ring-inset
+                  focus:ring-inset
-                focus:ring-white"
+                  focus:ring-white
+                "
                 @click="globalStore.setSidebarVisibility(false)"
               >
                 <span class="sr-only">Close sidebar</span>
@@ -85,8 +82,8 @@
                 :to="item.link"
                 :class="[
                   hasActiveUrl(item.link)
-                    ? 'text-primary-500 border-primary-500 bg-gray-100 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700  dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
+                    ? 'text-primary-500 border-primary-500 bg-gray-100 '
-                    : 'text-black dark:text-gray-300',
+                    : 'text-black',
                   'cursor-pointer px-0 pl-4 py-3 border-transparent flex items-center border-l-4 border-solid text-sm not-italic font-medium',
                 ]"
                 @click="globalStore.setSidebarVisibility(false)"
@@ -103,10 +100,6 @@
                 />
                 {{ $t(item.title) }}
               </router-link>
-              <LightDarkSwitch
-                :show-label="false"
-                class="absolute right-6 top-6 !w-auto"
-              />
             </nav>
           </div>
         </div>
@@ -120,16 +113,17 @@
   <!-- DESKTOP MENU -->
   <div
     class="
-    hidden
+      hidden
-    w-56
+      w-56
-    h-screen
+      h-screen
-    bg-white
+      pb-32
-    border-r border-gray-200 border-solid
+      overflow-y-auto
-    xl:w-64
+      bg-white
-    md:fixed md:flex md:flex-col md:inset-y-0
+      border-r border-gray-200 border-solid
-    pt-16
+      xl:w-64
-    dark:border-gray-800
+      md:fixed md:flex md:flex-col md:inset-y-0
-    dark:bg-gray-800/80"
+      pt-16
+    "
   >
     <div
       v-for="menu in globalStore.menuGroups"
@@ -142,8 +136,8 @@
         :to="item.link"
         :class="[
           hasActiveUrl(item.link)
-            ? 'text-primary-500 border-primary-500 bg-gray-100 dark:border-primary-400 dark:shadow-glass dark:backdrop-blur-xl dark:hover:bg-gray-700 dark:bg-gray-700/50 dark:text-primary-400 dark:font-medium'
+            ? 'text-primary-500 border-primary-500 bg-gray-100 '
-            : 'text-black dark:hover:bg-transparent dark:hover:text-white dark:text-gray-300',
+            : 'text-black',
           'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid border-transparent text-sm not-italic font-medium',
         ]"
       >
@@ -151,8 +145,8 @@
           :name="item.icon"
           :class="[
             hasActiveUrl(item.link)
-              ? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
+              ? 'text-primary-500 group-hover:text-primary-500 '
-              : 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
+              : 'text-gray-400 group-hover:text-black',
             'mr-4 shrink-0 h-5 w-5 ',
           ]"
         />
@@ -160,9 +154,6 @@
         {{ $t(item.title) }}
       </router-link>
     </div>
-    <LightDarkSwitch
-      class="absolute bottom-0 py-4 border-t border-gray-200 dark:border-gray-700"
-    />
   </div>
 </template>
 
@@ -178,7 +169,6 @@ import {
 
 import { useRoute } from 'vue-router'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
-import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
 
 const route = useRoute()
 const globalStore = useGlobalStore()

resources/scripts/admin/stores/global.js

@@ -34,7 +34,6 @@ export const useGlobalStore = (useWindow = false) => {
       isAppLoaded: false,
       isSidebarOpen: false,
       areCurrenciesLoading: false,
-      isDarkModeOn: false,
 
       downloadReport: null,
     }),
@@ -71,8 +70,8 @@ export const useGlobalStore = (useWindow = false) => {
               moduleStore.apiToken = response.data.global_settings.api_token
               moduleStore.enableModules = response.data.modules
 
-              // company store
+                // company store
-              companyStore.companies = response.data.companies
+                companyStore.companies = response.data.companies
               companyStore.selectedCompany = response.data.current_company
               companyStore.setSelectedCompany(response.data.current_company)
               companyStore.selectedCompanySettings =

resources/scripts/admin/views/dashboard/DashboardChart.vue

@@ -2,23 +2,8 @@
   <div>
     <div
       v-if="dashboardStore.isDashboardDataLoaded"
-      class="
+      class="grid grid-cols-10 mt-8 bg-white rounded shadow"
-        grid
-        grid-cols-10
-        mt-8
-        bg-white
-        rounded shadow
-        dark:text-white
-        dark:backdrop-blur-xl
-        dark:shadow-glass
-        dark:border
-        dark:bg-opacity-70
-        dark:border-white/10
-        dark:bg-gray-800
-        relative
-      "
     >
-      <BaseDarkHighlight />
       <!-- Chart -->
       <div
         class="
@@ -69,7 +54,6 @@
           lg:border-t-0 lg:text-right lg:col-span-3
           xl:col-span-2
           lg:grid-cols-1
-          dark:border-white/10
         "
       >
         <div class="p-6">
@@ -112,7 +96,15 @@
           </span>
           <br />
           <span
-            class="block mt-1 text-xl font-semibold leading-8 lg:text-2xl text-red-400"
+            class="
+              block
+              mt-1
+              text-xl
+              font-semibold
+              leading-8
+              lg:text-2xl
+              text-red-400
+            "
           >
             <BaseFormatMoney
               :amount="dashboardStore.totalExpenses"
@@ -124,10 +116,8 @@
           class="
             col-span-3
             p-6
-            border-t
+            border-t border-gray-200 border-solid
-            border-gray-200 border-solid
             lg:col-span-1
-            dark:border-white/10
           "
         >
           <span class="text-xs leading-5 lg:text-sm">
@@ -142,7 +132,7 @@
               font-semibold
               leading-8
               lg:text-2xl
-              text-primary-500 dark:text-primary-400
+              text-primary-500
             "
           >
             <BaseFormatMoney

resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseContentPlaceholders
-    class="grid grid-cols-10 mt-8 bg-white rounded shadow dark:bg-gray-800"
+    class="grid grid-cols-10 mt-8 bg-white rounded shadow"
   >
     <!-- Chart -->
     <div
@@ -29,7 +29,6 @@
         text-center
         border-t border-l border-gray-200 border-solid
         lg:border-t-0 lg:text-right lg:col-span-3
-        dark:border-gray-600
         xl:col-span-2
         lg:grid-cols-1
       "
@@ -78,7 +77,6 @@
           col-span-3
           p-6
           border-t border-gray-200 border-solid
-          dark:border-gray-600
           lg:justify-end lg:items-end lg:col-span-1
         "
       >

resources/scripts/admin/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>

resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseContentPlaceholders
     :rounded="true"
-    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
+    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
   >
     <div>
       <BaseContentPlaceholdersText

resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue

@@ -12,7 +12,6 @@
       shadow
       lg:col-span-2
       xl:p-4
-      dark:bg-gray-800
     "
   >
     <div>

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"
+      {{ $t('settings.customization.invoices.due_date') }}
-    :subtitle="
+    </h6>
-      $t('settings.customization.invoices.due_date_description')
+    <p class="mt-1 text-sm text-gray-500 mb-2">
-    "
+      {{ $t('settings.customization.invoices.due_date_description') }}
-  >
+    </p>
-    {{ $t('settings.customization.invoices.due_date') }}
-  </BaseHeading>
 
     <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,23 +1,21 @@
 <template>
-  <div ref="companySwitchBar" class="relative rounded dark:text-white">
+  <div ref="companySwitchBar" class="relative rounded">
     <CompanyModal />
 
     <div
       class="
-      flex
+        flex
-      items-center
+        items-center
-      justify-center
+        justify-center
-      px-3
+        px-3
-      h-8
+        h-8
-      md:h-9
+        md:h-9
-      ml-2
+        ml-2
-      text-sm
+        text-sm text-white
-      text-white
+        bg-white
-      bg-white
+        rounded
-      rounded
+        cursor-pointer
-      cursor-pointer
+        bg-opacity-20
-      bg-opacity-20
-      dark:bg-gray-700
       "
       @click="isShow = !isShow"
     >
@@ -40,42 +38,28 @@
     >
       <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
+            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
-          pb-4
           "
         >
           <label
             class="
-            px-3
+              px-3
-            py-2
+              py-2
-            text-xs
+              text-xs
-            font-semibold
+              font-semibold
-            text-gray-400
+              text-gray-400
-            mb-0.5
+              mb-0.5
-            block uppercase
+              block
+              uppercase
             "
           >
             {{ $t('company_switcher.label') }}
@@ -84,13 +68,13 @@
           <div
             v-if="companyStore.companies.length < 1"
             class="
-            flex flex-col
+              flex flex-col
-            items-center
+              items-center
-            justify-center
+              justify-center
-            p-2
+              p-2
-            px-3
+              px-3
-            mt-4
+              mt-4
-            text-base text-gray-400
+              text-base text-gray-400
             "
           >
             <BaseIcon name="ExclamationCircleIcon" class="h-5 text-gray-400" />
@@ -102,17 +86,14 @@
                 v-for="(company, index) in companyStore.companies"
                 :key="index"
                 class="
-                p-2
+                  p-2
-                px-3
+                  px-3
-                rounded-md
+                  rounded-md
-                cursor-pointer
+                  cursor-pointer
-                hover:bg-gray-100 hover:text-primary-500
+                  hover:bg-gray-100 hover:text-primary-500
-                dark:hover:bg-gray-700
-                text-gray-900
-                dark:text-white
                 "
                 :class="{
-                  'bg-gray-100 text-primary-500 dark:bg-gray-700':
+                  'bg-gray-100 text-primary-500':
                     companyStore.selectedCompany.id === company.id,
                 }"
                 @click="changeCompany(company)"
@@ -120,19 +101,18 @@
                 <div class="flex items-center">
                   <span
                     class="
-                    flex
+                      flex
-                    items-center
+                      items-center
-                    justify-center
+                      justify-center
-                    mr-3
+                      mr-3
-                    overflow-hidden
+                      overflow-hidden
-                    text-sm
+                      text-base
-                    font-semibold
+                      font-semibold
-                    bg-gray-200
+                      bg-gray-200
-                    rounded-md
+                      rounded-md
-                    w-9
+                      w-9
-                    h-9
+                      h-9
-                    text-primary-500
+                      text-primary-500
-                    dark:bg-gray-900
                     "
                   >
                     <span v-if="!company.logo">
@@ -156,17 +136,15 @@
         <div
           v-if="userStore.currentUser.is_owner"
           class="
-          flex
+            flex
-          items-center
+            items-center
-          justify-center
+            justify-center
-          p-4
+            p-4
-          pl-3
+            pl-3
-          border-t-2
+            border-t-2 border-gray-100
-          border-gray-100
+            cursor-pointer
-          cursor-pointer
+            text-primary-400
-          text-primary-400
+            hover:text-primary-500
-          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/LightDarkSwitcher.vue

@@ -1,101 +0,0 @@
-<!-- This example requires Tailwind CSS v2.0+ -->
-<script lang="ts" setup>
-import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { computed, ref } from 'vue'
-defineProps({
-  showLabel: {
-    type: Boolean,
-    default: true,
-  },
-  vertical: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const globalStore = useGlobalStore()
-
-const enabled = ref(
-  localStorage.getItem('theme') === 'dark' ||
-    document.documentElement.classList.contains('dark')
-)
-
-globalStore.isDarkModeOn = enabled
-
-function onChange(val) {
-  if (val) {
-    localStorage.theme = 'dark'
-    document.documentElement.classList.add('dark')
-    document.documentElement.style.setProperty('color-scheme', 'dark')
-    globalStore.isDarkModeOn = true
-  } else {
-    localStorage.theme = 'light'
-    document.documentElement.classList.remove('dark')
-    document.documentElement.style.setProperty('color-scheme', 'light')
-    globalStore.isDarkModeOn = false
-  }
-}
-</script>
-
-<template>
-  <div class="w-full flex justify-center">
-    <SwitchGroup
-      as="div"
-      class="flex items-center"
-      :class="vertical ? 'flex-col justify-center' : 'flex-row'"
-    >
-      <Switch
-        v-model="enabled"
-        class="relative inline-flex 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 dark:ring-offset-gray-700"
-        :class="[enabled ? 'bg-primary-600' : 'bg-gray-200']"
-        @update:modelValue="onChange"
-      >
-        <span class="sr-only">Use setting</span>
-        <span
-          class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
-          :class="[enabled ? 'translate-x-5' : 'translate-x-0']"
-        >
-          <span
-            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
-            :class="[
-              enabled
-                ? 'opacity-0 ease-out duration-100'
-                : 'opacity-100 ease-in duration-200',
-            ]"
-            aria-hidden="true"
-          >
-            <BaseIcon class="h-3 w-3 text-yellow-500" name="SunIcon" />
-          </span>
-          <span
-            class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
-            :class="[
-              enabled
-                ? 'opacity-100 ease-in duration-200'
-                : 'opacity-0 ease-out duration-100',
-            ]"
-            aria-hidden="true"
-          >
-            <BaseIcon class="h-3 w-3 text-primary-500" name="MoonIcon" />
-          </span>
-        </span>
-      </Switch>
-      <SwitchLabel
-        v-if="showLabel"
-        as="span"
-        class="cursor-pointer"
-        :class="vertical ? 'px-1 text-center mt-2' : 'ml-3'"
-      >
-        <span
-          v-if="enabled"
-          class="text-sm font-medium text-gray-500 dark:text-gray-400"
-        >
-          Dark Mode
-        </span>
-        <span v-else class="text-sm font-medium text-gray-500">
-          Light Mode
-        </span>
-      </SwitchLabel>
-    </SwitchGroup>
-  </div>
-</template>

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,24 +1,18 @@
 <template>
   <div class="flex flex-col items-center justify-center mt-16">
-    <div class="relative">
+    <div class="flex flex-col items-center justify-center">
-      <BaseDarkHighlight class="bg-highlight/[.07] top-2" />
+      <slot></slot>
-
+    </div>
-      <div class="relative z-5 flex flex-col items-center">
+    <div class="mt-2">
-        <div class="flex flex-col items-center justify-center">
+      <label class="font-medium">{{ title }}</label>
-          <slot />
+    </div>
-        </div>
+    <div class="mt-2">
-        <div class="mt-2">
+      <label class="text-gray-500">
-          <label class="font-medium">{{ title }}</label>
+        {{ description }}
-        </div>
+      </label>
-        <div class="mt-2 text-center md:text-left">
+    </div>
-          <label class="text-gray-500 dark:text-gray-400">
+    <div class="mt-6">
-            {{ description }}
+      <slot name="actions" />
-          </label>
-        </div>
-        <div class="mt-6">
-          <slot name="actions" />
-        </div>
-      </div>
     </div>
   </div>
 </template>

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,11 +61,7 @@
               my-4
               ${modalSize}
               sm:w-full
-              dark:shadow-glass
+              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
-              dark:border
-              dark:border-white/10
-              dark:bg-gray-800/90
-              border-t-8 border-solid rounded shadow-xl border-primary-500`"
             >
               <div
                 v-if="hasHeaderSlot"
@@ -91,8 +74,6 @@
                   text-lg
                   font-medium
                   text-black
-                  dark:text-white
-                  dark:border-gray-600
                   border-b border-gray-200 border-solid
                 "
               >

resources/scripts/components/base/BaseModalFooter.vue

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

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',
               ]"
             >