From 0c2a25fb789e0c045e4519b3fa82f33f2c9f1038 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Thu, 8 Sep 2022 23:08:11 +0530
Subject: [PATCH] fix: toggle alignment, spacing, square btn (#4282)

* fix: toggle alignment, spacing, square btn

* fix: toggle alignment

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../components/v2/eventtype/EventAdvancedTab.tsx   | 14 +++++++-------
 packages/ui/v2/core/form/fields.tsx                |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/web/components/v2/eventtype/EventAdvancedTab.tsx b/apps/web/components/v2/eventtype/EventAdvancedTab.tsx
index 20e9a32752..ca7936b645 100644
--- a/apps/web/components/v2/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/v2/eventtype/EventAdvancedTab.tsx
@@ -82,7 +82,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               </a>
             </Link>
           </div>
-          <div className="w-full">
+          <div className="-mt-1 w-full">
             <Controller
               control={formMethods.control}
               name="destinationCalendar"
@@ -134,7 +134,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               }
             }}
           />
-          <div className="flex flex-col">
+          <div className="relative top-2 flex flex-col">
             <Label className="text-sm font-semibold leading-none text-black">{t("additional_inputs")}</Label>
             <p className="-mt-2 text-sm leading-normal text-gray-600">{t("additional_input_description")}</p>
           </div>
@@ -172,14 +172,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
         name="requiresConfirmation"
         defaultValue={eventType.requiresConfirmation}
         render={({ field: { value, onChange } }) => (
-          <div className="flex space-x-3 ">
+          <div className="flex space-x-3">
             <Switch
               name="requireConfirmation"
               checked={value}
               onCheckedChange={(e) => onChange(e)}
               disabled={seatsEnabled}
             />
-            <div className="flex flex-col">
+            <div className="relative top-4 flex flex-col">
               <Label className="text-sm font-semibold leading-none text-black">
                 {t("requires_confirmation")}
               </Label>
@@ -203,7 +203,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               onCheckedChange={(e) => onChange(e)}
               disabled={seatsEnabled}
             />
-            <div className="flex flex-col">
+            <div className="relative top-2 flex flex-col">
               <Label className="text-sm font-semibold leading-none text-black">{t("disable_guests")}</Label>
               <p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_guests_description")}</p>
             </div>
@@ -219,7 +219,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
         render={({ field: { value, onChange } }) => (
           <div className="flex space-x-3 ">
             <Switch name="hideCalendarNotes" checked={value} onCheckedChange={(e) => onChange(e)} />
-            <div className="flex flex-col">
+            <div className="relative top-4 flex flex-col">
               <Label className="text-sm font-semibold leading-none text-black">{t("disable_notes")}</Label>
               <p className="-mt-2 text-sm leading-normal text-gray-600">{t("disable_notes_description")}</p>
             </div>
@@ -242,7 +242,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
                   onChange(e ? hashedUrl : undefined);
                 }}
               />
-              <div className="flex flex-col">
+              <div className="relative top-2 flex flex-col">
                 <Label className="text-sm font-semibold leading-none text-black">{t("private_link")}</Label>
                 <p className="-mt-2 text-sm leading-normal text-gray-600">{t("private_link_description")}</p>
               </div>
diff --git a/packages/ui/v2/core/form/fields.tsx b/packages/ui/v2/core/form/fields.tsx
index ba956ad108..3e636689fc 100644
--- a/packages/ui/v2/core/form/fields.tsx
+++ b/packages/ui/v2/core/form/fields.tsx
@@ -204,11 +204,11 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
               "h-9 border border-gray-300",
               addOnFilled && "bg-gray-100",
               addOnLeading && "rounded-l-md border-r-0",
-              addOnSuffix && "rounded-r-md border-l-0"
+              addOnSuffix && "border-l-0"
             )}>
             <div
               className={classNames(
-                "flex h-full flex-col justify-center px-3 text-sm",
+                "flex h-full flex-col justify-center px-1 text-sm",
                 props.error && "text-red-900"
               )}>
               <span className="whitespace-nowrap">{addOnLeading || addOnSuffix}</span>