From e1190fd9bf171a3e95215bacb9bbeb217d7b4a1a Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 2 Nov 2022 05:52:00 +0530
Subject: [PATCH] fix: Text colour is getting merged with the light background
 colour (#5773)

---
 app/javascript/shared/components/CardButton.vue        | 10 +++++++++-
 app/javascript/shared/components/ChatForm.vue          | 10 +++++++++-
 .../shared/components/CustomerSatisfaction.vue         | 10 +++++++++-
 app/javascript/widget/components/UserMessageBubble.vue |  8 +++++++-
 .../widget/components/template/EmailInput.vue          | 10 +++++++++-
 5 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/app/javascript/shared/components/CardButton.vue b/app/javascript/shared/components/CardButton.vue
index 981c6f93d..9eb443568 100644
--- a/app/javascript/shared/components/CardButton.vue
+++ b/app/javascript/shared/components/CardButton.vue
@@ -4,7 +4,11 @@
     :key="action.uri"
     class="action-button button"
     :href="action.uri"
-    :style="{ background: widgetColor, borderColor: widgetColor }"
+    :style="{
+      background: widgetColor,
+      borderColor: widgetColor,
+      color: textColor,
+    }"
     target="_blank"
     rel="noopener nofollow noreferrer"
   >
@@ -22,6 +26,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import { getContrastingTextColor } from '@chatwoot/utils';
 export default {
   components: {},
   props: {
@@ -34,6 +39,9 @@ export default {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
     isLink() {
       return this.action.type === 'link';
     },
diff --git a/app/javascript/shared/components/ChatForm.vue b/app/javascript/shared/components/ChatForm.vue
index 3cb6b956c..347bf39d9 100644
--- a/app/javascript/shared/components/ChatForm.vue
+++ b/app/javascript/shared/components/ChatForm.vue
@@ -71,7 +71,11 @@
         v-if="!submittedValues.length"
         class="button block"
         type="submit"
-        :style="{ background: widgetColor, borderColor: widgetColor }"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
         @click="onSubmitClick"
       >
         {{ buttonLabel || $t('COMPONENTS.FORM_BUBBLE.SUBMIT') }}
@@ -83,6 +87,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   mixins: [darkModeMixin],
@@ -110,6 +115,9 @@ export default {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
     inputColor() {
       return `${this.$dm('bg-white', 'dark:bg-slate-600')}
         ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
diff --git a/app/javascript/shared/components/CustomerSatisfaction.vue b/app/javascript/shared/components/CustomerSatisfaction.vue
index 661bace55..3901db4d1 100644
--- a/app/javascript/shared/components/CustomerSatisfaction.vue
+++ b/app/javascript/shared/components/CustomerSatisfaction.vue
@@ -32,7 +32,11 @@
       <button
         class="button small"
         :disabled="isButtonDisabled"
-        :style="{ background: widgetColor, borderColor: widgetColor }"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
       >
         <spinner v-if="isUpdating && feedback" />
         <fluent-icon v-else icon="chevron-right" />
@@ -47,6 +51,7 @@ import Spinner from 'shared/components/Spinner';
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   components: {
@@ -89,6 +94,9 @@ export default {
       return `${this.$dm('bg-white', 'dark:bg-slate-600')}
         ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
     },
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
     title() {
       return this.isRatingSubmitted
         ? this.$t('CSAT.SUBMITTED_TITLE')
diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
index da04a2aff..50bc99a3b 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/app/javascript/widget/components/UserMessageBubble.vue
@@ -2,12 +2,13 @@
   <div
     v-dompurify-html="formatMessage(message, false)"
     class="chat-bubble user"
-    :style="{ background: widgetColor }"
+    :style="{ background: widgetColor, color: textColor }"
   />
 </template>
 
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   name: 'UserMessageBubble',
@@ -26,6 +27,11 @@ export default {
       default: '',
     },
   },
+  computed: {
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
+  },
 };
 </script>
 
diff --git a/app/javascript/widget/components/template/EmailInput.vue b/app/javascript/widget/components/template/EmailInput.vue
index 054508313..8c7e3adf6 100644
--- a/app/javascript/widget/components/template/EmailInput.vue
+++ b/app/javascript/widget/components/template/EmailInput.vue
@@ -16,7 +16,11 @@
       <button
         class="button small"
         :disabled="$v.email.$invalid"
-        :style="{ background: widgetColor, borderColor: widgetColor }"
+        :style="{
+          background: widgetColor,
+          borderColor: widgetColor,
+          color: textColor,
+        }"
       >
         <fluent-icon v-if="!isUpdating" icon="chevron-right" />
         <spinner v-else class="mx-2" />
@@ -28,6 +32,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { required, email } from 'vuelidate/lib/validators';
+import { getContrastingTextColor } from '@chatwoot/utils';
 
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import Spinner from 'shared/components/Spinner';
@@ -59,6 +64,9 @@ export default {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
     }),
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
     hasSubmitted() {
       return (
         this.messageContentAttributes &&