⚡ (theme) Add corner roundness customization

Closes #415

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

@@ -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

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

@@ -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()

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

@@ -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',

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

@@ -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}
               >

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

@@ -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',

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

@@ -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()}>

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

@@ -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>
               {

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

@@ -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)
               ? ''

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

@@ -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',

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

@@ -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',