From 8bd5ba187a3b5caa157799af0541556e9efd4cff Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 3 Nov 2022 10:43:12 +0530
Subject: [PATCH] fix: Fix widget thumbnail not rendering background colors
 (#5791)

---
 .../dashboard/components/widgets/Thumbnail.vue    | 10 +++++++++-
 app/javascript/widget/assets/scss/woot.scss       |  1 +
 .../widget/components/ConversationWrap.vue        | 15 ++++++++++++++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index e0d9da24c..9cc4d7100 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="user-thumbnail-box" :style="{ height: size, width: size }">
+  <div :class="thumbnailBoxClass" :style="{ height: size, width: size }">
     <img
       v-if="!imgError && src"
       :src="src"
@@ -120,6 +120,10 @@ export default {
         this.variant === 'circle' ? 'thumbnail-rounded' : 'thumbnail-square';
       return `user-thumbnail ${classname} ${variant}`;
     },
+    thumbnailBoxClass() {
+      const boxClass = this.variant === 'circle' ? 'is-rounded' : '';
+      return `user-thumbnail-box ${boxClass}`;
+    },
   },
   watch: {
     src(value, oldValue) {
@@ -142,6 +146,10 @@ export default {
   max-width: 100%;
   position: relative;
 
+  &.is-rounded {
+    border-radius: 50%;
+  }
+
   .user-thumbnail {
     border-radius: 50%;
     &.thumbnail-square {
diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss
index 3f882eb38..a4957c3da 100755
--- a/app/javascript/widget/assets/scss/woot.scss
+++ b/app/javascript/widget/assets/scss/woot.scss
@@ -1,4 +1,5 @@
 @import 'shared/assets/stylesheets/animations';
+@import 'shared/assets/stylesheets/colors';
 
 @import 'reset';
 @import 'tailwindcss/base';
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index 07b7a61e6..eff57fd86 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="conversation--container">
+  <div class="conversation--container" :class="colorSchemeClass">
     <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
       <div v-if="isFetchingList" class="message--loader">
         <spinner />
@@ -26,6 +26,8 @@ import ChatMessage from 'widget/components/ChatMessage.vue';
 import AgentTypingBubble from 'widget/components/AgentTypingBubble.vue';
 import DateSeparator from 'shared/components/DateSeparator.vue';
 import Spinner from 'shared/components/Spinner.vue';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
+
 import { mapActions, mapGetters } from 'vuex';
 
 export default {
@@ -36,6 +38,7 @@ export default {
     DateSeparator,
     Spinner,
   },
+  mixins: [darkModeMixin],
   props: {
     groupedMessages: {
       type: Array,
@@ -56,6 +59,9 @@ export default {
       conversationSize: 'conversation/getConversationSize',
       isAgentTyping: 'conversation/getIsAgentTyping',
     }),
+    colorSchemeClass() {
+      return `${this.darkMode === 'light' ? 'light' : 'dark'}`;
+    },
   },
   watch: {
     allMessagesLoaded() {
@@ -110,6 +116,13 @@ export default {
   flex: 1;
   overflow-y: auto;
   color-scheme: light dark;
+
+  &.light {
+    color-scheme: light;
+  }
+  &.dark {
+    color-scheme: dark;
+  }
 }
 
 .conversation-wrap {