fix: Update colors in widget buttons to fix invalid colors (#6033)

Co-authored-by: nithindavid <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/widget/components/FileBubble.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="file flex flex-row items-center p-3 cursor-pointer">
-    <div class="icon-wrap">
+    <div class="icon-wrap" :style="{ color: textColor }">
       <fluent-icon icon="document" size="28" />
     </div>
     <div class="meta">
-      <div class="title">
+      <div class="title" :style="{ color: textColor }">
         {{ title }}
       </div>
       <div class="link-wrap mb-1">
@@ -12,6 +12,7 @@
           class="download"
           rel="noreferrer noopener nofollow"
           target="_blank"
+          :style="{ color: textColor }"
           :href="url"
         >
           {{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
@@ -23,6 +24,7 @@
 
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   components: {
@@ -51,6 +53,9 @@ export default {
     fileName() {
       return this.url.substring(this.url.lastIndexOf('/') + 1);
     },
+    textColor() {
+      return getContrastingTextColor(this.widgetColor);
+    },
   },
   methods: {
     openLink() {

app/javascript/widget/components/UnreadMessageList.vue

@@ -27,7 +27,15 @@
         class="button clear-button"
         @click="openConversationView"
       >
-        <span class="flex items-center">
+        <span
+          class="flex items-center"
+          :class="{
+            'is-background-light': isBackgroundLighter,
+          }"
+          :style="{
+            color: widgetColor,
+          }"
+        >
           <fluent-icon class="mr-2" size="16" icon="arrow-right" />
           {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
         </span>
@@ -43,6 +51,7 @@ import configMixin from '../mixins/configMixin';
 import { ON_UNREAD_MESSAGE_CLICK } from '../constants/widgetBusEvents';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import UnreadMessage from 'widget/components/UnreadMessage.vue';
+import { isWidgetColorLighter } from 'shared/helpers/colorHelper';
 
 export default {
   name: 'Unread',
@@ -58,11 +67,17 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({ unreadMessageCount: 'conversation/getUnreadMessageCount' }),
+    ...mapGetters({
+      unreadMessageCount: 'conversation/getUnreadMessageCount',
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
     sender() {
       const [firstMessage] = this.messages;
       return firstMessage.sender || {};
     },
+    isBackgroundLighter() {
+      return isWidgetColorLighter(this.widgetColor);
+    },
   },
   methods: {
     openConversationView() {
@@ -134,5 +149,8 @@ export default {
       color: $color-body;
     }
   }
+  .is-background-light {
+    color: $color-body !important;
+  }
 }
 </style>

app/javascript/widget/components/UserMessage.vue

@@ -28,6 +28,7 @@
               v-else
               :url="attachment.data_url"
               :is-in-progress="isInProgress"
+              :widget-color="widgetColor"
             />
           </div>
         </div>