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/dashboard/components/widgets/ColorPicker.vue

@@ -61,6 +61,7 @@ export default {
 }
 
 .colorpicker--selected {
+  border: 1px solid var(--color-border-light);
   border-radius: $space-smaller;
   cursor: pointer;
   height: $space-large;

app/javascript/dashboard/routes/auth/components/Testimonials/Index.vue

@@ -69,11 +69,11 @@ export default {
 }
 
 .center--img {
-  left: 5%;
+  height: 96%;
-  max-height: 86%;
+  left: 8%;
-  max-width: 90%;
   position: absolute;
-  top: 2%;
+  top: 8%;
+  width: 86%;
 }
 
 .center-container {
@@ -101,7 +101,7 @@ export default {
   align-items: flex-start;
   display: flex;
   justify-content: center;
-  padding: var(--space-larger);
+  padding: var(--space-large);
 }
 
 .testimonial-left--card {

app/javascript/sdk/IFrameHelper.js

@@ -10,7 +10,7 @@ import {
   widgetHolder,
   createBubbleHolder,
   createBubbleIcon,
-  bubbleImg,
+  bubbleSVG,
   chatBubble,
   closeBubble,
   bubbleHolder,
@@ -21,6 +21,7 @@ import {
   addUnreadClass,
   removeUnreadClass,
 } from './bubbleHelpers';
+import { isWidgetColorLighter } from 'shared/helpers/colorHelper';
 import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
 import { CHATWOOT_ERROR, CHATWOOT_READY } from '../widget/constants/sdkEvents';
 import { SET_USER_ERROR } from '../widget/constants/errorTypes';
@@ -277,9 +278,14 @@ export const IFrameHelper = {
       closeBtnClassName += ' woot-widget-bubble--flat';
     }
 
+    if (isWidgetColorLighter(widgetColor)) {
+      className += ' woot-widget-bubble-color--lighter';
+      closeBtnClassName += ' woot-widget-bubble-color--lighter';
+    }
+
     const chatIcon = createBubbleIcon({
       className,
-      src: bubbleImg,
+      path: bubbleSVG,
       target: chatBubble,
     });
 

app/javascript/sdk/bubbleHelpers.js

@@ -2,8 +2,8 @@ import { addClasses, removeClasses, toggleClass } from './DOMHelpers';
 import { IFrameHelper } from './IFrameHelper';
 import { isExpandedView } from './settingsHelper';
 
-export const bubbleImg =
+export const bubbleSVG =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg==';
+  'M240.808 240.808H122.123C56.6994 240.808 3.45695 187.562 3.45695 122.122C3.45695 56.7031 56.6994 3.45697 122.124 3.45697C187.566 3.45697 240.808 56.7031 240.808 122.122V240.808Z';
 
 export const body = document.getElementsByTagName('body')[0];
 export const widgetHolder = document.createElement('div');
@@ -20,11 +20,27 @@ export const setBubbleText = bubbleText => {
   }
 };
 
-export const createBubbleIcon = ({ className, src, target }) => {
+export const createBubbleIcon = ({ className, path, target }) => {
   let bubbleClassName = `${className} woot-elements--${window.$chatwoot.position}`;
-  const bubbleIcon = document.createElement('img');
+  const bubbleIcon = document.createElementNS(
-  bubbleIcon.src = src;
+    'http://www.w3.org/2000/svg',
-  bubbleIcon.alt = 'bubble-icon';
+    'svg'
+  );
+  bubbleIcon.setAttributeNS(null, 'id', 'woot-widget-bubble-icon');
+  bubbleIcon.setAttributeNS(null, 'width', '24');
+  bubbleIcon.setAttributeNS(null, 'height', '24');
+  bubbleIcon.setAttributeNS(null, 'viewBox', '0 0 240 240');
+  bubbleIcon.setAttributeNS(null, 'fill', 'none');
+  bubbleIcon.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+  const bubblePath = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'path'
+  );
+  bubblePath.setAttributeNS(null, 'd', path);
+  bubblePath.setAttributeNS(null, 'fill', '#FFFFFF');
+
+  bubbleIcon.appendChild(bubblePath);
   target.appendChild(bubbleIcon);
 
   if (isExpandedView(window.$chatwoot.type)) {

app/javascript/sdk/sdk.js

@@ -1,6 +1,7 @@
 export const SDK_CSS = `
 :root {
   --b-100: #F2F3F7;
+  --s-700: #37546D;
 }
 
 .woot-widget-holder {
@@ -64,7 +65,7 @@ export const SDK_CSS = `
   width: 56px;
 }
 
-.woot-widget-bubble.woot-widget-bubble--flat img {
+.woot-widget-bubble.woot-widget-bubble--flat svg {
   margin: 16px;
 }
 
@@ -107,7 +108,11 @@ export const SDK_CSS = `
   width: auto !important;
 }
 
-.woot-widget-bubble.woot-widget--expanded img {
+.woot-widget-bubble.woot-widget--expanded.woot-widget-bubble-color--lighter div{
+  color: var(--s-700);
+}
+
+.woot-widget-bubble.woot-widget--expanded svg {
   height: 20px;
   margin: 14px 8px 14px 16px;
   width: 20px;
@@ -126,13 +131,17 @@ export const SDK_CSS = `
   box-shadow: 0 8px 32px rgba(0, 0, 0, .4) !important;
 }
 
-.woot-widget-bubble img {
+.woot-widget-bubble svg {
   all: revert;
   height: 24px;
   margin: 20px;
   width: 24px;
 }
 
+.woot-widget-bubble.woot-widget-bubble-color--lighter path{
+  fill: var(--s-700);
+}
+
 @media only screen and (min-width: 667px) {
   .woot-widget-holder.woot-elements--left {
     left: 20px;
@@ -157,6 +166,10 @@ export const SDK_CSS = `
   width: 2px;
 }
 
+.woot-widget-bubble-color--lighter.woot--close::before, .woot-widget-bubble-color--lighter.woot--close::after {
+  background-color: var(--s-700);
+}
+
 .woot--close::before {
   transform: rotate(45deg);
 }

app/javascript/shared/components/Spinner.vue

@@ -33,7 +33,7 @@ export default {
     margin-left: -$space-one;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, 0.7);
-    border-top-color: lighten($color-woot, 10%);
+    border-top-color: rgba(255, 255, 255, 0.2);
     animation: spinner 0.9s linear infinite;
   }
 }

app/javascript/shared/helpers/colorHelper.js

@@ -0,0 +1,8 @@
+export const isWidgetColorLighter = color => {
+  const colorToCheck = color.replace('#', '');
+  const c_r = parseInt(colorToCheck.substr(0, 2), 16);
+  const c_g = parseInt(colorToCheck.substr(2, 2), 16);
+  const c_b = parseInt(colorToCheck.substr(4, 2), 16);
+  const brightness = (c_r * 299 + c_g * 587 + c_b * 114) / 1000;
+  return brightness > 225;
+};

app/javascript/shared/helpers/specs/colorHelper.spec.js

@@ -0,0 +1,10 @@
+import { isWidgetColorLighter } from 'shared/helpers/colorHelper';
+
+describe('#isWidgetColorLighter', () => {
+  it('returns true if color is lighter', () => {
+    expect(isWidgetColorLighter('#ffffff')).toEqual(true);
+  });
+  it('returns false if color is darker', () => {
+    expect(isWidgetColorLighter('#000000')).toEqual(false);
+  });
+});

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>