chore: Replace darkmode mixin with useDarkMode composable [CW-3474] (#9949)

# Pull Request Template

## Description

Replaces darkModeMixin with the new useDarkMode composable and replaces
wll usages of mixin the the composable in components and pages

Fixes
https://linear.app/chatwoot/issue/CW-3474/rewrite-darkmodemixin-mixin-to-a-composable

## Type of change

Please delete options that are not relevant.

- [x] New feature (non-breaking change which adds functionality)

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Fayaz Ahmed
2024-09-12 00:29:41 +05:30
committed by GitHub
parent 2c17c95eab
commit a76cd7684a
27 changed files with 357 additions and 207 deletions

View File

@@ -6,7 +6,7 @@ import ChatOptions from 'shared/components/ChatOptions.vue';
import ChatArticle from './template/Article.vue';
import EmailInput from './template/EmailInput.vue';
import CustomerSatisfaction from 'shared/components/CustomerSatisfaction.vue';
import darkModeMixin from 'widget/mixins/darkModeMixin.js';
import { useDarkMode } from 'widget/composables/useDarkMode';
import IntegrationCard from './template/IntegrationCard.vue';
export default {
@@ -20,7 +20,6 @@ export default {
CustomerSatisfaction,
IntegrationCard,
},
mixins: [darkModeMixin],
props: {
message: { type: String, default: null },
contentType: { type: String, default: null },
@@ -34,11 +33,13 @@ export default {
setup() {
const { formatMessage, getPlainText, truncateMessage, highlightContent } =
useMessageFormatter();
const { getThemeClass } = useDarkMode();
return {
formatMessage,
getPlainText,
truncateMessage,
highlightContent,
getThemeClass,
};
},
computed: {
@@ -98,7 +99,7 @@ export default {
!isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
"
class="chat-bubble agent"
:class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
:class="getThemeClass('bg-white', 'dark:bg-slate-700 has-dark-mode')"
>
<div
v-dompurify-html="formatMessage(message, false)"