Add dark mode in BaseErrorAlert

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,11 +1,18 @@
 <template>
-  <div class="rounded-md bg-red-50 p-4">
+  <div
+    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" aria-hidden="true" />
+        <XCircleIcon class="h-5 w-5 text-red-400 dark:text-red-500" aria-hidden="true" />
       </div>
       <div class="ml-3">
-        <h3 class="text-sm font-medium text-red-800">
+        <h3 class="text-sm font-medium text-red-800 dark:text-red-500">
           {{ errorTitle }}
         </h3>
         <div class="mt-2 text-sm text-red-700">