From f86c6734a7200b4a3a798d19ab276d061aed397a Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Thu, 8 Jun 2023 03:55:47 +0800
Subject: [PATCH] fix: Wrong padding on "Invite Team Members" modal
 (CALCOM-8414-FIX) (#9273)

* Fix margin from invitation modal content

* Change margin to padding in Dialog component, so the divider absolute property works properly

* Update Dialog.tsx padding from the button top from 24px to 16px

* Change Dialog content padding to match figma design, having the padding bottom 16px

* Update FormBuilder.tsx to match figma

* Update FormBuilder.tsx Dialog content inner div paddings

* Update FormBuilder.tsx, remove relative to fix divider

* Fixing padding across dialogs

* nit

* Fixes e2e

* undo wrong padding

* fixed footer with divider

---------

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: zomars <zomars@me.com>
---
 .../ee/teams/components/MemberInvitationModal.tsx         | 8 ++++----
 .../eventtypes/components/CreateEventTypeDialog.tsx       | 2 +-
 packages/features/form-builder/FormBuilder.tsx            | 4 ++--
 packages/ui/components/dialog/Dialog.tsx                  | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index 8df4a348ba..3fccd7e59e 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -131,7 +131,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
         </div>
 
         <Form form={newMemberFormMethods} handleSubmit={(values) => props.onSubmit(values)}>
-          <div className="space-y-6">
+          <div className="my-6 space-y-6">
             {/* Indivdual Invite */}
             {modalImportMode === "INDIVIDUAL" && (
               <Controller
@@ -240,9 +240,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                 />
               )}
             />
-          </div>
-          <DialogFooter showDivider>
-            <div className="mr-auto flex">
+            <div className="flex">
               <Button
                 type="button"
                 color="minimal"
@@ -271,6 +269,8 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                 </Button>
               )}
             </div>
+          </div>
+          <DialogFooter showDivider>
             <Button
               type="button"
               color="minimal"
diff --git a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
index 2726bc74e4..66bf751d77 100644
--- a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
+++ b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
@@ -293,7 +293,7 @@ export default function CreateEventTypeDialog({
               </div>
             )}
           </div>
-          <div className="mt-8 flex justify-end gap-x-2">
+          <div className="mt-10 flex justify-end gap-x-2">
             <DialogClose />
             <Button type="submit" loading={createMutation.isLoading}>
               {t("continue")}
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index 92eedab428..7d10371ebb 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -425,7 +425,7 @@ export const FormBuilder = function FormBuilder({
           })
         }>
         <DialogContent className="max-h-none p-0" data-testid="edit-field-dialog">
-          <div className="h-auto max-h-[85vh] overflow-auto px-8 pt-8 pb-7">
+          <div className="h-auto max-h-[85vh] overflow-auto px-8 pt-8 pb-10">
             <DialogHeader
               title={t("add_a_booking_question")}
               subtitle={t("form_builder_field_add_subtitle")}
@@ -545,7 +545,7 @@ export const FormBuilder = function FormBuilder({
               />
             </Form>
           </div>
-          <DialogFooter className="relative rounded px-8 pb-6" showDivider>
+          <DialogFooter className="relative rounded px-8 pb-4" showDivider>
             <DialogClose color="secondary">{t("cancel")}</DialogClose>
             <Button data-testid="field-add-save" type="submit" form="form-builder">
               {isFieldEditMode ? t("save") : t("add")}
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 04531e68f5..73e7babbc2 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -138,7 +138,7 @@ export function DialogFooter(props: { children: ReactNode; className?: string; s
   return (
     <div className={classNames("bg-default", props.className)}>
       {props.showDivider && <hr className="border-subtle absolute right-0 w-full" />}
-      <div className={classNames("bg-default mt-6 flex justify-end space-x-2 rtl:space-x-reverse")}>
+      <div className={classNames("-mb-4 flex justify-end space-x-2 pt-4 rtl:space-x-reverse")}>
         {props.children}
       </div>
     </div>