From 238cdb3c254101c3a5c85c3bd6c517b02a7891fa Mon Sep 17 00:00:00 2001
From: Yash Kanakiya <76934250+yashkanakiya@users.noreply.github.com>
Date: Tue, 28 Mar 2023 18:25:45 +0530
Subject: [PATCH] Add dark mode in BaseEmptyPlaceholder (#1193)

---
 .../components/base/BaseEmptyPlaceholder.vue  | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/resources/scripts/components/base/BaseEmptyPlaceholder.vue b/resources/scripts/components/base/BaseEmptyPlaceholder.vue
index c89265d6..37a7832c 100644
--- a/resources/scripts/components/base/BaseEmptyPlaceholder.vue
+++ b/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">
-      <slot></slot>
-    </div>
-    <div class="mt-2">
-      <label class="font-medium">{{ title }}</label>
-    </div>
-    <div class="mt-2">
-      <label class="text-gray-500">
-        {{ description }}
-      </label>
-    </div>
-    <div class="mt-6">
-      <slot name="actions" />
+    <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 />
+        </div>
+        <div class="mt-2">
+          <label class="font-medium">{{ title }}</label>
+        </div>
+        <div class="mt-2 text-center md:text-left">
+          <label class="text-gray-500 dark:text-gray-400">
+            {{ description }}
+          </label>
+        </div>
+        <div class="mt-6">
+          <slot name="actions" />
+        </div>
+      </div>
     </div>
   </div>
 </template>