blsmedia/bot
2
0
Fork 0
Code Issues Activity

⚡ (theme) Add corner roundness customization

Browse Source 
Closes #415
This commit is contained in:
Baptiste Arnaud
2023-03-22 16:43:34 +01:00
parent 3992227afc
commit 65d33e04bc
30 changed files with 195 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/embeds/js/src/utils/setCssVariablesValue.ts
View File

@@ -59,11 +59,12 @@ const setChatTheme = (
chatTheme: ChatTheme,
documentStyle: CSSStyleDeclaration
) => {
const { hostBubbles, guestBubbles, buttons, inputs } = chatTheme
const { hostBubbles, guestBubbles, buttons, inputs, roundness } = chatTheme
if (hostBubbles) setHostBubbles(hostBubbles, documentStyle)
if (guestBubbles) setGuestBubbles(guestBubbles, documentStyle)
if (buttons) setButtons(buttons, documentStyle)
if (inputs) setInputs(inputs, documentStyle)
if (roundness) setRoundness(roundness, documentStyle)
}
const setHostBubbles = (
@@ -151,3 +152,20 @@ const parseBackgroundValue = ({ type, content }: Background) => {
return `url(${content})`
}
}
const setRoundness = (
roundness: NonNullable<ChatTheme['roundness']>,
documentStyle: CSSStyleDeclaration
) => {
switch (roundness) {
case 'none':
documentStyle.setProperty('--typebot-border-radius', '0')
break
case 'medium':
documentStyle.setProperty('--typebot-border-radius', '6px')
break
case 'large':
documentStyle.setProperty('--typebot-border-radius', '20px')
break
}
}