LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sivin Varghese
2024-04-09 08:58:56 +05:30
committed by GitHub
parent 78724f7459
commit 12c5739287
2 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]"> <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
<span <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 }} {{ label }}
<fluent-icon <fluent-icon
@@ -9,12 +9,12 @@
size="14" size="14"
icon="information" icon="information"
type="outline" 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> </span>
<div <div
v-if="isLoading" 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"> <span v-else class="text-2xl font-medium text-slate-900 dark:text-slate-25">

20
app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
View File

@@ -4,14 +4,22 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
<template> <template>
<base-settings-list-item class="opacity-50"> <base-settings-list-item class="opacity-50">
<template #title> <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>
<template #description> <template #description>
<div class="w-64 h-4 mb-0.5 rounded-md bg-slate-50 animate-pulse" /> <div
<div class="w-48 h-4 rounded-md bg-slate-50 animate-pulse" /> 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>
<template #label> <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>
<template #rightSection> <template #rightSection>
<div <div
@@ -22,7 +30,9 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
:key="ii" :key="ii"
class="flex justify-end w-1/3 h-full px-4" 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>
</div> </div>
</template> </template>