feat: Support Dark mode for the widget (#4137)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
parent
3813b3b372
commit
caee9535f1
36 changed files with 411 additions and 113 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue