Add dark mode in BaseEmptyPlaceholder

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>
-  <hr class="w-full text-gray-300 dark:bg-gray-600" />
+  <hr class="w-full text-gray-300" />
 </template>

resources/scripts/components/base/BaseEmptyPlaceholder.vue

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