public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Fix UI issues on embed popup footer (#10286) 

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
feat/embed-in-emails
GitStart-Cal.com 2023-07-24 07:17:25 +01:00 committed by GitHub
parent f081c733b8
commit 2b5577772b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/components/Embed.tsx
View File

@ -1181,7 +1181,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
</div> </div>
</div> </div>
</div> </div>
<div className="flex w-2/3 flex-col p-8"> <div className="flex w-2/3 flex-col px-8 pt-8">
<HorizontalTabs data-testid="embed-tabs" tabs={parsedTabs} linkShallow /> <HorizontalTabs data-testid="embed-tabs" tabs={parsedTabs} linkShallow />
{tabs.map((tab) => { {tabs.map((tab) => {
return ( return (
@ -1208,10 +1208,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
)} )}
</div> </div>
<div className={router.query.embedTabName == "embed-preview" ? "mt-2 block" : "hidden"} /> <div className={router.query.embedTabName == "embed-preview" ? "mt-2 block" : "hidden"} />
<DialogFooter <DialogFooter className="mt-10 flex-row-reverse gap-x-2" showDivider>
className="mt-10 flex flex-row-reverse gap-x-2"
showDivider
customDividerClassNames="w-2/3">
<DialogClose /> <DialogClose />
{tab.type === "code" ? ( {tab.type === "code" ? (
<Button <Button

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

@ -141,20 +141,12 @@ export function DialogHeader(props: DialogHeaderProps) {
); );
} }
export function DialogFooter(props: { export function DialogFooter(props: { children: ReactNode; className?: string; showDivider?: boolean }) {
children: ReactNode;
className?: string;
showDivider?: boolean;
customDividerClassNames?: string;
}) {
return ( return (
<div className={classNames("bg-default sticky bottom-0", props.className)}> <div className={classNames("bg-default sticky bottom-0", props.className)}>
{props.showDivider && ( {props.showDivider && (
// TODO: the -mx-8 is causing overflow in the dialog buttons // TODO: the -mx-8 is causing overflow in the dialog buttons
<hr <hr data-testid="divider" className="border-subtle -mx-8" />
data-testid="divider"
className={classNames("border-subtle -mx-8", props.customDividerClassNames)}
/>
)} )}
<div <div
className={classNames( className={classNames(