feat: Support Dark mode for the widget (#4137)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese 2022-04-01 20:59:03 +05:30 committed by GitHub
parent 3813b3b372
commit caee9535f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 411 additions and 113 deletions

View file

@ -1,8 +1,15 @@
<template>
<header class="flex justify-between p-5 w-full">
<header
class="flex justify-between p-5 w-full"
:class="$dm('bg-white', 'dark:bg-slate-900')"
>
<div class="flex items-center">
<button v-if="showBackButton" @click="onBackButtonClick">
<fluent-icon icon="chevron-left" size="24" />
<fluent-icon
icon="chevron-left"
size="24"
:class="$dm('text-black-900', 'dark:text-slate-50')"
/>
</button>
<img
v-if="avatarUrl"
@ -11,7 +18,10 @@
alt="avatar"
/>
<div>
<div class="text-black-900 font-medium text-base flex items-center">
<div
class="font-medium text-base flex items-center"
:class="$dm('text-black-900', 'dark:text-slate-50')"
>
<span class="mr-1" v-html="title" />
<div
:class="
@ -20,7 +30,10 @@
"
/>
</div>
<div class="text-xs mt-1 text-black-700">
<div
class="text-xs mt-1"
:class="$dm('text-black-700', 'dark:text-slate-400')"
>
{{ replyWaitMessage }}
</div>
</div>
@ -36,6 +49,7 @@ import availabilityMixin from 'widget/mixins/availability';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
import HeaderActions from './HeaderActions';
import routerMixin from 'widget/mixins/routerMixin';
import darkMixin from 'widget/mixins/darkModeMixin.js';
export default {
name: 'ChatHeader',
@ -43,7 +57,7 @@ export default {
FluentIcon,
HeaderActions,
},
mixins: [availabilityMixin, routerMixin],
mixins: [availabilityMixin, routerMixin, darkMixin],
props: {
avatarUrl: {
type: String,
@ -67,7 +81,9 @@ export default {
},
},
computed: {
...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
...mapGetters({
widgetColor: 'appConfig/getWidgetColor',
}),
isOnline() {
const { workingHoursEnabled } = this.channelConfig;
const anyAgentOnline = this.availableAgents.length > 0;