From ef3ad36c2c76a10da0b0099ab2455702dbb0d740 Mon Sep 17 00:00:00 2001
From: Leo Giovanetti <hello@leog.me>
Date: Wed, 30 Nov 2022 15:53:28 -0300
Subject: [PATCH] Fixed listing formatting and save for custom inputs (#5795)

* Fixed formatting and save

* Additional tweaks

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 apps/web/components/eventtype/CustomInputTypeForm.tsx  | 6 ++++--
 apps/web/components/eventtype/EventAdvancedTab.tsx     | 4 ++--
 apps/web/pages/booking/[uid].tsx                       | 6 +++---
 packages/ui/v2/modules/event-types/CustomInputItem.tsx | 2 +-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/eventtype/CustomInputTypeForm.tsx b/apps/web/components/eventtype/CustomInputTypeForm.tsx
index 08a2b3fd5d..07510bcaa1 100644
--- a/apps/web/components/eventtype/CustomInputTypeForm.tsx
+++ b/apps/web/components/eventtype/CustomInputTypeForm.tsx
@@ -40,7 +40,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
   };
 
   return (
-    <form onSubmit={handleSubmit(props.onSubmit)} className="flex flex-col space-y-4">
+    <form className="flex flex-col space-y-4">
       <div>
         <label htmlFor="type" className="block text-sm font-medium text-gray-700">
           {t("input_type")}
@@ -111,7 +111,9 @@ const CustomInputTypeForm: FC<Props> = (props) => {
         <Button onClick={onCancel} type="button" color="secondary" className="ltr:mr-2">
           {t("cancel")}
         </Button>
-        <Button type="submit">{t("save")}</Button>
+        <Button onClick={handleSubmit(props.onSubmit)} form="custom-input">
+          {t("save")}
+        </Button>
       </div>
     </form>
   );
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index c5405451f5..6a885e354e 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -132,7 +132,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               formMethods.setValue("customInputs", []);
             }
           }}>
-          <ul className="my-4">
+          <ul className="my-4 rounded-md border">
             {customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
               <CustomInputItem
                 key={idx}
@@ -156,7 +156,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
                 setSelectedCustomInput(undefined);
                 setSelectedCustomInputModalOpen(true);
               }}>
-              Add an input
+              {t("add_input")}
             </Button>
           )}
         </SettingsToggle>
diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index b2f1b57211..8a883b17d5 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -411,7 +411,7 @@ export default function Success(props: SuccessProps) {
                     {(bookingInfo?.user || bookingInfo?.attendees) && (
                       <>
                         <div className="font-medium">{t("who")}</div>
-                        <div className="col-span-2 mb-6 last:mb-0">
+                        <div className="col-span-2 last:mb-0">
                           <>
                             {bookingInfo?.user && (
                               <div className="mb-3">
@@ -458,8 +458,8 @@ export default function Success(props: SuccessProps) {
                           <>
                             {customInput !== "" && (
                               <>
-                                <div className="mt-2 pr-3 font-medium">{key}</div>
-                                <div className="col-span-2 mt-2 mb-2">
+                                <div className="col-span-3 mt-8 border-t pt-8 pr-3 font-medium">{key}</div>
+                                <div className="col-span-3 mt-2 mb-2">
                                   {typeof customInput === "boolean" ? (
                                     <p>{customInput ? "true" : "false"}</p>
                                   ) : (
diff --git a/packages/ui/v2/modules/event-types/CustomInputItem.tsx b/packages/ui/v2/modules/event-types/CustomInputItem.tsx
index 08808f8e8b..6ad2b6b1b9 100644
--- a/packages/ui/v2/modules/event-types/CustomInputItem.tsx
+++ b/packages/ui/v2/modules/event-types/CustomInputItem.tsx
@@ -13,7 +13,7 @@ type Props = {
 function CustomInputItem({ required, deleteOnClick, editOnClick, type, question }: Props) {
   const { t } = useLocale();
   return (
-    <li className="border-1 flex border border-gray-200 bg-white px-6 py-4 first:rounded-t-md last:rounded-b-md only:rounded-md">
+    <li className="flex rounded-b-md border-t border-gray-200 bg-white px-6 py-4 first:rounded-t-md first:border-0">
       <div className="flex flex-col">
         <div className="flex items-center">
           <span className="pr-2 text-sm font-semibold leading-none text-black">{question}</span>