Add dark mode in BaseEmptyPlaceholder

resources/scripts/components/GlobalSearchBar.vue

@@ -41,11 +41,6 @@
           w-[300px]
           h-[200px]
           right-0
-          dark:border-white/10
-          dark:text-white
-          dark:bg-gray-800/[.95]
-          dark:shadow-glass
-          dark:backdrop-blur-xl
         "
       >
         <div
@@ -73,7 +68,7 @@
             <div
               v-for="(customer, index) in usersStore.customerList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
             >
               <router-link
                 :to="{ path: `/admin/customers/${customer.id}/view` }"
@@ -92,7 +87,6 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
-                    dark:bg-gray-600
                   "
                 >
                   {{ initGenerator(customer.name) }}
@@ -122,7 +116,7 @@
             <div
               v-for="(user, index) in usersStore.userList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
             >
               <router-link
                 :to="{ path: `/admin/users/${user.id}/edit` }"
@@ -141,7 +135,6 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
-                    dark:bg-gray-600
                   "
                 >
                   {{ initGenerator(user.name) }}

resources/scripts/components/base/BaseEmptyPlaceholder.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="flex flex-col items-center justify-center mt-16">
+    <div class="relative">
+      <BaseDarkHighlight class="bg-highlight/[.07] top-2" />
+
+      <div class="relative z-5 flex flex-col items-center">
         <div class="flex flex-col items-center justify-center">
-      <slot></slot>
+          <slot />
         </div>
         <div class="mt-2">
           <label class="font-medium">{{ title }}</label>
         </div>
-    <div class="mt-2">
-      <label class="text-gray-500">
+        <div class="mt-2 text-center md:text-left">
+          <label class="text-gray-500 dark:text-gray-400">
             {{ description }}
           </label>
         </div>
@@ -15,6 +19,8 @@
           <slot name="actions" />
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <script setup>