fix padding issue

resources/scripts/admin/components/CopyInputField.vue

@@ -7,7 +7,6 @@
       py-2
       rounded-lg
       bg-opacity-40 bg-gray-300
-      dark:bg-gray-700 dark:border-gray-600
       whitespace-nowrap
       flex-col
       mt-1
@@ -20,7 +19,6 @@
         text-sm
         font-medium
         text-black
-        dark:text-white
         truncate
         select-all select-color
       "

resources/scripts/admin/components/SelectNotePopup.vue

@@ -43,12 +43,6 @@
             max-w-full
             left-0
             top-3
-            bg-white
-            dark:border
-            dark:border-white/10
-            dark:text-white
-            dark:bg-gray-800
-            dark:shadow-glass
           "
         >
           <div
@@ -59,7 +53,7 @@
               ring-1 ring-black ring-opacity-5
             "
           >
-            <div class="relative grid bg-white dark:bg-gray-800">
+            <div class="relative grid bg-white">
               <div class="relative p-4">
                 <BaseInput
                   v-model="textSearch"
@@ -72,7 +66,7 @@
 
               <div
                 v-if="filteredNotes.length > 0"
-                class="relative flex flex-col overflow-auto list max-h-36 dark:border-white/10"
+                class="relative flex flex-col overflow-auto list max-h-36"
               >
                 <div
                   v-for="(note, index) in filteredNotes"
@@ -85,8 +79,6 @@
                     cursor-pointer
                     hover:bg-gray-100 hover:cursor-pointer
                     last:border-b-0
-                    dark:border-gray-600
-                    dark:border-white/10 dark:hover:bg-gray-700/30
                   "
                   @click="selectNote(index, close)"
                 >
@@ -99,7 +91,6 @@
                         leading-tight
                         text-gray-700
                         cursor-pointer
-                        dark:text-gray-400
                       "
                     >
                       {{ note.name }}
@@ -127,10 +118,6 @@
                 bg-gray-200
                 border-none
                 outline-none
-                dark:bg-gray-600/70
-                dark:backdrop-blur-xl
-                dark:shadow-glass
-                dark:hover:bg-gray-600/80
               "
               @click="openNoteModal"
             >

resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue

@@ -1,13 +1,5 @@
 <template>
-  <tr
+  <tr class="box-border bg-white border border-gray-200 border-solid rounded-b">
-    class="
-      box-border
-      bg-white
-      border border-gray-200 border-solid
-      rounded-b
-      dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
-      "
-    >
     <td colspan="5" class="p-0 text-left align-top">
       <table class="w-full">
         <colgroup>
@@ -138,7 +130,7 @@
                 <div class="flex items-center justify-center w-6 h-10 mx-2">
                   <BaseIcon
                     v-if="showRemoveButton"
-                    class="h-5 dark:text-red-400 cursor-pointer"
+                    class="h-5 text-gray-700 cursor-pointer"
                     name="TrashIcon"
                     @click="store.removeItem(index)"
                   />

resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue

@@ -30,22 +30,7 @@
         <template v-if="userStore.hasAbilities(ability)" #action>
           <button
             type="button"
-            class="
+            class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-none cursor-pointer "
-              flex
-              items-center
-              justify-center
-              w-full
-              px-2
-              py-2
-              bg-gray-200
-              border-none
-              outline-none
-              cursor-pointer
-              dark:bg-gray-600/70
-              dark:backdrop-blur-xl
-              dark:shadow-glass
-              dark:hover:bg-gray-600/80
-            "
             @click="openTaxModal"
           >
             <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
@@ -68,7 +53,7 @@
       <BaseIcon
         v-if="taxes.length && index !== taxes.length - 1"
         name="TrashIcon"
-        class="h-5 text-gray-700 dark:text-red-400 cursor-pointer"
+        class="h-5 text-gray-700 cursor-pointer"
         @click="removeTax(index)"
       />
     </div>

resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue

@@ -1,172 +1,155 @@
 <template>
-  <div class="relative" >
+  <table class="text-center item-table min-w-full">
-    <BaseDarkHighlight class="z-[-1]" />
+    <colgroup>
-    <table class="text-center item-table min-w-full">
+      <col style="width: 40%; min-width: 280px" />
-      <colgroup>
+      <col style="width: 10%; min-width: 120px" />
-        <col style="width: 40%; min-width: 280px" />
+      <col style="width: 15%; min-width: 120px" />
-        <col style="width: 10%; min-width: 120px" />
+      <col
-        <col style="width: 15%; min-width: 120px" />
+        v-if="store[storeProp].discount_per_item === 'YES'"
-        <col
+        style="width: 15%; min-width: 160px"
+      />
+      <col style="width: 15%; min-width: 120px" />
+    </colgroup>
+    <thead class="bg-white border border-gray-200 border-solid">
+      <tr>
+        <th
+          class="
+            px-5
+            py-3
+            text-sm
+            not-italic
+            font-medium
+            leading-5
+            text-left text-gray-700
+            border-t border-b border-gray-200 border-solid
+          "
+        >
+          <BaseContentPlaceholders v-if="isLoading">
+            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+          </BaseContentPlaceholders>
+          <span v-else class="pl-7">
+            {{ $tc('items.item', 2) }}
+          </span>
+        </th>
+        <th
+          class="
+            px-5
+            py-3
+            text-sm
+            not-italic
+            font-medium
+            leading-5
+            text-right text-gray-700
+            border-t border-b border-gray-200 border-solid
+          "
+        >
+          <BaseContentPlaceholders v-if="isLoading">
+            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+          </BaseContentPlaceholders>
+          <span v-else>
+            {{ $t('invoices.item.quantity') }}
+          </span>
+        </th>
+        <th
+          class="
+            px-5
+            py-3
+            text-sm
+            not-italic
+            font-medium
+            leading-5
+            text-left text-gray-700
+            border-t border-b border-gray-200 border-solid
+          "
+        >
+          <BaseContentPlaceholders v-if="isLoading">
+            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+          </BaseContentPlaceholders>
+          <span v-else>
+            {{ $t('invoices.item.price') }}
+          </span>
+        </th>
+        <th
           v-if="store[storeProp].discount_per_item === 'YES'"
-          style="width: 15%; min-width: 160px"
+          class="
-        />
+            px-5
-        <col style="width: 15%; min-width: 120px" />
+            py-3
-      </colgroup>
+            text-sm
-      <thead
+            not-italic
-        class="
+            font-medium
-          bg-white
+            leading-5
-          border
+            text-left text-gray-700
-          border-gray-200
+            border-t border-b border-gray-200 border-solid
-          border-solid
+          "
-          dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
+        >
-        "
+          <BaseContentPlaceholders v-if="isLoading">
-      >
+            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-        <tr>
+          </BaseContentPlaceholders>
-          <th
+          <span v-else>
-            class="
+            {{ $t('invoices.item.discount') }}
-              px-5
+          </span>
-              py-3
+        </th>
-              text-sm
+        <th
-              not-italic
+          class="
-              font-medium
+            px-5
-              leading-5
+            py-3
-              text-left text-gray-700
+            text-sm
-              border-t border-b border-gray-200 border-solid
+            not-italic
-              dark:text-white dark:border-white/10
+            font-medium
-            "
+            leading-5
-          >
+            text-right text-gray-700
-            <BaseContentPlaceholders v-if="isLoading">
+            border-t border-b border-gray-200 border-solid
-              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+          "
-            </BaseContentPlaceholders>
+        >
-            <span v-else class="pl-7">
+          <BaseContentPlaceholders v-if="isLoading">
-              {{ $tc('items.item', 2) }}
+            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-            </span>
+          </BaseContentPlaceholders>
-          </th>
+          <span v-else class="pr-10 column-heading">
-          <th
+            {{ $t('invoices.item.amount') }}
-            class="
+          </span>
-              px-5
+        </th>
-              py-3
+      </tr>
-              text-sm
+    </thead>
-              not-italic
+    <draggable
-              font-medium
+      v-model="store[storeProp].items"
-              leading-5
+      item-key="id"
-              text-right text-gray-700
+      tag="tbody"
-              border-t border-b border-gray-200 border-solid
+      handle=".handle"
-              dark:text-white dark:border-white/10
-            "
-          >
-            <BaseContentPlaceholders v-if="isLoading">
-              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-            </BaseContentPlaceholders>
-            <span v-else>
-              {{ $t('invoices.item.quantity') }}
-            </span>
-          </th>
-          <th
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
-              dark:text-white dark:border-white/10
-            "
-          >
-            <BaseContentPlaceholders v-if="isLoading">
-              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-            </BaseContentPlaceholders>
-            <span v-else>
-              {{ $t('invoices.item.price') }}
-            </span>
-          </th>
-          <th
-            v-if="store[storeProp].discount_per_item === 'YES'"
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
-              dark:text-white dark:border-white/10
-            "
-          >
-            <BaseContentPlaceholders v-if="isLoading">
-              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-            </BaseContentPlaceholders>
-            <span v-else>
-              {{ $t('invoices.item.discount') }}
-            </span>
-          </th>
-          <th
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-right text-gray-700
-              border-t border-b border-gray-200 border-solid
-              dark:text-white dark:border-white/10
-            "
-          >
-            <BaseContentPlaceholders v-if="isLoading">
-              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-            </BaseContentPlaceholders>
-            <span v-else class="pr-10 column-heading">
-              {{ $t('invoices.item.amount') }}
-            </span>
-          </th>
-        </tr>
-      </thead>
-      <draggable
-        v-model="store[storeProp].items"
-        item-key="id"
-        tag="tbody"
-        handle=".handle"
-      >
-        <template #item="{ element, index }">
-          <Item
-            :key="element.id"
-            :index="index"
-            :item-data="element"
-            :loading="isLoading"
-            :currency="defaultCurrency"
-            :item-validation-scope="itemValidationScope"
-            :invoice-items="store[storeProp].items"
-            :store="store"
-            :store-prop="storeProp"
-          />
-        </template>
-      </draggable>
-    </table>
-
-    <div
-      class="
-        flex
-        items-center
-        justify-center
-        w-full
-        px-6
-        py-3
-        text-base
-        border border-t-0 border-gray-200 border-solid
-        cursor-pointer
-        text-primary-400
-        hover:bg-primary-100
-        dark:bg-gray-900/50 dark:border-white/10 dark:hover:bg-gray-900/80
-      "
-      @click="store.addItem"
     >
-      <BaseIcon name="PlusCircleIcon" class="mr-2" />
+      <template #item="{ element, index }">
-      {{ $t('general.add_new_item') }}
+        <Item
-    </div>
+          :key="element.id"
+          :index="index"
+          :item-data="element"
+          :loading="isLoading"
+          :currency="defaultCurrency"
+          :item-validation-scope="itemValidationScope"
+          :invoice-items="store[storeProp].items"
+          :store="store"
+          :store-prop="storeProp"
+        />
+      </template>
+    </draggable>
+  </table>
+
+  <div
+    class="
+      flex
+      items-center
+      justify-center
+      w-full
+      px-6
+      py-3
+      text-base
+      border border-t-0 border-gray-200 border-solid
+      cursor-pointer
+      text-primary-400
+      hover:bg-primary-100
+    "
+    @click="store.addItem"
+  >
+    <BaseIcon name="PlusCircleIcon" class="mr-2" />
+    {{ $t('general.add_new_item') }}
   </div>
 </template>
 

resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue

@@ -5,7 +5,7 @@
     >
       <SelectNotePopup :type="type" @select="onSelectNote" />
     </div>
-    <label class="text-gray-800 font-medium mb-4 text-sm dark:text-gray-300">
+    <label class="text-gray-800 font-medium mb-4 text-sm">
       {{ $t('invoices.notes') }}
     </label>
     <BaseCustomInput

resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue

@@ -6,7 +6,6 @@
       mt-6
       bg-white
       border border-gray-200 border-solid
-      dark:bg-gray-800/50 dark:border-white/10
       rounded
       md:min-w-[390px]
       min-w-[300px]
@@ -30,16 +29,7 @@
 
       <label
         v-else
-        class="
+        class="flex items-center justify-center m-0 text-lg text-black uppercase "
-          flex
-          items-center
-          justify-center
-          m-0
-          text-lg
-          text-black
-          dark:text-white
-          uppercase
-        "
       >
         <BaseFormatMoney
           :amount="store.getSubTotal"
@@ -69,16 +59,7 @@
 
       <label
         v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="
+        class="flex items-center justify-center m-0 text-lg text-black uppercase "
-          flex
-          items-center
-          justify-center
-          m-0
-          text-lg
-          text-black
-          dark:text-white
-          uppercase
-        "
       >
         <BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
       </label>
@@ -185,23 +166,14 @@
     </div>
 
     <div
-      class="
+      class="flex items-center justify-between w-full pt-2 mt-5 border-t border-gray-200 border-solid "
-        flex
-        items-center
-        justify-between
-        w-full
-        pt-2
-        mt-5
-        border-t border-gray-200 border-solid
-        dark:border-gray-600
-      "
     >
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
       </BaseContentPlaceholders>
       <label
         v-else
-        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase dark:text-gray-400"
+        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
         >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
       >
 

resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue

@@ -1,23 +1,14 @@
 <template>
   <div class="flex items-center justify-between w-full mt-2 text-sm">
-    <label class="font-semibold leading-5 text-gray-500 uppercase dark:text-gray-300">
+    <label class="font-semibold leading-5 text-gray-500 uppercase">
       {{ tax.name }} ({{ tax.percent }} %)
     </label>
-    <label
+    <label class="flex items-center justify-center text-lg text-black">
-      class="
-        flex
-        items-center
-        justify-center
-        text-lg
-        text-black
-        dark:text-white
-      "
-    >
       <BaseFormatMoney :amount="tax.amount" :currency="currency" />
 
       <BaseIcon
         name="TrashIcon"
-        class="h-5 ml-2 cursor-pointer dark:text-red-400"
+        class="h-5 ml-2 cursor-pointer"
         @click="$emit('remove', tax.id)"
       />
     </label>

resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue

@@ -44,7 +44,7 @@
             >
               <!-- Tax Search Input  -->
 
-              <div class="relative bg-white dark:bg-gray-800">
+              <div class="relative bg-white">
                 <div class="relative p-4">
                   <BaseInput
                     v-model="textSearch"
@@ -65,14 +65,13 @@
                     list
                     max-h-36
                     border-t border-gray-200
-                    dark:border-gray-600
                   "
                 >
                   <div
                     v-for="(taxType, index) in filteredTaxType"
                     :key="index"
                     :class="{
-                      'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none dark:bg-gray-900':
+                      'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none':
                         taxes.find((val) => {
                           return val.tax_type_id === taxType.id
                         }),
@@ -85,7 +84,6 @@
                       cursor-pointer
                       hover:bg-gray-100 hover:cursor-pointer
                       last:border-b-0
-                      dark:border-gray-600 dark:hover:bg-gray-700/20
                     "
                     @click="selectTaxType(taxType, close)"
                   >
@@ -98,7 +96,6 @@
                           leading-tight
                           text-gray-700
                           cursor-pointer
-                          dark:text-gray-300
                         "
                       >
                         {{ taxType.name }}
@@ -111,7 +108,6 @@
                           font-semibold
                           text-gray-700
                           cursor-pointer
-                          dark:text-gray-300
                         "
                       >
                         {{ taxType.percent }} %
@@ -142,10 +138,6 @@
                   bg-gray-200
                   border-none
                   outline-none
-                  dark:bg-gray-600/70
-                  dark:backdrop-blur-xl
-                  dark:shadow-glass
-                  dark:hover:bg-gray-600/80
                 "
                 @click="openTaxTypeModal"
               >

resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label class="flex text-gray-800 font-medium text-sm mb-2 dark:text-gray-300">
+    <label class="flex text-gray-800 font-medium text-sm mb-2">
       {{ $t('general.select_template') }}
       <span class="text-sm text-red-500"> *</span>
     </label>

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

@@ -122,7 +122,7 @@
           <BaseTab :title="$t('customers.portal_access')">
             <BaseInputGrid class="col-span-5 lg:col-span-4">
               <div class="md:col-span-2">
-                <p class="text-sm text-gray-500 dark:text-gray-300">
+                <p class="text-sm text-gray-500">
                   {{ $t('customers.portal_access_text') }}
                 </p>
 

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

@@ -40,7 +40,6 @@
             px-4
             md:px-8
             py-1.5
-            dark:text-gray-200
           "
         >
           {{ $tc('settings.roles.permission', 2) }}

resources/scripts/admin/layouts/LayoutInstallation.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="h-screen overflow-y-auto text-base dark:bg-gray-800/80 dark:text-white">
+  <div class="h-screen overflow-y-auto text-base">
     <NotificationRoot />
 
-    <div class="container px-4 mx-auto">
+    <div class="container mx-auto px-4">
       <router-view />
     </div>
   </div>

resources/scripts/admin/layouts/LayoutLogin.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100 dark:bg-gray-900">
+  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100">
     <NotificationRoot />
 
     <div

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

@@ -68,8 +68,10 @@
           </TransitionChild>
           <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
             <div class="flex items-center shrink-0 px-4 mb-10">
-              <img class="h-auto max-w-full w-36 hidden dark:block" :src="getDarkLogo"/>
+              <MainLogo
-              <img class="h-auto max-w-full w-36 block dark:hidden" :src="getLightLogo"/>
+                class="block h-auto max-w-full w-36 text-primary-400"
+                alt="Crater Logo"
+              />
             </div>
 
             <nav
@@ -93,7 +95,7 @@
                   :name="item.icon"
                   :class="[
                     hasActiveUrl(item.link)
-                      ? 'text-primary-500 dark:text-primary-400'
+                      ? 'text-primary-500 '
                       : 'text-gray-400',
                     'mr-4 shrink-0 h-5 w-5',
                   ]"
@@ -149,7 +151,7 @@
           :name="item.icon"
           :class="[
             hasActiveUrl(item.link)
-              ? 'text-primary-500 dark:text-primary-400'
+              ? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
               : 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
             'mr-4 shrink-0 h-5 w-5 ',
           ]"
@@ -165,7 +167,8 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import MainLogo from '@/scripts/components/icons/MainLogo.vue'
+
 import {
   Dialog,
   DialogOverlay,
@@ -180,9 +183,6 @@ import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
 const route = useRoute()
 const globalStore = useGlobalStore()
 
-const getDarkLogo = computed(() => new URL('/img/logo-white.png', import.meta.url))
-const getLightLogo = computed(() => new URL('/img/crater-logo.png', import.meta.url))
-
 function hasActiveUrl(url) {
   return route.path.indexOf(url) > -1
 }

resources/scripts/admin/stores/global.js

@@ -34,7 +34,8 @@ export const useGlobalStore = (useWindow = false) => {
       isAppLoaded: false,
       isSidebarOpen: false,
       areCurrenciesLoading: false,
-      isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark'),
+      isDarkModeOn: false,
+
       downloadReport: null,
     }),
 

resources/scripts/admin/views/auth/ForgotPassword.vue

@@ -32,7 +32,7 @@
     <div class="mt-4 mb-4 text-sm">
       <router-link
         to="/login"
-        class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
+        class="text-sm text-primary-400 hover:text-gray-700"
       >
         {{ $t('general.back_to_login') }}
       </router-link>

resources/scripts/admin/views/auth/Login.vue

@@ -49,7 +49,7 @@
       <div class="mb-4">
         <router-link
           to="forgot-password"
-          class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
+          class="text-sm text-primary-400 hover:text-gray-700"
         >
           {{ $t('login.forgot_password') }}
         </router-link>

resources/scripts/admin/views/customers/Create.vue

@@ -171,7 +171,7 @@
 
           <BaseInputGrid class="col-span-5 lg:col-span-4">
             <div class="md:col-span-2">
-              <p class="text-sm text-gray-500 dark:text-gray-300">
+              <p class="text-sm text-gray-500">
                 {{ $t('customers.portal_access_text') }}
               </p>
 

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

@@ -113,7 +113,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleCustomers">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -154,7 +154,7 @@
               :text="row.data.name"
               :length="30"
               tag="span"
-              class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
+              class="font-medium text-primary-500 flex flex-col"
             />
             <BaseText
               :text="row.data.contact_name ? row.data.contact_name : ''"

resources/scripts/admin/views/customers/View.vue

@@ -34,8 +34,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
             :to="`/admin/estimates/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem v-slot="slotProps">
+            <BaseDropdownItem class="">
-              <BaseIcon name="DocumentIcon" :class="slotProps.class" />
+              <BaseIcon name="DocumentIcon" class="mr-3 text-gray-600" />
               {{ $t('estimates.new_estimate') }}
             </BaseDropdownItem>
           </router-link>
@@ -44,8 +44,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
             :to="`/admin/invoices/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem v-slot="slotProps">
+            <BaseDropdownItem>
-              <BaseIcon name="DocumentTextIcon" :class="slotProps.class" />
+              <BaseIcon name="DocumentTextIcon" class="mr-3 text-gray-600" />
               {{ $t('invoices.new_invoice') }}
             </BaseDropdownItem>
           </router-link>
@@ -54,8 +54,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_PAYMENT)"
             :to="`/admin/payments/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem v-slot="slotProps">
+            <BaseDropdownItem>
-              <BaseIcon name="CreditCardIcon" :class="slotProps.class" />
+              <BaseIcon name="CreditCardIcon" class="mr-3 text-gray-600" />
               {{ $t('payments.new_payment') }}
             </BaseDropdownItem>
           </router-link>
@@ -64,8 +64,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_EXPENSE)"
             :to="`/admin/expenses/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem v-slot="slotProps">
+            <BaseDropdownItem>
-              <BaseIcon name="CalculatorIcon" :class="slotProps.class" />
+              <BaseIcon name="CalculatorIcon" class="mr-3 text-gray-600" />
               {{ $t('expenses.new_expense') }}
             </BaseDropdownItem>
           </router-link>

resources/scripts/admin/views/customers/partials/CustomerInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200 dark:border-gray-600">
+  <div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-gray-200">
     <!-- Basic Info -->
     <BaseHeading>
       {{ $t('customers.basic_info') }}

resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue

@@ -13,7 +13,6 @@
       xl:ml-64
       w-88
       xl:block
-      dark:bg-gray-800
     "
   >
     <div
@@ -26,7 +25,6 @@
         pb-2
         border border-gray-200 border-solid
         height-full
-        dark:border-gray-600
       "
     >
       <BaseInput
@@ -61,7 +59,6 @@
               mb-2
               text-sm
               border-b border-gray-200 border-solid
-              dark:border-gray-600
             "
           >
             {{ $t('general.sort_by') }}
@@ -117,7 +114,6 @@
         border-l border-gray-200 border-solid
         sidebar
         base-scroll
-        dark:border-gray-600
       "
     >
       <div v-for="(customer, index) in customerList" :key="index">
@@ -126,9 +122,9 @@
           :id="'customer-' + customer.id"
           :to="`/admin/customers/${customer.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:border-primary-400 dark:bg-gray-700':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid':
                 hasActiveUrl(customer.id),
             },
           ]"
@@ -147,7 +143,6 @@
                 text-black
                 capitalize
                 truncate
-                dark:text-white
               "
             />
 
@@ -162,7 +157,6 @@
                 font-medium
                 leading-5
                 text-gray-600
-                dark:text-gray-400
               "
             />
           </div>
@@ -181,7 +175,7 @@
       </div>
       <p
         v-if="!customerList?.length && !isFetching"
-        class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
+        class="flex justify-center px-4 mt-5 text-sm text-gray-600"
       >
         {{ $t('customers.no_matching_customers') }}
       </p>

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

@@ -28,7 +28,7 @@
           <template #cell-user="{ row }">
             <router-link
               :to="{ path: `invoices/${row.data.id}/view` }"
-              class="font-medium text-primary-500 dark:text-primary-400"
+              class="font-medium text-primary-500"
             >
               {{ row.data.customer.name }}
             </router-link>
@@ -78,7 +78,7 @@
           <template #cell-user="{ row }">
             <router-link
               :to="{ path: `estimates/${row.data.id}/view` }"
-              class="font-medium text-primary-500 dark:text-primary-400"
+              class="font-medium text-primary-500"
             >
               {{ row.data.customer.name }}
             </router-link>

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

@@ -164,7 +164,7 @@
           </template>
 
           <BaseDropdownItem @click="removeMultipleEstimates">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -205,7 +205,7 @@
         <template #cell-estimate_number="{ row }">
           <router-link
             :to="{ path: `estimates/${row.data.id}/view` }"
-            class="font-medium text-primary-500 dark:text-primary-400"
+            class="font-medium text-primary-500"
           >
             {{ row.data.estimate_number }}
           </router-link>

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

@@ -50,7 +50,6 @@
         xl:ml-64
         w-88
         xl:block
-        dark:bg-gray-800
       "
     >
       <div
@@ -63,7 +62,6 @@
           pb-2
           border border-gray-200 border-solid
           height-full
-          dark:border-gray-600
         "
       >
         <div class="mb-6">
@@ -98,10 +96,9 @@
                 px-4
                 py-1
                 pb-2
-                mb-2
+                mb-1 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
-                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -164,7 +161,6 @@
           overflow-y-scroll
           border-l border-gray-200 border-solid
           base-scroll
-          dark:border-gray-600
         "
       >
         <div v-for="(estimate, index) in estimateList" :key="index">
@@ -173,9 +169,9 @@
             :id="'estimate-' + estimate.id"
             :to="`/admin/estimates/${estimate.id}/view`"
             :class="[
-              'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
+              'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
               {
-                'bg-gray-100 border-l-4 border-primary-500 border-solid dark:border-primary-400 dark:bg-gray-700':
+                'bg-gray-100 border-l-4 border-primary-500 border-solid':
                   hasActiveUrl(estimate.id),
               },
             ]"
@@ -195,7 +191,6 @@
                   text-black
                   capitalize
                   truncate
-                  dark:text-white
                 "
               />
 
@@ -208,7 +203,6 @@
                   font-medium
                   leading-5
                   text-gray-600
-                  dark:text-gray-400
                 "
               >
                 {{ estimate.estimate_number }}
@@ -234,7 +228,6 @@
                   font-semibold
                   leading-8
                   text-right text-gray-900
-                  dark:text-white
                 "
               />
 
@@ -246,7 +239,6 @@
                   leading-5
                   text-right text-gray-600
                   est-date
-                  dark:text-gray-400
                 "
               >
                 {{ estimate.formatted_estimate_date }}
@@ -259,7 +251,7 @@
         </div>
         <p
           v-if="!estimateList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('estimates.no_matching_estimates') }}
         </p>

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

@@ -135,7 +135,7 @@
             v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
             @click="removeMultipleExpenses"
           >
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -171,7 +171,7 @@
         <template #cell-name="{ row }">
           <router-link
             :to="{ path: `expenses/${row.data.id}/edit` }"
-            class="font-medium text-primary-500 dark:text-primary-400"
+            class="font-medium text-primary-500"
           >
             {{ row.data.expense_category.name }}
           </router-link>

resources/scripts/admin/views/installation/Installation.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="flex flex-col items-center justify-between w-full pt-10">
-    <LightDarkButton class="absolute z-10 top-2 right-2"/>
     <img
       id="logo-crater"
       src="/img/crater-logo.png"
@@ -30,7 +29,6 @@ import Step7CompanyInfo from './Step7CompanyInfo.vue'
 import Step8CompanyPreferences from './Step8CompanyPreferences.vue'
 import { useInstallationStore } from '@/scripts/admin/stores/installation'
 import { useRouter } from 'vue-router'
-import LightDarkButton from '@/scripts/components/LightDarkButton.vue'
 
 export default {
   components: {
@@ -42,7 +40,6 @@ export default {
     step_6: Step6AccountSettings,
     step_7: Step7CompanyInfo,
     step_8: Step8CompanyPreferences,
-    LightDarkButton
   },
 
   setup() {

resources/scripts/admin/views/installation/Step1RequirementsCheck.vue

@@ -7,7 +7,7 @@
       <div class="mb-6">
         <div
           v-if="phpSupportInfo"
-          class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 lg:gap-24 sm:gap-4 dark:border-white/10"
+          class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200  lg:gap-24 sm:gap-4"
         >
           <div class="col-span-2 text-sm">
             {{
@@ -32,7 +32,7 @@
           <div
             v-for="(requirement, index) in requirements"
             :key="index"
-            class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 dark:border-gray-600 lg:gap-24 sm:gap-4"
+            class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200  lg:gap-24 sm:gap-4"
           >
             <div class="col-span-2 text-sm">
               {{ index }}

resources/scripts/admin/views/installation/Step2PermissionCheck.vue

@@ -8,7 +8,12 @@
       <div
         v-for="(permission, index) in 3"
         :key="index"
-        class="grid grid-flow-row grid-cols-3 border border-gray-200 lg:gap-24 sm:gap-4 dark:border-gray-600"
+        class="
+          grid grid-flow-row grid-cols-3
+          lg:gap-24
+          sm:gap-4
+          border border-gray-200
+        "
       >
         <BaseContentPlaceholdersText :lines="1" class="col-span-4 p-3" />
       </div>
@@ -24,7 +29,7 @@
       <div
         v-for="(permission, index) in permissions"
         :key="index"
-        class="border border-gray-200 dark:border-gray-600"
+        class="border border-gray-200"
       >
         <div class="grid grid-flow-row grid-cols-3 lg:gap-24 sm:gap-4">
           <div class="col-span-2 p-3">
@@ -33,11 +38,11 @@
           <div class="p-3 text-right">
             <span
               v-if="permission.isSet"
-              class="inline-block w-4 h-4 ml-3 mr-2 bg-green-500 rounded-full"
+              class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-green-500"
             />
             <span
               v-else
-              class="inline-block w-4 h-4 ml-3 mr-2 bg-red-500 rounded-full"
+              class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-red-500"
             />
             <span>{{ permission.permission }}</span>
           </div>

resources/scripts/admin/views/installation/Step3DatabaseConfig.vue

@@ -2,6 +2,7 @@
   <BaseWizardStep
     :title="$t('wizard.database.database')"
     :description="$t('wizard.database.desc')"
+    step-container="w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded md:w-full"
   >
     <component
       :is="databaseData.database_connection"

resources/scripts/admin/views/installation/Step4VerifyDomain.vue

@@ -18,18 +18,18 @@
       </BaseInputGroup>
     </div>
 
-    <p class="mt-4 mb-0 text-sm text-gray-600 dark:text-white">Notes:</p>
+    <p class="mt-4 mb-0 text-sm text-gray-600">Notes:</p>
-    <ul class="w-full text-gray-600 list-disc list-inside dark:text-gray-300">
+    <ul class="w-full text-gray-600 list-disc list-inside">
       <li class="text-sm leading-8">
         App domain should not contain
-        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">https://</b> or
+        <b class="inline-block px-1 bg-gray-100 rounded-sm">https://</b> or
-        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">http</b> in front of
+        <b class="inline-block px-1 bg-gray-100 rounded-sm">http</b> in front of
         the domain.
       </li>
       <li class="text-sm leading-8">
         If you're accessing the website on a different port, please mention the
         port. For example:
-        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">localhost:8080</b>
+        <b class="inline-block px-1 bg-gray-100">localhost:8080</b>
       </li>
     </ul>
 

resources/scripts/admin/views/installation/Step6AccountSettings.vue

@@ -68,15 +68,13 @@
             @input="v$.userForm.password.$touch()"
           >
             <template #right>
-              <BaseIcon
+              <EyeOffIcon
                 v-if="isShowPassword"
-                name="EyeOffIcon"
                 class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />
-              <BaseIcon
+              <EyeIcon
                 v-else
-                name="EyeIcon"
                 class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                 @click="isShowPassword = !isShowPassword"
               />

resources/scripts/admin/views/installation/Step7CompanyInfo.vue

@@ -2,6 +2,7 @@
   <BaseWizardStep
     :title="$t('wizard.company_info')"
     :description="$t('wizard.company_info_desc')"
+    step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
   >
     <form action="" @submit.prevent="next">
       <div class="grid grid-cols-1 mb-4 md:grid-cols-2 md:mb-6">

resources/scripts/admin/views/installation/Step8CompanyPreferences.vue

@@ -2,6 +2,7 @@
   <BaseWizardStep
     :title="$t('wizard.preferences')"
     :description="$t('wizard.preferences_desc')"
+    step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
   >
     <form action="" @submit.prevent="next">
       <div>

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

@@ -178,7 +178,7 @@
           </template>
 
           <BaseDropdownItem @click="removeMultipleInvoices">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -220,7 +220,7 @@
         <template #cell-invoice_number="{ row }">
           <router-link
             :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500 dark:text-primary-400"
+            class="font-medium text-primary-500"
           >
             {{ row.data.invoice_number }}
           </router-link>

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

@@ -299,7 +299,6 @@ onSearched = debounce(onSearched, 500)
         xl:ml-64
         w-88
         xl:block
-        dark:bg-gray-800
       "
     >
       <div
@@ -312,7 +311,6 @@ onSearched = debounce(onSearched, 500)
           pb-2
           border border-gray-200 border-solid
           height-full
-          dark:border-gray-600
         "
       >
         <div class="mb-6">
@@ -341,10 +339,9 @@ onSearched = debounce(onSearched, 500)
                 px-2
                 py-1
                 pb-2
-                mb-2
+                mb-1 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
-                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -407,7 +404,6 @@ onSearched = debounce(onSearched, 500)
           overflow-y-scroll
           border-l border-gray-200 border-solid
           base-scroll
-          dark:border-gray-600
         "
       >
         <div v-for="(invoice, index) in invoiceList" :key="index">
@@ -416,9 +412,9 @@ onSearched = debounce(onSearched, 500)
             :id="'invoice-' + invoice.id"
             :to="`/admin/invoices/${invoice.id}/view`"
             :class="[
-              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
+              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
               {
-                'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
+                'bg-gray-100 border-l-4 border-primary-500 border-solid':
                   hasActiveUrl(invoice.id),
               },
             ]"
@@ -438,7 +434,6 @@ onSearched = debounce(onSearched, 500)
                   text-black
                   capitalize
                   truncate
-                  dark:text-white
                 "
               />
 
@@ -451,17 +446,16 @@ onSearched = debounce(onSearched, 500)
                   font-medium
                   leading-5
                   text-gray-600
-                  dark:text-gray-400
                 "
               >
                 {{ invoice.invoice_number }}
               </div>
-              <BaseInvoiceStatusBadge
+              <BaseEstimateStatusBadge
                 :status="invoice.status"
                 class="px-1 text-xs"
               >
                 {{ invoice.status }}
-              </BaseInvoiceStatusBadge>
+              </BaseEstimateStatusBadge>
             </div>
 
             <div class="flex-1 whitespace-nowrap right">
@@ -474,7 +468,6 @@ onSearched = debounce(onSearched, 500)
                   leading-8
                   text-right text-gray-900
                   block
-                  dark:text-white
                 "
                 :amount="invoice.total"
                 :currency="invoice.customer.currency"
@@ -487,7 +480,6 @@ onSearched = debounce(onSearched, 500)
                   leading-5
                   text-right text-gray-600
                   est-date
-                  dark:text-gray-400
                 "
               >
                 {{ invoice.formatted_invoice_date }}
@@ -500,7 +492,7 @@ onSearched = debounce(onSearched, 500)
         </div>
         <p
           v-if="!invoiceList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('invoices.no_matching_invoices') }}
         </p>

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

@@ -117,7 +117,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleItems">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -153,7 +153,7 @@
         <template #cell-name="{ row }">
           <router-link
             :to="{ path: `items/${row.data.id}/edit` }"
-            class="font-medium text-primary-500 dark:text-primary-400"
+            class="font-medium text-primary-500"
           >
             {{ row.data.name }}
           </router-link>

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

@@ -53,7 +53,7 @@
           </div>
         </div>
         <div v-else class="mt-24">
-          <label class="flex items-center justify-center text-gray-500 dark:text-gray-300">
+          <label class="flex items-center justify-center text-gray-500">
             {{ $t('modules.no_modules_installed') }}
           </label>
         </div>
@@ -61,10 +61,10 @@
     </div>
 
     <BaseCard v-else class="mt-6">
-      <h6 class="text-gray-900 text-lg font-medium dark:text-white">
+      <h6 class="text-gray-900 text-lg font-medium">
         {{ $t('modules.connect_installation') }}
       </h6>
-      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+      <p class="mt-1 text-sm text-gray-500">
         {{
           $t('modules.api_token_description', {
             url: globalStore.config.base_url.replace(/^http:\/\//, ''),

resources/scripts/admin/views/payments/Create.vue

@@ -215,7 +215,7 @@
             <SelectNotePopup type="Payment" @select="onSelectNote" />
           </div>
 
-          <label class="mb-4 text-sm font-medium text-gray-800 dark:text-gray-300">
+          <label class="mb-4 text-sm font-medium text-gray-800">
             {{ $t('estimates.notes') }}
           </label>
 

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

@@ -116,7 +116,7 @@
             </span>
           </template>
           <BaseDropdownItem @click="removeMultiplePayments">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -158,7 +158,7 @@
         <template #cell-payment_number="{ row }">
           <router-link
             :to="{ path: `payments/${row.data.id}/view` }"
-            class="font-medium text-primary-500 dark:text-primary-400"
+            class="font-medium text-primary-500"
           >
             {{ row.data.payment_number }}
           </router-link>

resources/scripts/admin/views/payments/View.vue

@@ -35,7 +35,6 @@
         xl:ml-64
         w-88
         xl:block
-        dark:bg-gray-800
       "
     >
       <div
@@ -47,7 +46,6 @@
           pt-8
           pb-6
           border border-gray-200 border-solid
-          dark:border-gray-600
         "
       >
         <BaseInput
@@ -79,7 +77,6 @@
                 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
-                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -142,7 +139,7 @@
 
       <div
         ref="paymentListSection"
-        class="h-full overflow-y-scroll border-l border-gray-200 border-solid dark:border-gray-600"
+        class="h-full overflow-y-scroll border-l border-gray-200 border-solid"
       >
         <div v-for="(payment, index) in paymentList" :key="index">
           <router-link
@@ -150,9 +147,9 @@
             :id="'payment-' + payment.id"
             :to="`/admin/payments/${payment.id}/view`"
             :class="[
-              'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
+              'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
               {
-                'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
+                'bg-gray-100 border-l-4 border-primary-500 border-solid':
                   hasActiveUrl(payment.id),
               },
             ]"
@@ -172,7 +169,6 @@
                   text-black
                   capitalize
                   truncate
-                  dark:text-white
                 "
               />
 
@@ -185,7 +181,6 @@
                   leading-5
                   text-gray-500
                   capitalize
-                  dark:text-gray-400
                 "
               >
                 {{ payment?.payment_number }}
@@ -216,13 +211,12 @@
                   font-semibold
                   leading-8
                   text-right text-gray-900
-                  dark:text-white
                 "
                 :amount="payment?.amount"
                 :currency="payment.customer?.currency"
               />
 
-              <div class="text-sm text-right text-gray-500 non-italic dark:text-gray-400">
+              <div class="text-sm text-right text-gray-500 non-italic">
                 {{ payment.formatted_payment_date }}
               </div>
             </div>
@@ -233,7 +227,7 @@
         </div>
         <p
           v-if="!paymentList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('payments.no_matching_payments') }}
         </p>

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

@@ -151,12 +151,12 @@
               "
             >
               {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon"/>
+              <BaseIcon name="ChevronDownIcon" class="h-5" />
             </span>
           </template>
 
           <BaseDropdownItem @click="removeMultipleRecurringInvoices()">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -204,7 +204,7 @@
               :text="row.data.customer.name"
               :length="30"
               tag="span"
-              class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
+              class="font-medium text-primary-500 flex flex-col"
             />
 
             <BaseText

resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue

@@ -16,11 +16,11 @@
       </div>
 
       <div class="ml-2">
-        <p class="p-0 mb-1 leading-snug text-left text-black dark:text-white">
+        <p class="p-0 mb-1 leading-snug text-left text-black">
           {{ $t('recurring_invoices.send_automatically') }}
         </p>
         <p
-          class="p-0 m-0 text-xs leading-tight text-left text-gray-500 dark:text-gray-400"
+          class="p-0 m-0 text-xs leading-tight text-left text-gray-500"
           style="max-width: 480px"
         >
           {{ $t('recurring_invoices.send_automatically_desc') }}

resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue

@@ -152,7 +152,6 @@ onSearched = debounce(onSearched, 500)
       xl:ml-64
       w-88
       xl:block
-      dark:bg-gray-800
     "
   >
     <div
@@ -165,7 +164,6 @@ onSearched = debounce(onSearched, 500)
         pb-2
         border border-gray-200 border-solid
         height-full
-        dark:border-gray-600
       "
     >
       <div class="mb-6">
@@ -194,10 +192,9 @@ onSearched = debounce(onSearched, 500)
               px-2
               py-1
               pb-2
-              mb-2
+              mb-1 mb-2
               text-sm
               border-b border-gray-200 border-solid
-              dark:border-gray-600
             "
           >
             {{ $t('general.sort_by') }}
@@ -246,7 +243,6 @@ onSearched = debounce(onSearched, 500)
         overflow-y-scroll
         border-l border-gray-200 border-solid
         base-scroll
-        dark:border-gray-600
       "
     >
       <div v-for="(invoice, index) in invoiceList" :key="index">
@@ -255,9 +251,9 @@ onSearched = debounce(onSearched, 500)
           :id="'recurring-invoice-' + invoice.id"
           :to="`/admin/recurring-invoices/${invoice.id}/view`"
           :class="[
-            'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent dark:hover:bg-gray-700',
+            'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid':
                 hasActiveUrl(invoice.id),
             },
           ]"
@@ -277,7 +273,6 @@ onSearched = debounce(onSearched, 500)
                 text-black
                 capitalize
                 truncate
-                dark:text-white
               "
             />
 
@@ -290,7 +285,6 @@ onSearched = debounce(onSearched, 500)
                 font-medium
                 leading-5
                 text-gray-600
-                dark:text-gray-400
               "
             >
               {{ invoice.invoice_number }}
@@ -313,7 +307,6 @@ onSearched = debounce(onSearched, 500)
                 font-semibold
                 leading-8
                 text-right text-gray-900
-                dark:text-white
               "
               :amount="invoice.total"
               :currency="invoice.customer.currency"
@@ -327,7 +320,6 @@ onSearched = debounce(onSearched, 500)
                 leading-5
                 text-right text-gray-600
                 est-date
-                dark:text-gray-400
               "
             >
               {{ invoice.formatted_starts_at }}
@@ -340,7 +332,7 @@ onSearched = debounce(onSearched, 500)
       </div>
       <p
         v-if="!invoiceList?.length && !isLoading"
-        class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
+        class="flex justify-center px-4 mt-5 text-sm text-gray-600"
       >
         {{ $t('invoices.no_matching_invoices') }}
       </p>

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

@@ -27,7 +27,7 @@
     >
       <template #cell-name="{ row }">
         {{ row.data.name }}
-        <span class="text-xs text-gray-500 dark:text-gray-400"> ({{ row.data.slug }})</span>
+        <span class="text-xs text-gray-500"> ({{ row.data.slug }})</span>
       </template>
 
       <template #cell-is_required="{ row }">
@@ -60,7 +60,7 @@
         <CustomFieldDropdown
           :row="row.data"
           :table="table"
-          :load-data="refreshTable" 
+          :load-data="refreshTable"
         />
       </template>
     </BaseTable>

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

@@ -4,14 +4,23 @@
     :description="$t('settings.update_app.description')"
   >
     <div class="pb-8 ml-0">
-      <label
+      <label class="text-sm not-italic font-medium input-label">
-        class="text-sm not-italic font-medium input-label dark:text-gray-300"
-      >
         {{ $t('settings.update_app.current_version') }}
       </label>
 
       <div
-        class="box-border flex w-16 p-3 my-2 text-sm text-gray-600 bg-gray-200 border border-gray-200 border-solid dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500 rounded-md version"
+        class="
+          box-border
+          flex
+          w-16
+          p-3
+          my-2
+          text-sm text-gray-600
+          bg-gray-200
+          border border-gray-200 border-solid
+          rounded-md
+          version
+        "
       >
         {{ currentVersion }}
       </div>
@@ -33,20 +42,20 @@
           {{ $t('settings.update_app.avail_update') }}
         </BaseHeading>
 
-        <div class="rounded-md bg-primary-50 p-4 mb-3 dark:bg-gray-600">
+        <div class="rounded-md bg-primary-50 p-4 mb-3">
           <div class="flex">
             <div class="shrink-0">
               <BaseIcon
                 name="InformationCircleIcon"
-                class="h-5 w-5 text-primary-400 dark:text-primary-300"
+                class="h-5 w-5 text-primary-400"
                 aria-hidden="true"
               />
             </div>
             <div class="ml-3">
-              <h3 class="text-sm font-medium text-primary-800 dark:text-primary-300">
+              <h3 class="text-sm font-medium text-primary-800">
                 {{ $t('general.note') }}
               </h3>
-              <div class="mt-2 text-sm text-primary-700 dark:text-primary-400">
+              <div class="mt-2 text-sm text-primary-700">
                 <p>
                   {{ $t('settings.update_app.update_warning') }}
                 </p>
@@ -66,20 +75,26 @@
             w-16
             p-3
             my-2
-            text-sm
+            text-sm text-gray-600
-            text-gray-600 bg-gray-200
+            bg-gray-200
             border border-gray-200 border-solid
             rounded-md
             version
-            dark:bg-gray-600 dark:text-gray-200
-            dark:border-gray-500
           "
         >
           {{ updateData.version }}
         </div>
 
         <div
-          class="pl-5 mt-4 mb-8 text-sm leading-snug text-gray-500 update-description"
+          class="
+            pl-5
+            mt-4
+            mb-8
+            text-sm
+            leading-snug
+            text-gray-500
+            update-description
+          "
           style="white-space: pre-wrap; max-width: 480px"
           v-html="description"
         ></div>
@@ -92,7 +107,7 @@
           <tr
             v-for="(ext, i) in requiredExtentions"
             :key="i"
-            class="p-2 border-2 border-gray-200 dark:border-gray-600"
+            class="p-2 border-2 border-gray-200"
           >
             <td width="70%" class="p-2 text-sm truncate">
               {{ i }}
@@ -121,7 +136,7 @@
             {{ $t('settings.update_app.update_progress') }}
           </h6>
           <p
-            class="mb-8 text-sm leading-snug text-gray-500 dark:text-gray-400"
+            class="mb-8 text-sm leading-snug text-gray-500"
             style="max-width: 480px"
           >
             {{ $t('settings.update_app.progress_text') }}
@@ -135,11 +150,18 @@
         <li
           v-for="step in updateSteps"
           :key="step.stepUrl"
-          class="flex justify-between w-full py-3 border-b border-gray-200 dark:border-gray-600 border-solid last:border-b-0"
+          class="
+            flex
+            justify-between
+            w-full
+            py-3
+            border-b border-gray-200 border-solid
+            last:border-b-0
+          "
         >
-          <p class="m-0 text-sm dark:text-gray-300 leading-8">{{ $t(step.translationKey) }}</p>
+          <p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
           <div class="flex flex-row items-center">
-            <span v-if="step.time" class="mr-3 text-xs text-gray-500 dark:text-gray-300">
+            <span v-if="step.time" class="mr-3 text-xs text-gray-500">
               {{ step.time }}
             </span>
             <span
@@ -275,7 +297,7 @@ function statusClass(step) {
     case 'running':
       return 'text-blue-400 bg-blue-100'
     case 'error':
-      return 'text-red-400 bg-red-200'
+      return 'text-danger bg-red-200'
     default:
       return ''
   }

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/admin/views/settings/mail-driver/MailgunMailDriver.vue

@@ -51,12 +51,27 @@
         <BaseInput
           v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_secret"
           :content-loading="isFetchingInitialData"
-          type="password"
+          :type="getInputType"
           name="mailgun_secret"
           autocomplete="off"
           :invalid="v$.mailgunConfig.mail_mailgun_secret.$error"
           @input="v$.mailgunConfig.mail_mailgun_secret.$touch()"
-        />
+        >
+          <template #right>
+            <BaseIcon
+              v-if="isShowPassword"
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeOffIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+            <BaseIcon
+              v-else
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+          </template>
+        </BaseInput>
       </BaseInputGroup>
 
       <BaseInputGroup
@@ -169,6 +184,15 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()
 
+let isShowPassword = ref(false)
+
+const getInputType = computed(() => {
+  if (isShowPassword.value) {
+    return 'text'
+  }
+  return 'password'
+})
+
 const rules = computed(() => {
   return {
     mailgunConfig: {

resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue

@@ -146,12 +146,27 @@
         <BaseInput
           v-model.trim="mailDriverStore.sesConfig.mail_ses_secret"
           :content-loading="isFetchingInitialData"
-          type="password"
+          :type="getInputType"
           name="mail_ses_secret"
           autocomplete="off"
           :invalid="v$.sesConfig.mail_ses_secret.$error"
           @input="v$.sesConfig.mail_ses_secret.$touch()"
-        />
+        >
+          <template #right>
+            <BaseIcon
+              v-if="isShowPassword"
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeOffIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+            <BaseIcon
+              v-else
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+          </template>
+        </BaseInput>
       </BaseInputGroup>
     </BaseInputGrid>
 
@@ -208,6 +223,7 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()
 
+let isShowPassword = ref(false)
 const encryptions = reactive(['tls', 'ssl', 'starttls'])
 
 const rules = computed(() => {
@@ -248,6 +264,13 @@ const v$ = useVuelidate(
   computed(() => mailDriverStore)
 )
 
+const getInputType = computed(() => {
+  if (isShowPassword.value) {
+    return 'text'
+  }
+  return 'password'
+})
+
 onMounted(() => {
   for (const key in mailDriverStore.sesConfig) {
     if (props.configData.hasOwnProperty(key)) {

resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue

@@ -58,9 +58,24 @@
         <BaseInput
           v-model.trim="mailDriverStore.smtpConfig.mail_password"
           :content-loading="isFetchingInitialData"
-          type="password"
+          :type="getInputType"
           name="password"
-        />
+        >
+          <template #right>
+            <BaseIcon
+              v-if="isShowPassword"
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeOffIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+            <BaseIcon
+              v-else
+              class="mr-1 text-gray-500 cursor-pointer"
+              name="EyeIcon"
+              @click="isShowPassword = !isShowPassword"
+            />
+          </template>
+        </BaseInput>
       </BaseInputGroup>
 
       <BaseInputGroup
@@ -194,8 +209,17 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()
+
+let isShowPassword = ref(false)
 const encryptions = reactive(['tls', 'ssl', 'starttls'])
 
+const getInputType = computed(() => {
+  if (isShowPassword.value) {
+    return 'text'
+  }
+  return 'password'
+})
+
 const rules = computed(() => {
   return {
     smtpConfig: {

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

@@ -118,11 +118,11 @@
               "
             >
               {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon"/>
+              <BaseIcon name="ChevronDownIcon" class="h-5" />
             </span>
           </template>
           <BaseDropdownItem @click="removeMultipleUsers">
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
             {{ $t('general.delete') }}
           </BaseDropdownItem>
         </BaseDropdown>
@@ -158,7 +158,7 @@
         <template #cell-name="{ row }">
           <router-link
             :to="{ path: `users/${row.data.id}/edit` }"
-            class="font-medium text-primary-500 dark:text-primary-400"
+            class="font-medium text-primary-500"
           >
             {{ row.data.name }}
           </router-link>

resources/scripts/components/GlobalSearchBar.vue

@@ -93,7 +93,6 @@
                     rounded-full
                     text-primary-500
                     dark:bg-gray-600
-                    dark:text-primary-400
                   "
                 >
                   {{ initGenerator(customer.name) }}
@@ -142,7 +141,6 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
-                    dark:text-primary-400
                     dark:bg-gray-600
                   "
                 >

resources/scripts/components/LightDarkButton.vue

@@ -1,41 +0,0 @@
-<template>
-   <button
-    type="button"
-    class="
-      flex
-      h-8
-      w-8
-      items-center
-      justify-center
-      rounded-md
-      transition
-      hover:bg-zinc-900/5
-      dark:hover:bg-white/5
-    "
-    @click="onChange"
-  >
-  <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-yellow-500" name="SunIcon" />
-    <BaseIcon v-else class="h-5 w-5 text-white" name="MoonIcon" />
-  </button>
-</template>
-<script setup>
-import { computed } from 'vue'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-
-const globalStore = useGlobalStore()
-
-function onChange() {
-  globalStore.isDarkModeOn = !globalStore.isDarkModeOn
-
-  if (globalStore.isDarkModeOn) {
-    localStorage.theme = 'dark'
-    document.documentElement.classList.add('dark')
-    document.documentElement.style.setProperty('color-scheme', 'dark')
-  } else {
-    localStorage.theme = 'light'
-    document.documentElement.classList.remove('dark')
-    document.documentElement.style.setProperty('color-scheme', 'light')
-  }
-}
-</script>
-

resources/scripts/components/LightDarkSwitcher.vue

@@ -16,21 +16,26 @@ defineProps({
 
 const globalStore = useGlobalStore()
 
-const enabled = computed({
+const enabled = ref(
-  get: () => globalStore.isDarkModeOn,
+  localStorage.getItem('theme') === 'dark' ||
-  set: (value) => {
+    document.documentElement.classList.contains('dark')
-    if (value) {
+)
-      localStorage.theme = 'dark'
+
-      document.documentElement.classList.add('dark')
+globalStore.isDarkModeOn = enabled
-      document.documentElement.style.setProperty('color-scheme', 'dark')
+
-    } else {
+function onChange(val) {
-      localStorage.theme = 'light'
+  if (val) {
-      document.documentElement.classList.remove('dark')
+    localStorage.theme = 'dark'
-      document.documentElement.style.setProperty('color-scheme', 'light')
+    document.documentElement.classList.add('dark')
-    }
+    document.documentElement.style.setProperty('color-scheme', 'dark')
-    globalStore.isDarkModeOn = value
+    globalStore.isDarkModeOn = true
-  },
+  } else {
-})
+    localStorage.theme = 'light'
+    document.documentElement.classList.remove('dark')
+    document.documentElement.style.setProperty('color-scheme', 'light')
+    globalStore.isDarkModeOn = false
+  }
+}
 </script>
 
 <template>
@@ -44,6 +49,7 @@ const enabled = computed({
         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

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

@@ -439,7 +439,7 @@ export 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',
         containerDisabled:
-          'bg-gray-200 !text-gray-800 dark:!text-gray-800 !dark:text-gray-500 !cursor-not-allowed dark:opacity-50',
+          'bg-gray-200 bg-opacity-50 !text-gray-400 dark:!text-gray-800 !dark:text-gray-500 !cursor-default dark:opacity-25',
         containerOpen: '',
         containerOpenTop: '',
         containerActive: 'ring-1 ring-primary-400 border-primary-400',

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

@@ -28,7 +28,6 @@
       :attributes="attrs"
       :model-config="config"
       :masks="masks"
-      :is-dark="isDarkModeOn"
       :locale="global.locale"
     >
       <template
@@ -73,7 +72,7 @@
 
       <template v-if="showExtraOptions" #footer>
         <div
-          class="bg-gray-100 dark:bg-gray-800 grid grid-cols-3 gap-2 p-2 border-t dark:border-gray-500 rounded-b-lg"
+          class="bg-gray-100 grid grid-cols-3 gap-2 p-2 border-t rounded-b-lg"
         >
           <button type="button" class="extra-button" @click="moveToDate(sourceDate)">
             {{ global.t('date_picker.same_day') }}
@@ -147,7 +146,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'border-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
+      'border-2 font-base pl-8 py-2 outline-none focus:ring-primary-400 focus:outline-none focus:border-primary-400 block w-full sm:text-sm border-gray-200 rounded-md text-black',
   },
   time24hr: {
     type: Boolean,
@@ -164,7 +163,7 @@ const props = defineProps({
   sourceDate: {
     type: [String, Date],
     default: () => new Date(),
-  },
+  }
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -176,9 +175,6 @@ const vCalendar = ref(null)
 const hasIconSlot = computed(() => {
   return !!slots.icon
 })
-const isDarkModeOn = computed(() =>
-  document.documentElement.classList.contains('dark')
-)
 
 const computedContainerClass = computed(() => {
   let containerClass = `${props.containerClass} `

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

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

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/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

@@ -90,7 +90,7 @@
 
     <input
       v-bind="$attrs"
-      :type="getType"
+      :type="type"
       :value="modelValue"
       :disabled="disabled"
       :class="[
@@ -144,44 +144,6 @@
     >
       <slot name="right" :class="iconRightClass" />
     </div>
-    <div
-      v-if="loading && loadingPosition === 'right'" class="
-        absolute
-        inset-y-0
-        right-0
-        flex
-        items-center
-        pr-3
-        pointer-events-none
-      "
-    >
-      <svg
-        class="animate-spin !text-primary-500" :class="[iconRightClass]" xmlns="http://www.w3.org/2000/svg"
-        fill="none" viewBox="0 0 24 24"
-      >
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-        <path
-          class="opacity-75" fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        />
-      </svg>
-    </div>
-
-    <div v-if="hasRightIconSlot" class="absolute inset-y-0 right-0 flex items-center pr-3">
-      <slot name="right" :class="iconRightClass" />
-    </div>
-
-    <div v-if="type == 'password'" class="absolute inset-y-0 right-0 flex items-center pr-3">
-      <a
-        v-if="isShowPassword" href="#" class="block" data-cy="eye" tabindex="-1"
-        @click.prevent="isShowPassword = !isShowPassword"
-      >
-        <BaseIcon name="EyeOffIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
-      </a>
-      <a v-else href="#" class="block" data-cy="eye" tabindex="-1" @click.prevent="isShowPassword = !isShowPassword">
-        <BaseIcon name="EyeIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
-      </a>
-    </div>
   </div>
 </template>
 
@@ -257,15 +219,6 @@ const slots = useSlots()
 
 const emit = defineEmits(['update:modelValue'])
 
-const isShowPassword = ref(false)
-
-const getType = computed(() => {
-  if (props.type === 'password')
-    return isShowPassword.value ? 'text' : 'password'
-
-  return props.type
-})
-
 const hasLeftIconSlot = computed(() => {
   return !!slots.left || (props.loading && props.loadingPosition === 'left')
 })

resources/scripts/components/base/BaseInputGroup.vue

@@ -15,7 +15,6 @@
         text-gray-800
         whitespace-nowrap
         justify-between
-        dark:text-gray-300
       "
     >
       <div>
@@ -32,7 +31,7 @@
     </label>
     <div :class="inputContainerClasses">
       <slot></slot>
-      <span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light dark:text-gray-400">
+      <span v-if="helpText" class="text-gray-500 text-xs mt-1 font-light">
         {{ helpText }}
       </span>
       <span v-if="error" class="block mt-0.5 text-sm text-red-500">

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

@@ -1,5 +1,5 @@
 <template>
-  <label class="text-sm not-italic font-medium leading-5 text-gray-500 dark:text-gray-300">
+  <label class="text-sm not-italic font-medium leading-5 text-primary-800">
     <slot />
   </label>
 </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/BaseRadio.vue

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

resources/scripts/components/base/BaseSelectAction.vue

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

resources/scripts/components/base/BaseSelectInput.vue

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

resources/scripts/components/base/BaseSettingCard.vue

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

resources/scripts/components/base/BaseTextarea.vue

@@ -45,7 +45,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 dark:border-gray-600 border-solid rounded outline-none  dark:bg-gray-700 dark:text-white',
+      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-black placeholder-gray-400 bg-white border border-gray-200 border-solid rounded outline-none',
   },
   autosize: {
     type: Boolean,

resources/scripts/components/base/BaseWizardNavigation.vue

@@ -1,7 +1,16 @@
 <template>
   <div
     :class="containerClass"
-    class="relative after:bg-gray-200 dark:after:bg-gray-700 after:absolute after:transform after:top-1/2 after:-translate-y-1/2 after:h-2 after:w-full"
+    class="
+      relative
+      after:bg-gray-200
+      after:absolute
+      after:transform
+      after:top-1/2
+      after:-translate-y-1/2
+      after:h-2
+      after:w-full
+    "
   >
     <a
       v-for="(number, index) in steps"
@@ -49,21 +58,21 @@ export default {
     },
     currentStepClass: {
       type: String,
-      default: 'bg-white border-primary-500 dark:bg-gray-600 dark:border-gray-500 dark:border-primary-600',
+      default: 'bg-white border-primary-500',
     },
     nextStepClass: {
       type: String,
-      default: 'border-gray-200 bg-white dark:bg-gray-600 dark:border-gray-500',
+      default: 'border-gray-200 bg-white',
     },
     previousStepClass: {
       type: String,
       default:
-        'bg-primary-500 dark:bg-primary-600 border-primary-500 flex justify-center items-center dark:border-primary-600',
+        'bg-primary-500 border-primary-500 flex justify-center items-center',
     },
     iconClass: {
       type: String,
       default:
-        'flex items-center justify-center w-full h-full text-sm font-black text-center text-white dark:text-gray-400',
+        'flex items-center justify-center w-full h-full text-sm font-black text-center text-white',
     },
   },
 

resources/scripts/components/base/BaseWizardStep.vue

@@ -9,7 +9,6 @@
       </p>
     </div>
     <slot />
-    <BaseDarkHighlight class="z-[-1]"/>
   </div>
 </template>
 
@@ -26,16 +25,16 @@ const props = defineProps({
   stepContainerClass: {
     type: String,
     default:
-      'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded dark:from-gray-700/70 dark:to-gray-800/70 dark:bg-transparent dark:backdrop-blur-xl dark:shadow-glass dark:border dark:border-white/10',
+      'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded',
   },
   stepTitleClass: {
     type: String,
-    default: 'text-2xl not-italic font-semibold leading-7 text-black dark:text-white',
+    default: 'text-2xl not-italic font-semibold leading-7 text-black',
   },
   stepDescriptionClass: {
     type: String,
     default:
-      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 dark:text-gray-300 lg:w-7/12 md:w-7/12 sm:w-7/12',
+      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 lg:w-7/12 md:w-7/12 sm:w-7/12',
   },
 })
 </script>

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

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

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

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

resources/scripts/components/notifications/NotificationItem.vue

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

resources/scripts/components/svg/LoginBottomVector.vue

@@ -3,7 +3,6 @@
     <path
       d="M690 4.08004C518 -9.91998 231 4.08004 -6 176.361L231 197.08L1170 219.08C1113.33 175.747 909.275 21.928 690 4.08004Z"
       fill="white"
-      class="dark:fill-gray-900"
       fill-opacity="0.1"
     />
   </svg>

resources/scripts/customer/layouts/LayoutBasic.vue

@@ -6,7 +6,7 @@
 
     <!-- <SiteSidebar /> -->
 
-    <main class="h-screen min-h-0 pb-16 mt-16 overflow-y-auto">
+    <main class="mt-16 pb-16 h-screen overflow-y-auto min-h-0">
       <router-view />
     </main>
   </div>

resources/scripts/customer/layouts/LayoutLogin.vue

@@ -1,24 +1,31 @@
 <template>
   <div
-    class="flex flex-col justify-center h-full min-h-screen py-12 overflow-hidden bg-gray-100 sm:px-6 lg:px-8 dark:bg-gray-800/80 dark:text-white font-base "
+    class="
+      min-h-screen
+      bg-gray-200
+      flex flex-col
+      justify-center
+      py-12
+      sm:px-6
+      lg:px-8
+    "
   >
     <NotificationRoot />
 
-    <div class="px-4 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
+    <div class="sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
       <MainLogo
         v-if="!customerLogo"
-        class="block w-48 h-auto max-w-full mx-auto text-primary-400"
+        class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
       />
       <img
         v-else
         :src="customerLogo"
-        class="block w-48 h-auto max-w-full mx-auto text-primary-400"
+        class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
       />
     </div>
 
-    <div class="px-4 mt-8 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
+    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
-      <div class="px-4 py-8 bg-white rounded-lg shadow sm:px-10 dark:from-gray-700/70 dark:to-gray-800/70 dark:bg-transparent dark:backdrop-blur-xl dark:shadow-glass dark:border dark:border-white/10">
+      <div class="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
-      <BaseDarkHighlight/>
         <router-view />
       </div>
     </div>

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

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

resources/scripts/customer/stores/global.js

@@ -13,8 +13,7 @@ export const useGlobalStore = defineStore({
     currentUser: null,
     companySlug: '',
     mainMenu: null,
-    enabledModules: [],
+    enabledModules: []
-    isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark')
   }),
 
   actions: {

resources/scripts/customer/views/auth/ForgotPassword.vue

@@ -31,7 +31,7 @@
     <div class="mt-4 mb-4 text-sm">
       <router-link
         to="login"
-        class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
+        class="text-sm text-primary-400 hover:text-gray-700"
       >
         {{ $t('general.back_to_login') }}
       </router-link>

resources/scripts/customer/views/auth/Login.vue

@@ -32,15 +32,30 @@
     >
       <BaseInput
         v-model="authStore.loginData.password"
+        :type="getInputType"
         :invalid="v$.loginData.password.$error"
-        type="password"
         @input="v$.loginData.password.$touch()"
-      />
+      >
+        <template #right>
+          <BaseIcon
+            v-if="isShowPassword"
+            name="EyeOffIcon"
+            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
+            @click="isShowPassword = !isShowPassword"
+          />
+          <BaseIcon
+            v-else
+            name="EyeIcon"
+            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
+            @click="isShowPassword = !isShowPassword"
+          />
+        </template>
+      </BaseInput>
     </BaseInputGroup>
     <div class="flex items-center justify-between">
       <router-link
         :to="{ name: 'customer.forgot-password' }"
-        class="text-sm text-primary-400 hover:text-gray-500 dark:hover:text-primary-500"
+        class="text-sm text-primary-600 hover:text-gray-500"
       >
         {{ $t('login.forgot_password') }}
       </router-link>
@@ -76,6 +91,14 @@ const authStore = useAuthStore()
 const { t } = useI18n()
 
 let isLoading = ref(false)
+const isShowPassword = ref(false)
+
+const getInputType = computed(() => {
+  if (isShowPassword.value) {
+    return 'text'
+  }
+  return 'password'
+})
 
 const rules = computed(() => {
   return {

resources/scripts/customer/views/auth/ResetPassword.vue

@@ -23,11 +23,23 @@
     >
       <BaseInput
         v-model="loginData.password"
-        type="password"
+        :type="isShowPassword ? 'text' : 'password'"
         name="password"
         :invalid="v$.password.$error"
         @input="v$.password.$touch()"
-      />
+      >
+        <template #right>
+          <EyeOffIcon
+            v-if="isShowPassword"
+            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
+            @click="isShowPassword = !isShowPassword"
+          />
+          <EyeIcon
+            v-else
+            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
+            @click="isShowPassword = !isShowPassword"
+          /> </template
+      ></BaseInput>
     </BaseInputGroup>
 
     <BaseInputGroup
@@ -81,6 +93,7 @@ const loginData = reactive({
 
 const globalStore = useGlobalStore()
 
+let isShowPassword = ref(false)
 let isLoading = ref(false)
 
 const rules = computed(() => {

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

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

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