Add dark mode in BaseEmptyPlaceholder

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>

resources/scripts/components/notifications/NotificationItem.vue

@@ -1,8 +1,6 @@
 <template>
   <div
-    :class="success || info
-      ? '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="success || info ? 'bg-white' : 'bg-red-50'"
     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
-                  ? 'text-gray-900 dark:text-white'
-                  : 'text-red-800 dark:text-white'
+                success || info ? 'text-gray-900' : 'text-red-800'
               }`"
             >
               {{
@@ -79,9 +75,7 @@
             </p>
             <p
               :class="`mt-1 text-sm leading-5 ${
-                success || info
-                  ? 'text-gray-500 dark:text-gray-400'
-                  : 'text-red-700 dark:text-red-200'
+                success || info ? 'text-gray-500' : 'text-red-700'
               }`"
             >
               {{
@@ -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