blsmedia/bot
2
0
Fork 0
Code 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

2
packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
View File

@ -33,7 +33,7 @@ export const AudioBubble = (props: Props) => {
<div class="flex mb-2 w-full items-center">
<div class={'flex relative z-10 items-start typebot-host-bubble'}>
<div
class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
style={{
width: isTyping() ? '64px' : '100%',
height: isTyping() ? '32px' : '100%',

4
packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
View File

@ -34,7 +34,7 @@ export const EmbedBubble = (props: Props) => {
class={'flex relative z-10 items-start typebot-host-bubble w-full'}
>
<div
class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
style={{
width: isTyping() ? '64px' : '100%',
height: isTyping() ? '32px' : '100%',
@ -46,7 +46,7 @@ export const EmbedBubble = (props: Props) => {
id="embed-bubble-content"
src={props.content.url}
class={
'w-full z-20 p-4 text-fade-in rounded-2xl ' +
'w-full z-20 p-4 text-fade-in ' +
(isTyping() ? 'opacity-0' : 'opacity-100')
}
style={{

4
packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
View File

@ -43,7 +43,7 @@ export const ImageBubble = (props: Props) => {
<div class="flex mb-2 w-full items-center">
<div class={'flex relative z-10 items-start typebot-host-bubble'}>
<div
class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
style={{
width: isTyping() ? '64px' : '100%',
height: isTyping() ? '32px' : '100%',
@ -56,7 +56,7 @@ export const ImageBubble = (props: Props) => {
ref={image}
src={props.url}
class={
'text-fade-in w-full rounded-md ' +
'text-fade-in w-full ' +
(isTyping() ? 'opacity-0' : 'opacity-100')
}
style={{

4
packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
View File

@ -49,9 +49,9 @@ export const TextBubble = (props: Props) => {
return (
<div class="flex flex-col animate-fade-in">
<div class="flex mb-2 w-full items-center">
<div class={'flex relative items-start typebot-host-bubble'}>
<div class="flex relative items-start typebot-host-bubble">
<div
class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing "
class="flex items-center absolute px-4 py-2 bubble-typing "
style={{
width: isTyping() ? '64px' : '100%',
height: isTyping() ? '32px' : '100%',

6
packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
View File

@ -36,7 +36,7 @@ export const VideoBubble = (props: Props) => {
<div class="flex mb-2 w-full items-center">
<div class={'flex relative z-10 items-start typebot-host-bubble'}>
<div
class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
style={{
width: isTyping() ? '64px' : '100%',
height: isTyping() ? '32px' : '100%',
@ -68,7 +68,7 @@ const VideoContent = (props: VideoContentProps) => {
<video
controls
class={
'p-4 focus:outline-none w-full z-10 text-fade-in rounded-md ' +
'p-4 focus:outline-none w-full z-10 text-fade-in ' +
(props.isTyping ? 'opacity-0' : 'opacity-100')
}
style={{
@ -97,7 +97,7 @@ const VideoContent = (props: VideoContentProps) => {
: 'https://www.youtube.com/embed'
}/${props.content.id}`}
class={
'w-full p-4 text-fade-in z-10 rounded-md ' +
'w-full p-4 text-fade-in z-10 ' +
(props.isTyping ? 'opacity-0' : 'opacity-100')
}
height={props.isTyping ? '32px' : '200px'}

2
packages/embeds/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx
View File

@ -49,7 +49,7 @@ export const ChoiceForm = (props: Props) => {
type="button"
on:click={() => handleClick(index())}
class={
'py-2 px-4 text-left font-semibold rounded-md transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none typebot-button ' +
'py-2 px-4 text-left font-semibold transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none typebot-button ' +
(selectedIndices().some(
(selectedIndex) => selectedIndex === index()
) || !props.block.options?.isMultipleChoice

2
packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx
View File

@ -19,7 +19,7 @@ export const DateForm = (props: Props) => {
<div class="flex flex-col">
<div class="flex items-center">
<form
class={'flex justify-between rounded-lg typebot-input pr-2 items-end'}
class={'flex justify-between typebot-input pr-2 items-end'}
onSubmit={(e) => {
if (inputValues().from === '' && inputValues().to === '') return
e.preventDefault()

4
packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx
View File

@ -34,9 +34,7 @@ export const EmailInput = (props: Props) => {
return (
<div
class={
'flex items-end justify-between rounded-lg pr-2 typebot-input w-full'
}
class={'flex items-end justify-between pr-2 typebot-input w-full'}
data-testid="input"
style={{
'max-width': '350px',

6
packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
View File

@ -116,7 +116,7 @@ export const FileUploadForm = (props: Props) => {
<label
for="dropzone-file"
class={
'typebot-upload-input py-6 flex flex-col justify-center items-center w-full bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer hover:bg-gray-100 px-8 mb-2 ' +
'typebot-upload-input py-6 flex flex-col justify-center items-center w-full bg-gray-50 border-2 border-gray-300 border-dashed cursor-pointer hover:bg-gray-100 px-8 mb-2 ' +
(isDraggingOver() ? 'dragging-over' : '')
}
onDragOver={handleDragOver}
@ -181,7 +181,7 @@ export const FileUploadForm = (props: Props) => {
<div class="flex justify-end">
<button
class={
'py-2 px-4 justify-center font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button '
'py-2 px-4 justify-center font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 typebot-button '
}
on:click={() =>
props.onSkip(
@ -207,7 +207,7 @@ export const FileUploadForm = (props: Props) => {
<Show when={selectedFiles().length}>
<button
class={
'secondary-button py-2 px-4 justify-center font-semibold rounded-md text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 mr-2'
'secondary-button py-2 px-4 justify-center font-semibold text-white focus:outline-none flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 transition-all filter hover:brightness-90 active:brightness-75 mr-2'
}
on:click={clearFiles}
>

4
packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx
View File

@ -34,9 +34,7 @@ export const NumberInput = (props: NumberInputProps) => {
return (
<div
class={
'flex items-end justify-between rounded-lg pr-2 typebot-input w-full'
}
class={'flex items-end justify-between pr-2 typebot-input w-full'}
data-testid="input"
style={{
'max-width': '350px',

2
packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx
View File

@ -77,7 +77,7 @@ export const StripePaymentForm = (props: Props) => {
<form
id="payment-form"
onSubmit={handleSubmit}
class="flex flex-col rounded-lg p-4 typebot-input w-full items-center"
class="flex flex-col p-4 typebot-input w-full items-center"
>
<slot name={slotName} ref={paymentElementSlot} />
<Show when={isMounted()}>

4
packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
View File

@ -91,7 +91,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
return (
<div
class={'flex items-end justify-between rounded-lg pr-2 typebot-input'}
class={'flex items-end justify-between pr-2 typebot-input'}
data-testid="input"
style={{
'max-width': '400px',
@ -99,7 +99,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
onKeyDown={submitWhenEnter}
>
<div class="flex">
<div class="relative typebot-country-select flex justify-center items-center rounded-md">
<div class="relative typebot-country-select flex justify-center items-center">
<div class="pl-2 pr-1 flex items-center gap-2">
<span>
{

2
packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx
View File

@ -89,7 +89,7 @@ const RatingButton = (props: RatingButtonProps) => {
props.onClick(props.idx)
}}
class={
'py-2 px-4 mr-2 mb-2 text-left font-semibold rounded-md transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none typebot-button ' +
'py-2 px-4 mr-2 mb-2 text-left font-semibold transition-all filter hover:brightness-90 active:brightness-75 duration-100 focus:outline-none typebot-button ' +
(props.isOneClickSubmitEnabled ||
(isDefined(props.rating) && props.idx <= props.rating)
? ''

4
packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
View File

@ -35,9 +35,7 @@ export const TextInput = (props: Props) => {
return (
<div
class={
'flex items-end justify-between rounded-lg pr-2 typebot-input w-full'
}
class={'flex items-end justify-between pr-2 typebot-input w-full'}
data-testid="input"
style={{
'max-width': props.block.options.isLong ? undefined : '350px',

4
packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx
View File

@ -40,9 +40,7 @@ export const UrlInput = (props: Props) => {
return (
<div
class={
'flex items-end justify-between rounded-lg pr-2 typebot-input w-full'
}
class={'flex items-end justify-between pr-2 typebot-input w-full'}
data-testid="input"
style={{
'max-width': '350px',