From 12c57392878a52442e5f981d6301e2d943d53eb1 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 9 Apr 2024 08:58:56 +0530
Subject: [PATCH] fix: Adds background color for skelton loader in dark mode
 (#9211)

---
 .../reports/components/SLA/SLAMetricCard.vue  |  6 +++---
 .../sla/components/SLAListItemLoading.vue     | 20 ++++++++++++++-----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
index 78e068d6c..634325393 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
     <span
-      class="inline-flex items-center gap-1 text-sm text-slate-700 dark:text-slate-200 font-medium"
+      class="inline-flex items-center gap-1 text-sm font-medium text-slate-700 dark:text-slate-200"
     >
       {{ label }}
       <fluent-icon
@@ -9,12 +9,12 @@
         size="14"
         icon="information"
         type="outline"
-        class="flex-shrink-0 text-sm font-normal flex sm:font-medium text-slate-500 dark:text-slate-500"
+        class="flex flex-shrink-0 text-sm font-normal sm:font-medium text-slate-500 dark:text-slate-500"
       />
     </span>
     <div
       v-if="isLoading"
-      class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 animate-pulse"
+      class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-800 animate-pulse"
     />
 
     <span v-else class="text-2xl font-medium text-slate-900 dark:text-slate-25">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
index 7521ef9f5..9041d6a2d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
@@ -4,14 +4,22 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
 <template>
   <base-settings-list-item class="opacity-50">
     <template #title>
-      <div class="w-24 h-[26px] rounded-md bg-slate-50 animate-pulse" />
+      <div
+        class="w-24 h-[26px] rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+      />
     </template>
     <template #description>
-      <div class="w-64 h-4 mb-0.5 rounded-md bg-slate-50 animate-pulse" />
-      <div class="w-48 h-4 rounded-md bg-slate-50 animate-pulse" />
+      <div
+        class="w-64 h-4 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+      />
+      <div
+        class="w-48 h-4 rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+      />
     </template>
     <template #label>
-      <div class="w-32 h-[26px] bg-slate-50 animate-pulse rounded-md" />
+      <div
+        class="w-32 h-[26px] bg-slate-50 dark:bg-slate-700 animate-pulse rounded-md"
+      />
     </template>
     <template #rightSection>
       <div
@@ -22,7 +30,9 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
           :key="ii"
           class="flex justify-end w-1/3 h-full px-4"
         >
-          <div class="w-32 h-full rounded-md bg-slate-50 animate-pulse" />
+          <div
+            class="w-32 h-full rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+          />
         </div>
       </div>
     </template>