maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
GitStart-Cal.com 2023-06-08 03:55:47 +08:00 committed by GitHub
parent 3d5ff82062
commit f86c6734a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/features/ee/teams/components/MemberInvitationModal.tsx
View File

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

2
packages/features/eventtypes/components/CreateEventTypeDialog.tsx
View File

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

4
packages/features/form-builder/FormBuilder.tsx
View File

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

2
packages/ui/components/dialog/Dialog.tsx
View File

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