From 49a8427776ba43417699029e87ee41d85193a05d Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Thu, 18 May 2023 08:54:26 +0200
Subject: [PATCH] :bug: Fix embed bubble icon color

---
 packages/embeds/js/package.json               |   2 +-
 .../bubble/components/BubbleButton.tsx        | 172 +++++++++---------
 packages/embeds/react/package.json            |   2 +-
 3 files changed, 89 insertions(+), 87 deletions(-)

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index 832af42a1..d4a2df3a1 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx b/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
index 5baeae1b9..c2cc1f2ea 100644
--- a/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
+++ b/packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
@@ -9,99 +9,101 @@ type Props = ButtonTheme & {
 }
 
 const defaultButtonColor = '#0042DA'
+const defaultDarkIconColor = '#27272A'
+const defaultLightIconColor = '#fff'
 
 const isImageSrc = (src: string) =>
   src.startsWith('http') || src.startsWith('data:image/svg+xml')
 
-export const BubbleButton = (props: Props) => {
-  return (
-    <button
-      part="button"
-      onClick={() => props.toggleBot()}
-      class={
-        'fixed bottom-5 right-5 shadow-md  rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in' +
-        (props.size === 'large' ? ' w-16 h-16' : ' w-12 h-12')
-      }
-      style={{
-        'background-color': props.backgroundColor ?? defaultButtonColor,
-        'z-index': 42424242,
-      }}
-    >
-      <Show when={isNotDefined(props.customIconSrc)} keyed>
-        <svg
-          viewBox="0 0 24 24"
-          style={{
-            stroke:
-              props.iconColor ??
-              isLight(props.backgroundColor ?? defaultButtonColor)
-                ? '#27272A'
-                : '#fff',
-          }}
-          class={
-            `stroke-2 fill-transparent absolute duration-200 transition ` +
-            (props.isBotOpened
-              ? 'scale-0 opacity-0'
-              : 'scale-100 opacity-100') +
-            (props.size === 'large' ? ' w-9' : ' w-7')
-          }
-        >
-          <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
-        </svg>
-      </Show>
-      <Show when={props.customIconSrc && isImageSrc(props.customIconSrc)}>
-        <img
-          src={props.customIconSrc}
-          class={
-            'duration-200 transition' +
-            (props.isBotOpened
-              ? ' scale-0 opacity-0'
-              : ' scale-100 opacity-100') +
-            (isSvgSrc(props.customIconSrc)
-              ? props.size === 'large'
-                ? ' w-9 h-9'
-                : ' w-7 h-7'
-              : ' w-[90%] h-[90%]') +
-            (isSvgSrc(props.customIconSrc) ? '' : ' object-cover rounded-full')
-          }
-          alt="Bubble button icon"
-          elementtiming={'Bubble button icon'}
-          fetchpriority={'high'}
-        />
-      </Show>
-      <Show when={props.customIconSrc && !isImageSrc(props.customIconSrc)}>
-        <span
-          class={
-            'text-4xl duration-200 transition' +
-            (props.isBotOpened
-              ? ' scale-0 opacity-0'
-              : ' scale-100 opacity-100')
-          }
-          style={{
-            'font-family':
-              "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
-          }}
-        >
-          {props.customIconSrc}
-        </span>
-      </Show>
-
+export const BubbleButton = (props: Props) => (
+  <button
+    part="button"
+    onClick={() => props.toggleBot()}
+    class={
+      'fixed bottom-5 right-5 shadow-md  rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in' +
+      (props.size === 'large' ? ' w-16 h-16' : ' w-12 h-12')
+    }
+    style={{
+      'background-color': props.backgroundColor ?? defaultButtonColor,
+      'z-index': 42424242,
+    }}
+  >
+    <Show when={isNotDefined(props.customIconSrc)} keyed>
       <svg
         viewBox="0 0 24 24"
-        style={{ fill: props.iconColor ?? 'white' }}
+        style={{
+          stroke:
+            props.iconColor ??
+            (isLight(props.backgroundColor ?? defaultButtonColor)
+              ? defaultDarkIconColor
+              : defaultLightIconColor),
+        }}
         class={
-          `absolute duration-200 transition ` +
-          (props.isBotOpened
-            ? 'scale-100 rotate-0 opacity-100'
-            : 'scale-0 -rotate-180 opacity-0') +
+          `stroke-2 fill-transparent absolute duration-200 transition ` +
+          (props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100') +
           (props.size === 'large' ? ' w-9' : ' w-7')
         }
       >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z"
-        />
+        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
       </svg>
-    </button>
-  )
-}
+    </Show>
+    <Show when={props.customIconSrc && isImageSrc(props.customIconSrc)}>
+      <img
+        src={props.customIconSrc}
+        class={
+          'duration-200 transition' +
+          (props.isBotOpened
+            ? ' scale-0 opacity-0'
+            : ' scale-100 opacity-100') +
+          (isSvgSrc(props.customIconSrc)
+            ? props.size === 'large'
+              ? ' w-9 h-9'
+              : ' w-7 h-7'
+            : ' w-[90%] h-[90%]') +
+          (isSvgSrc(props.customIconSrc) ? '' : ' object-cover rounded-full')
+        }
+        alt="Bubble button icon"
+        elementtiming={'Bubble button icon'}
+        fetchpriority={'high'}
+      />
+    </Show>
+    <Show when={props.customIconSrc && !isImageSrc(props.customIconSrc)}>
+      <span
+        class={
+          'text-4xl duration-200 transition' +
+          (props.isBotOpened ? ' scale-0 opacity-0' : ' scale-100 opacity-100')
+        }
+        style={{
+          'font-family':
+            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        }}
+      >
+        {props.customIconSrc}
+      </span>
+    </Show>
+
+    <svg
+      viewBox="0 0 24 24"
+      style={{
+        fill:
+          props.iconColor ??
+          (isLight(props.backgroundColor ?? defaultButtonColor)
+            ? defaultDarkIconColor
+            : defaultLightIconColor),
+      }}
+      class={
+        `absolute duration-200 transition ` +
+        (props.isBotOpened
+          ? 'scale-100 rotate-0 opacity-100'
+          : 'scale-0 -rotate-180 opacity-0') +
+        (props.size === 'large' ? ' w-9' : ' w-7')
+      }
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.601 8.39897C18.269 8.06702 17.7309 8.06702 17.3989 8.39897L12 13.7979L6.60099 8.39897C6.26904 8.06702 5.73086 8.06702 5.39891 8.39897C5.06696 8.73091 5.06696 9.2691 5.39891 9.60105L11.3989 15.601C11.7309 15.933 12.269 15.933 12.601 15.601L18.601 9.60105C18.9329 9.2691 18.9329 8.73091 18.601 8.39897Z"
+      />
+    </svg>
+  </button>
+)
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index d0c911345..1a57bc38e 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",