mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Refactor old dialog to radix Dialog (#2151)

Browse source 
* --init

* refactored more dialogs --WIP

* more modals replaced by dialogs --WIP

* fix for new dialog location import

* --WIP

* lint fix

* final dialog refactor

* added more width to max-w for dialog in sm screen

* clean-up

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
Syed Ali Shahbaz 2022-03-17 18:50:49 +05:30 committed by GitHub
parent df64af2aba
commit bcbf8390e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 724 additions and 820 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/web/components/team/MemberChangeRoleModal.tsx
View file

@ -2,14 +2,15 @@ import { MembershipRole } from "@prisma/client";
import { useState } from "react"; import { useState } from "react";
import React, { SyntheticEvent } from "react"; import React, { SyntheticEvent } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { useLocale } from "@lib/hooks/useLocale";
import { trpc } from "@lib/trpc"; import { trpc } from "@lib/trpc";
import ModalContainer from "@components/ui/ModalContainer"; import ModalContainer from "@components/ui/ModalContainer";
export default function MemberChangeRoleModal(props: { export default function MemberChangeRoleModal(props: {
isOpen: boolean;
memberId: number; memberId: number;
teamId: number; teamId: number;
initialRole: MembershipRole; initialRole: MembershipRole;
@ -41,7 +42,7 @@ export default function MemberChangeRoleModal(props: {
} }
return ( return (
<ModalContainer> <ModalContainer isOpen={props.isOpen} onExit={props.onExit}>
<> <>
<div className="mb-4 sm:flex sm:items-start"> <div className="mb-4 sm:flex sm:items-start">
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">

45
apps/web/components/team/MemberInvitationModal.tsx
View file

@ -5,13 +5,20 @@ import { useState } from "react";
import React, { SyntheticEvent } from "react"; import React, { SyntheticEvent } from "react";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import { TextField } from "@calcom/ui/form/fields"; import { TextField } from "@calcom/ui/form/fields";
import { useLocale } from "@lib/hooks/useLocale"; import { useLocale } from "@lib/hooks/useLocale";
import { TeamWithMembers } from "@lib/queries/teams"; import { TeamWithMembers } from "@lib/queries/teams";
import { trpc } from "@lib/trpc"; import { trpc } from "@lib/trpc";
export default function MemberInvitationModal(props: { team: TeamWithMembers | null; onExit: () => void }) { type MemberInvitationModalProps = {
isOpen: boolean;
team: TeamWithMembers | null;
onExit: () => void;
};
export default function MemberInvitationModal(props: MemberInvitationModalProps) {
const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
const { t, i18n } = useLocale(); const { t, i18n } = useLocale();
const utils = trpc.useContext(); const utils = trpc.useContext();
@ -48,21 +55,8 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
} }
return ( return (
<div <Dialog open={props.isOpen} onOpenChange={props.onExit}>
className="fixed inset-0 z-50 overflow-y-auto" <DialogContent>
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true"></div>
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
&#8203;
</span>
<div className="inline-block transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
<div className="mb-4 sm:flex sm:items-start"> <div className="mb-4 sm:flex sm:items-start">
<div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10"> <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
<UserIcon className="text-brandcontrast h-6 w-6" /> <UserIcon className="text-brandcontrast h-6 w-6" />
@ -115,8 +109,8 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
<div className="flex flex-row rounded-sm bg-gray-50 px-3 py-2"> <div className="flex flex-row rounded-sm bg-gray-50 px-3 py-2">
<InformationCircleIcon className="h-5 w-5 flex-shrink-0 fill-gray-400" aria-hidden="true" /> <InformationCircleIcon className="h-5 w-5 flex-shrink-0 fill-gray-400" aria-hidden="true" />
<span className="ml-2 text-sm leading-tight text-gray-500"> <span className="ml-2 text-sm leading-tight text-gray-500">
Note: This will cost an extra seat ($12/m) on your subscription if this invitee does not Note: This will cost an extra seat ($12/m) on your subscription if this invitee does not have
have a pro account.{" "} a pro account.{" "}
<a href="#" className="underline"> <a href="#" className="underline">
Learn More Learn More
</a> </a>
@ -129,7 +123,10 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
{errorMessage} {errorMessage}
</p> </p>
)} )}
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <DialogFooter>
<Button type="button" color="secondary" onClick={props.onExit}>
{t("cancel")}
</Button>
<Button <Button
type="submit" type="submit"
color="primary" color="primary"
@ -137,13 +134,9 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
data-testid="invite-new-member-button"> data-testid="invite-new-member-button">
{t("invite")} {t("invite")}
</Button> </Button>
<Button type="button" color="secondary" onClick={props.onExit}> </DialogFooter>
{t("cancel")}
</Button>
</div>
</form> </form>
</div> </DialogContent>
</div> </Dialog>
</div>
); );
} }

9
apps/web/components/team/MemberListItem.tsx
View file

@ -164,6 +164,7 @@ export default function MemberListItem(props: Props) {
</div> </div>
{showChangeMemberRoleModal && ( {showChangeMemberRoleModal && (
<MemberChangeRoleModal <MemberChangeRoleModal
isOpen={showChangeMemberRoleModal}
teamId={props.team?.id} teamId={props.team?.id}
memberId={props.member.id} memberId={props.member.id}
initialRole={props.member.role as MembershipRole} initialRole={props.member.role as MembershipRole}
@ -171,9 +172,13 @@ export default function MemberListItem(props: Props) {
/> />
)} )}
{showTeamAvailabilityModal && ( {showTeamAvailabilityModal && (
<ModalContainer wide noPadding> <ModalContainer
wide
noPadding
isOpen={showTeamAvailabilityModal}
onExit={() => setShowTeamAvailabilityModal(false)}>
<TeamAvailabilityModal team={props.team} member={props.member} /> <TeamAvailabilityModal team={props.team} member={props.member} />
<div className="space-x-2 border-t p-5 rtl:space-x-reverse"> <div className="space-x-2 border-t py-5 rtl:space-x-reverse">
<Button onClick={() => setShowTeamAvailabilityModal(false)}>{t("done")}</Button> <Button onClick={() => setShowTeamAvailabilityModal(false)}>{t("done")}</Button>
{props.team.membership.role !== MembershipRole.MEMBER && ( {props.team.membership.role !== MembershipRole.MEMBER && (
<Link href={`/settings/teams/${props.team.id}/availability`}> <Link href={`/settings/teams/${props.team.id}/availability`}>

51
apps/web/components/team/TeamCreateModal.tsx
View file

@ -1,12 +1,15 @@
import { UsersIcon } from "@heroicons/react/outline"; import { UsersIcon } from "@heroicons/react/outline";
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui";
import { Alert } from "@calcom/ui/Alert"; import { Alert } from "@calcom/ui/Alert";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
import { useLocale } from "@lib/hooks/useLocale";
import { trpc } from "@lib/trpc"; import { trpc } from "@lib/trpc";
interface Props { interface Props {
isOpen: boolean;
onClose: () => void; onClose: () => void;
} }
@ -32,24 +35,12 @@ export default function TeamCreate(props: Props) {
}; };
return ( return (
<div <>
className="fixed inset-0 z-50 overflow-y-auto" <Dialog open={props.isOpen} onOpenChange={props.onClose}>
aria-labelledby="modal-title" <DialogContent>
role="dialog"
aria-modal="true">
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true"></div>
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
&#8203;
</span>
<div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
<div className="mb-4 sm:flex sm:items-start"> <div className="mb-4 sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-neutral-100 sm:mx-0 sm:h-10 sm:w-10"> <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
<UsersIcon className="h-6 w-6 text-neutral-900" /> <UsersIcon className="text-brandcontrast h-6 w-6" />
</div> </div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title"> <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@ -76,17 +67,21 @@ export default function TeamCreate(props: Props) {
/> />
</div> </div>
{errorMessage && <Alert severity="error" title={errorMessage} />} {errorMessage && <Alert severity="error" title={errorMessage} />}
<div className="mt-5 flex flex-row-reverse sm:mt-4"> <DialogFooter>
<button type="submit" className="btn btn-primary"> <Button type="button" color="secondary" onClick={props.onClose}>
{t("create_team")}
</button>
<button onClick={props.onClose} type="button" className="btn btn-white ltr:mr-2">
{t("cancel")} {t("cancel")}
</button> </Button>
</div> <Button
type="submit"
color="primary"
className="ltr:ml-2 rtl:mr-2"
data-testid="create-new-team-button">
{t("create_team")}
</Button>
</DialogFooter>
</form> </form>
</div> </DialogContent>
</div> </Dialog>
</div> </>
); );
} }

22
apps/web/components/ui/ModalContainer.tsx
View file

@ -1,29 +1,24 @@
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
interface Props extends React.PropsWithChildren<any> { interface Props extends React.PropsWithChildren<any> {
wide?: boolean; wide?: boolean;
scroll?: boolean; scroll?: boolean;
noPadding?: boolean; noPadding?: boolean;
isOpen: boolean;
onExit: () => void;
} }
export default function ModalContainer(props: Props) { export default function ModalContainer(props: Props) {
return ( return (
<div
className="fixed inset-0 z-50 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"> <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div <Dialog open={props.isOpen} onOpenChange={props.onExit}>
className="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity" <DialogContent>
aria-hidden="true"></div>
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
&#8203;
</span>
<div <div
className={classNames( className={classNames(
"min-w-96 inline-block transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:p-6 sm:align-middle", "inline-block transform bg-white text-left align-bottom transition-all sm:align-middle",
{ {
"sm:w-full sm:max-w-lg ": !props.wide, "sm:w-full sm:max-w-lg ": !props.wide,
"sm:w-4xl sm:max-w-4xl": props.wide, "sm:w-4xl sm:max-w-4xl": props.wide,
@ -33,7 +28,8 @@ export default function ModalContainer(props: Props) {
)}> )}>
{props.children} {props.children}
</div> </div>
</div> </DialogContent>
</Dialog>
</div> </div>
); );
} }

1
apps/web/components/ui/Scheduler.tsx
View file

@ -124,6 +124,7 @@ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone
</div> </div>
{editSchedule >= 0 && ( {editSchedule >= 0 && (
<SetTimesModal <SetTimesModal
isOpen={true}
startTime={ startTime={
openingHours[editSchedule] openingHours[editSchedule]
? new Date(openingHours[editSchedule].startTime).getUTCHours() * 60 + ? new Date(openingHours[editSchedule].startTime).getUTCHours() * 60 +

36
apps/web/components/ui/modal/SetTimesModal.tsx
View file

@ -3,14 +3,15 @@ import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat"; import customParseFormat from "dayjs/plugin/customParseFormat";
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import showToast from "@calcom/lib/notification"; import showToast from "@calcom/lib/notification";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
import { useLocale } from "@lib/hooks/useLocale";
dayjs.extend(customParseFormat); dayjs.extend(customParseFormat);
interface SetTimesModalProps { interface SetTimesModalProps {
isOpen: boolean;
startTime: number; startTime: number;
endTime: number; endTime: number;
onChange: (times: { startTime: number; endTime: number }) => void; onChange: (times: { startTime: number; endTime: number }) => void;
@ -86,21 +87,8 @@ export default function SetTimesModal(props: SetTimesModalProps) {
)(STEP); )(STEP);
return ( return (
<div <Dialog open={props.isOpen} onOpenChange={props.onExit}>
className="fixed inset-0 z-50 overflow-y-auto" <DialogContent>
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true"></div>
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
&#8203;
</span>
<div className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
<div className="mb-4 sm:flex sm:items-start"> <div className="mb-4 sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"> <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
<ClockIcon className="h-6 w-6 text-black" /> <ClockIcon className="h-6 w-6 text-black" />
@ -201,7 +189,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
/> />
</div> </div>
</div> </div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <DialogFooter>
<Button <Button
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -212,10 +200,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
const enteredEndMins = parseInt(endMinsRef.current.value); const enteredEndMins = parseInt(endMinsRef.current.value);
if ( if (
isValidTime( isValidTime(enteredStartHours * 60 + enteredStartMins, enteredEndHours * 60 + enteredEndMins)
enteredStartHours * 60 + enteredStartMins,
enteredEndHours * 60 + enteredEndMins
)
) { ) {
props.onChange({ props.onChange({
startTime: enteredStartHours * 60 + enteredStartMins, startTime: enteredStartHours * 60 + enteredStartMins,
@ -230,9 +215,8 @@ export default function SetTimesModal(props: SetTimesModalProps) {
<Button onClick={props.onExit} type="button" color="secondary" className="ltr:mr-2"> <Button onClick={props.onExit} type="button" color="secondary" className="ltr:mr-2">
{t("cancel")} {t("cancel")}
</Button> </Button>
</div> </DialogFooter>
</div> </DialogContent>
</div> </Dialog>
</div>
); );
} }

31
apps/web/ee/components/stripe/PaymentPage.tsx
View file

@ -8,11 +8,12 @@ import Head from "next/head";
import React, { FC, useEffect, useState } from "react"; import React, { FC, useEffect, useState } from "react";
import { FormattedNumber, IntlProvider } from "react-intl"; import { FormattedNumber, IntlProvider } from "react-intl";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import getStripe from "@calcom/stripe/client"; import getStripe from "@calcom/stripe/client";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
import PaymentComponent from "@ee/components/stripe/Payment"; import PaymentComponent from "@ee/components/stripe/Payment";
import { PaymentPageProps } from "@ee/pages/payment/[uid]"; import { PaymentPageProps } from "@ee/pages/payment/[uid]";
import { useLocale } from "@lib/hooks/useLocale";
import useTheme from "@lib/hooks/useTheme"; import useTheme from "@lib/hooks/useTheme";
import { isBrowserLocale24h } from "@lib/timeFormat"; import { isBrowserLocale24h } from "@lib/timeFormat";
@ -43,17 +44,11 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<main className="mx-auto max-w-3xl py-24"> <main className="mx-auto max-w-3xl py-24">
<div className="fixed inset-0 z-50 overflow-y-auto"> <Dialog defaultOpen={true}>
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"> <DialogContent
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true"> onInteractOutside={(e) => {
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"> e.preventDefault();
&#8203; }}>
</span>
<div
className="inline-block transform overflow-hidden rounded-sm border border-neutral-200 bg-white px-8 pt-5 pb-4 text-left align-bottom transition-all dark:border-neutral-700 dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:py-6 sm:align-middle"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline">
<div> <div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"> <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<CreditCardIcon className="h-8 w-8 text-green-600" /> <CreditCardIcon className="h-8 w-8 text-green-600" />
@ -65,9 +60,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
{t("payment")} {t("payment")}
</h3> </h3>
<div className="mt-3"> <div className="mt-3">
<p className="text-sm text-neutral-600 dark:text-gray-300"> <p className="text-sm text-neutral-600 dark:text-gray-300">{t("pay_later_instructions")}</p>
{t("pay_later_instructions")}
</p>
</div> </div>
<div className="mt-4 grid grid-cols-3 border-t border-b py-4 text-left text-gray-700 dark:border-gray-900 dark:text-gray-300"> <div className="mt-4 grid grid-cols-3 border-t border-b py-4 text-left text-gray-700 dark:border-gray-900 dark:text-gray-300">
<div className="font-medium">{t("what")}</div> <div className="font-medium">{t("what")}</div>
@ -100,6 +93,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-5 sm:mt-6">
<div> <div>
{props.payment.success && !props.payment.refunded && ( {props.payment.success && !props.payment.refunded && (
<div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("paid")}</div> <div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("paid")}</div>
@ -118,15 +112,18 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
<div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("refunded")}</div> <div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("refunded")}</div>
)} )}
</div> </div>
<div className="flex justify-center">
<DialogFooter>
{!props.profile.hideBranding && ( {!props.profile.hideBranding && (
<div className="mt-4 border-t pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white"> <div className="mt-4 border-t pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white">
<a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a> <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
</div> </div>
)} )}
</DialogFooter>
</div> </div>
</div> </div>
</div> </DialogContent>
</div> </Dialog>
</main> </main>
</div> </div>
) : null; ) : null;

47
apps/web/pages/cancel/[uid].tsx
View file

@ -5,6 +5,7 @@ import { useRouter } from "next/router";
import { useState } from "react"; import { useState } from "react";
import { Button } from "@calcom/ui/Button"; import { Button } from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import { TextField } from "@calcom/ui/form/fields"; import { TextField } from "@calcom/ui/form/fields";
import { asStringOrUndefined } from "@lib/asStringOrNull"; import { asStringOrUndefined } from "@lib/asStringOrNull";
@ -38,26 +39,18 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
/> />
<CustomBranding lightVal={props.profile?.brandColor} darkVal={props.profile?.darkBrandColor} /> <CustomBranding lightVal={props.profile?.brandColor} darkVal={props.profile?.darkBrandColor} />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<div className="fixed inset-0 z-50 overflow-y-auto"> <Dialog defaultOpen={true}>
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"> <DialogContent
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true"> onInteractOutside={(e) => {
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"> e.preventDefault();
&#8203; }}>
</span>
<div
className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline">
{error && ( {error && (
<div> <div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100"> <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<XIcon className="h-6 w-6 text-red-600" /> <XIcon className="h-6 w-6 text-red-600" />
</div> </div>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-5 flex justify-center">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title"> <DialogHeader title={error} />
{error}
</h3>
</div> </div>
</div> </div>
)} )}
@ -67,11 +60,9 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100"> <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<XIcon className="h-6 w-6 text-red-600" /> <XIcon className="h-6 w-6 text-red-600" />
</div> </div>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-5 text-center">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline"> <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
{props.cancellationAllowed {props.cancellationAllowed ? t("really_cancel_booking") : t("cannot_cancel_booking")}
? t("really_cancel_booking")
: t("cannot_cancel_booking")}
</h3> </h3>
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
@ -79,9 +70,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
</p> </p>
</div> </div>
<div className="mt-4 border-t border-b py-4"> <div className="mt-4 border-t border-b py-4">
<h2 className="font-cal mb-2 text-lg font-medium text-gray-600"> <DialogHeader title={props.booking?.title} />
{props.booking?.title}
</h2>
<p className="text-gray-500"> <p className="text-gray-500">
<CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" /> <CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
{dayjs(props.booking?.startTime).format( {dayjs(props.booking?.startTime).format(
@ -100,7 +89,8 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
onChange={(e) => setCancellationReason(e.target.value)} onChange={(e) => setCancellationReason(e.target.value)}
className="mb-5 sm:mb-6" className="mb-5 sm:mb-6"
/> />
<div className="space-x-2 text-center rtl:space-x-reverse"> <div className="flex justify-center">
<DialogFooter>
<Button color="secondary" onClick={() => router.push("/reschedule/" + uid)}> <Button color="secondary" onClick={() => router.push("/reschedule/" + uid)}>
{t("reschedule_this")} {t("reschedule_this")}
</Button> </Button>
@ -108,16 +98,13 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
data-testid="cancel" data-testid="cancel"
onClick={async () => { onClick={async () => {
setLoading(true); setLoading(true);
const payload = { const payload = {
uid: uid, uid: uid,
reason: cancellationReason, reason: cancellationReason,
}; };
telemetry.withJitsu((jitsu) => telemetry.withJitsu((jitsu) =>
jitsu.track(telemetryEventTypes.bookingCancelled, collectPageParameters()) jitsu.track(telemetryEventTypes.bookingCancelled, collectPageParameters())
); );
const res = await fetch("/api/cancel", { const res = await fetch("/api/cancel", {
body: JSON.stringify(payload), body: JSON.stringify(payload),
headers: { headers: {
@ -125,7 +112,6 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
}, },
method: "DELETE", method: "DELETE",
}); });
if (res.status >= 200 && res.status < 300) { if (res.status >= 200 && res.status < 300) {
await router.push( await router.push(
`/cancel/success?name=${props.profile.name}&title=${ `/cancel/success?name=${props.profile.name}&title=${
@ -146,15 +132,14 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
loading={loading}> loading={loading}>
{t("cancel_event")} {t("cancel_event")}
</Button> </Button>
</DialogFooter>
</div> </div>
</div> </div>
)} )}
</> </>
)} )}
</div> </DialogContent>
</div> </Dialog>
</div>
</div>
</main> </main>
</div> </div>
); );

46
apps/web/pages/cancel/success.tsx
View file

@ -3,9 +3,9 @@ import { ArrowRightIcon } from "@heroicons/react/solid";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import { useLocale } from "@lib/hooks/useLocale";
import { HeadSeo } from "@components/seo/head-seo"; import { HeadSeo } from "@components/seo/head-seo";
@ -23,46 +23,34 @@ export default function CancelSuccess() {
description={`${t("cancelled")} ${title} | ${name}`} description={`${t("cancelled")} ${title} | ${name}`}
/> />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<div className="fixed inset-0 z-50 overflow-y-auto"> <Dialog defaultOpen={true}>
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"> <DialogContent
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true"> onInteractOutside={(e) => {
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"> e.preventDefault();
&#8203; }}>
</span>
<div
className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"> <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<CheckIcon className="h-6 w-6 text-green-600" /> <CheckIcon className="h-6 w-6 text-green-600" />
</div> </div>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-5 flex justify-center">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline"> <DialogHeader title={t("cancellation_successful")} />
{t("cancellation_successful")} </div>
</h3>
{!loading && !session?.user && ( {!loading && !session?.user && (
<div className="mt-2"> <div className="-mt-6 flex justify-center">
<p className="text-sm text-gray-500">{t("free_to_pick_another_event_type")}</p> <p className="text-center text-sm text-gray-500">{t("free_to_pick_another_event_type")}</p>
</div> </div>
)} )}
</div> <div className="flex justify-center">
</div> <DialogFooter>
<div className="mt-5 text-center sm:mt-6">
<div className="mt-5">
{!loading && !session?.user && <Button href={eventPage as string}>Pick another</Button>} {!loading && !session?.user && <Button href={eventPage as string}>Pick another</Button>}
{!loading && session?.user && ( {!loading && session?.user && (
<Button data-testid="back-to-bookings" href="/bookings" EndIcon={ArrowRightIcon}> <Button data-testid="back-to-bookings" href="/bookings" EndIcon={ArrowRightIcon}>
{t("back_to_bookings")} {t("back_to_bookings")}
</Button> </Button>
)} )}
</DialogFooter>
</div> </div>
</div> </DialogContent>
</div> </Dialog>
</div>
</div>
</div>
</main> </main>
</div> </div>
); );

6
apps/web/pages/settings/teams/[id]/index.tsx
View file

@ -142,7 +142,11 @@ export function TeamSettingsPage() {
</div> </div>
</div> </div>
{showMemberInvitationModal && ( {showMemberInvitationModal && (
<MemberInvitationModal team={team} onExit={() => setShowMemberInvitationModal(false)} /> <MemberInvitationModal
isOpen={showMemberInvitationModal}
team={team}
onExit={() => setShowMemberInvitationModal(false)}
/>
)} )}
</> </>
)} )}

4
apps/web/pages/settings/teams/index.tsx
View file

@ -58,7 +58,9 @@ export default function Teams() {
className="my-4" className="my-4"
/> />
)} )}
{showCreateTeamModal && <TeamCreateModal onClose={() => setShowCreateTeamModal(false)} />} {showCreateTeamModal && (
<TeamCreateModal isOpen={showCreateTeamModal} onClose={() => setShowCreateTeamModal(false)} />
)}
<div className={classNames("my-4 flex justify-end", isFreePlan && "opacity-50")}> <div className={classNames("my-4 flex justify-end", isFreePlan && "opacity-50")}>
<Button <Button
disabled={isFreePlan} disabled={isFreePlan}

34
apps/web/pages/success.tsx
View file

@ -11,6 +11,7 @@ import { useRouter } from "next/router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
import { EmailInput } from "@calcom/ui/form/fields"; import { EmailInput } from "@calcom/ui/form/fields";
import { asStringOrThrow, asStringOrNull } from "@lib/asStringOrNull"; import { asStringOrThrow, asStringOrNull } from "@lib/asStringOrNull";
@ -99,28 +100,22 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
/> />
<CustomBranding lightVal={props.profile.brandColor} darkVal={props.profile.darkBrandColor} /> <CustomBranding lightVal={props.profile.brandColor} darkVal={props.profile.darkBrandColor} />
<main className="mx-auto max-w-3xl py-24"> <main className="mx-auto max-w-3xl py-24">
<div className="fixed inset-0 z-50 overflow-y-auto"> <Dialog defaultOpen={true}>
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"> <DialogContent
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true"> onInteractOutside={(e) => {
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"> e.preventDefault();
&#8203; }}>
</span>
<div
className="inline-block transform overflow-hidden rounded-sm border border-neutral-200 bg-white px-8 pt-5 pb-4 text-left align-bottom transition-all dark:border-neutral-700 dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:py-6 sm:align-middle"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"> <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
{!needsConfirmation && <CheckIcon className="h-8 w-8 text-green-600" />} {!needsConfirmation && <CheckIcon className="h-8 w-8 text-green-600" />}
{needsConfirmation && <ClockIcon className="h-8 w-8 text-green-600" />} {needsConfirmation && <ClockIcon className="h-8 w-8 text-green-600" />}
</div> </div>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-5 flex justify-center">
<h3 <h3
className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white" className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
id="modal-headline"> id="modal-headline">
{needsConfirmation ? t("submitted") : t("meeting_is_scheduled")} {needsConfirmation ? t("submitted") : t("meeting_is_scheduled")}
</h3> </h3>
</div>
<div className="mt-3"> <div className="mt-3">
<p className="text-sm text-neutral-600 dark:text-gray-300"> <p className="text-sm text-neutral-600 dark:text-gray-300">
{needsConfirmation {needsConfirmation
@ -157,8 +152,6 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
</> </>
)} )}
</div> </div>
</div>
</div>
{!needsConfirmation && ( {!needsConfirmation && (
<div className="mt-5 flex border-b pt-2 pb-4 text-center dark:border-gray-900 sm:mt-0 sm:pt-4"> <div className="mt-5 flex border-b pt-2 pb-4 text-center dark:border-gray-900 sm:mt-0 sm:pt-4">
<span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50"> <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
@ -174,8 +167,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
.utc() .utc()
.format("YYYYMMDDTHHmmss[Z]")}&text=${eventName}&details=${ .format("YYYYMMDDTHHmmss[Z]")}&text=${eventName}&details=${
props.eventType.description props.eventType.description
}` + }` + (typeof location === "string" ? "&location=" + encodeURIComponent(location) : "")
(typeof location === "string" ? "&location=" + encodeURIComponent(location) : "")
}> }>
<a className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white"> <a className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white">
<svg <svg
@ -258,6 +250,8 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
</div> </div>
</div> </div>
)} )}
<div className="flex justify-center">
<DialogFooter>
{!props.hideBranding && ( {!props.hideBranding && (
<div className="pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white"> <div className="pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white">
<a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a> <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
@ -281,10 +275,10 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
</form> </form>
</div> </div>
)} )}
</DialogFooter>
</div> </div>
</div> </DialogContent>
</div> </Dialog>
</div>
</main> </main>
</div> </div>
)) || )) ||

62
apps/web/pages/video/meeting-ended/[uid].tsx
View file

@ -6,7 +6,9 @@ import { getSession } from "next-auth/react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect } from "react"; import { useEffect } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import prisma from "@lib/prisma"; import prisma from "@lib/prisma";
import { detectBrowserTimeFormat } from "@lib/timeFormat"; import { detectBrowserTimeFormat } from "@lib/timeFormat";
@ -16,6 +18,7 @@ import { HeadSeo } from "@components/seo/head-seo";
export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) { export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) {
const router = useRouter(); const router = useRouter();
const { t } = useLocale();
// if no booking redirectis to the 404 page // if no booking redirectis to the 404 page
const emptyBooking = props.booking === null; const emptyBooking = props.booking === null;
useEffect(() => { useEffect(() => {
@ -28,49 +31,38 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
<div> <div>
<HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} /> <HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<div className="fixed inset-0 z-50 overflow-y-auto"> <Dialog defaultOpen={true}>
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"> <DialogContent
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true"> onInteractOutside={(e) => {
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"> e.preventDefault();
&#8203; }}>
</span> <div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<div
className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<XIcon className="h-6 w-6 text-red-600" /> <XIcon className="h-6 w-6 text-red-600" />
</div> </div>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-5 flex justify-center">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline"> <DialogHeader title={props.booking.title} />
</div>
<h3
className="flex justify-center text-center text-lg font-medium leading-6 text-gray-900"
id="modal-headline">
This meeting is in the past. This meeting is in the past.
</h3> </h3>
</div> <p className="-mt-4 flex justify-center text-sm text-gray-500">
<div className="mt-4 border-t border-b py-4"> <CalendarIcon className="mr-1 inline-block h-4 w-4" />
<h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600"> {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
{props.booking.title}
</h2>
<p className="text-center text-gray-500">
<CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
{dayjs(props.booking.startTime).format(
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
)}
</p> </p>
</div> <p className="flex justify-center text-center text-sm text-gray-500">
</div> This meeting will be accessible 60 minutes in advance.
<div className="mt-5 text-center sm:mt-6"> </p>
<div className="mt-5"> <div className="flex justify-center">
<DialogFooter>
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}> <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
Go back home {t("go_back_home")}
</Button> </Button>
</DialogFooter>
</div> </div>
</div> </DialogContent>
</div> </Dialog>
</div>
</div>
</div>
</main> </main>
</div> </div>
); );

61
apps/web/pages/video/meeting-not-started/[uid].tsx
View file

@ -6,7 +6,9 @@ import { getSession } from "next-auth/react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect } from "react"; import { useEffect } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import prisma from "@lib/prisma"; import prisma from "@lib/prisma";
import { detectBrowserTimeFormat } from "@lib/timeFormat"; import { detectBrowserTimeFormat } from "@lib/timeFormat";
@ -16,7 +18,7 @@ import { HeadSeo } from "@components/seo/head-seo";
export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) { export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
const router = useRouter(); const router = useRouter();
const { t } = useLocale();
//if no booking redirectis to the 404 page //if no booking redirectis to the 404 page
const emptyBooking = props.booking === null; const emptyBooking = props.booking === null;
useEffect(() => { useEffect(() => {
@ -29,54 +31,33 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
<div> <div>
<HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} /> <HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<div className="fixed inset-0 z-50 overflow-y-auto"> <Dialog defaultOpen={true}>
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"> <DialogContent
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true"> onInteractOutside={(e) => {
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"> e.preventDefault();
&#8203; }}>
</span> <div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<div
className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<XIcon className="h-6 w-6 text-red-600" /> <XIcon className="h-6 w-6 text-red-600" />
</div> </div>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-5 flex justify-center">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline"> <DialogHeader title={props.booking.title} />
This meeting has not started yet
</h3>
</div> </div>
<div className="mt-4 border-t border-b py-4"> <p className="-mt-4 flex items-center justify-center text-sm text-gray-500">
<h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600"> <CalendarIcon className="mr-1 inline-block h-4 w-4" />
{props.booking.title} {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
</h2>
<p className="text-center text-gray-500">
<CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
{dayjs(props.booking.startTime).format(
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
)}
</p> </p>
</div> <p className="flex justify-center text-center text-sm text-gray-500">
<div className="mt-3 text-center sm:mt-5">
<p className="text-sm text-gray-500">
This meeting will be accessible 60 minutes in advance. This meeting will be accessible 60 minutes in advance.
</p> </p>
</div> <div className="flex justify-center">
</div> <DialogFooter>
<div className="mt-5 text-center sm:mt-6">
<div className="mt-5">
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}> <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
Go back home {t("go_back_home")}
</Button> </Button>
</DialogFooter>
</div> </div>
</div> </DialogContent>
</div> </Dialog>
</div>
</div>
</div>
</main> </main>
</div> </div>
); );

46
apps/web/pages/video/no-meeting-found.tsx
View file

@ -1,9 +1,9 @@
import { XIcon } from "@heroicons/react/outline"; import { XIcon } from "@heroicons/react/outline";
import { ArrowRightIcon } from "@heroicons/react/solid"; import { ArrowRightIcon } from "@heroicons/react/solid";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button"; import Button from "@calcom/ui/Button";
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import { useLocale } from "@lib/hooks/useLocale";
import { HeadSeo } from "@components/seo/head-seo"; import { HeadSeo } from "@components/seo/head-seo";
@ -14,41 +14,27 @@ export default function NoMeetingFound() {
<div> <div>
<HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} /> <HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} />
<main className="mx-auto my-24 max-w-3xl"> <main className="mx-auto my-24 max-w-3xl">
<div className="fixed inset-0 z-50 overflow-y-auto"> <Dialog defaultOpen={true}>
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"> <DialogContent
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true"> onInteractOutside={(e) => {
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"> e.preventDefault();
&#8203; }}>
</span> <div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<div
className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline">
<div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
<XIcon className="h-6 w-6 text-red-600" /> <XIcon className="h-6 w-6 text-red-600" />
</div> </div>
<div className="mt-3 text-center sm:mt-5"> <div className="mt-5 flex justify-center">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline"> <DialogHeader title={t("no_meeting_found")} />
{t("no_meeting_found")}
</h3>
</div> </div>
<div className="mt-2"> <p className="-mt-4 text-center text-sm text-gray-500">{t("no_meeting_found_description")}</p>
<p className="text-center text-sm text-gray-500">{t("no_meeting_found_description")}</p> <div className="flex justify-center">
</div> <DialogFooter>
</div>
<div className="mt-5 text-center sm:mt-6">
<div className="mt-5">
<Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}> <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
{t("go_back_home")} {t("go_back_home")}
</Button> </Button>
</DialogFooter>
</div> </div>
</div> </DialogContent>
</div> </Dialog>
</div>
</div>
</div>
</main> </main>
</div> </div>
); );

2
packages/ui/Dialog.tsx
View file

@ -63,7 +63,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
<DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" /> <DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
<DialogPrimitive.Content <DialogPrimitive.Content
{...props} {...props}
className="fixed left-1/2 top-1/2 z-[9999999999] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl sm:w-full sm:max-w-lg sm:align-middle" className="fixed left-1/2 top-1/2 z-[9999999999] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl focus-visible:outline-none sm:w-full sm:max-w-[35rem] sm:align-middle"
ref={forwardedRef}> ref={forwardedRef}>
{children} {children}
</DialogPrimitive.Content> </DialogPrimitive.Content>