🐛 Fix embed bubble icon color

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",

packages/embeds/js/src/features/bubble/components/BubbleButton.tsx

@@ -9,12 +9,13 @@ 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 (
+export const BubbleButton = (props: Props) => (
   <button
     part="button"
     onClick={() => props.toggleBot()}
@@ -33,15 +34,13 @@ export const BubbleButton = (props: Props) => {
         style={{
           stroke:
             props.iconColor ??
-              isLight(props.backgroundColor ?? defaultButtonColor)
-                ? '#27272A'
-                : '#fff',
+            (isLight(props.backgroundColor ?? defaultButtonColor)
+              ? defaultDarkIconColor
+              : defaultLightIconColor),
         }}
         class={
           `stroke-2 fill-transparent absolute duration-200 transition ` +
-            (props.isBotOpened
-              ? 'scale-0 opacity-0'
-              : 'scale-100 opacity-100') +
+          (props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100') +
           (props.size === 'large' ? ' w-9' : ' w-7')
         }
       >
@@ -72,9 +71,7 @@ export const BubbleButton = (props: Props) => {
       <span
         class={
           'text-4xl duration-200 transition' +
-            (props.isBotOpened
-              ? ' scale-0 opacity-0'
-              : ' scale-100 opacity-100')
+          (props.isBotOpened ? ' scale-0 opacity-0' : ' scale-100 opacity-100')
         }
         style={{
           'font-family':
@@ -87,7 +84,13 @@ export const BubbleButton = (props: Props) => {
 
     <svg
       viewBox="0 0 24 24"
-        style={{ fill: props.iconColor ?? 'white' }}
+      style={{
+        fill:
+          props.iconColor ??
+          (isLight(props.backgroundColor ?? defaultButtonColor)
+            ? defaultDarkIconColor
+            : defaultLightIconColor),
+      }}
       class={
         `absolute duration-200 transition ` +
         (props.isBotOpened
@@ -103,5 +106,4 @@ export const BubbleButton = (props: Props) => {
       />
     </svg>
   </button>
-  )
-}
+)

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",