blsmedia/bot
2
0
Fork 0
Code Activity

🐛 Fix embed bubble icon color

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-05-18 08:54:26 +02:00
parent 683ba90403
commit 49a8427776
3 changed files with 89 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/embeds/js/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@typebot.io/js", "name": "@typebot.io/js",
"version": "0.0.52", "version": "0.0.53",
"description": "Javascript library to display typebots on your website", "description": "Javascript library to display typebots on your website",
"type": "module", "type": "module",
"main": "dist/index.js", "main": "dist/index.js",

30
packages/embeds/js/src/features/bubble/components/BubbleButton.tsx
View File

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

2
packages/embeds/react/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@typebot.io/react", "name": "@typebot.io/react",
"version": "0.0.52", "version": "0.0.53",
"description": "React library to display typebots on your website", "description": "React library to display typebots on your website",
"main": "dist/index.js", "main": "dist/index.js",
"types": "dist/index.d.ts", "types": "dist/index.d.ts",