fix: Adds background color for skelton loader in dark mode (#9211)

chatwoot · Apr 9, 2024 · 12c5739 · 12c5739
1 parent 78724f7
commit 12c5739
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -1,20 +1,20 @@
 <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
         v-tooltip.right="toolTip"
         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
@@ -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>