diff --git a/apps/web/components/team/MemberChangeRoleModal.tsx b/apps/web/components/team/MemberChangeRoleModal.tsx index e862155a..48eda0a9 100644 --- a/apps/web/components/team/MemberChangeRoleModal.tsx +++ b/apps/web/components/team/MemberChangeRoleModal.tsx @@ -2,14 +2,15 @@ import { MembershipRole } from "@prisma/client"; import { useState } from "react"; import React, { SyntheticEvent } from "react"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; import Button from "@calcom/ui/Button"; -import { useLocale } from "@lib/hooks/useLocale"; import { trpc } from "@lib/trpc"; import ModalContainer from "@components/ui/ModalContainer"; export default function MemberChangeRoleModal(props: { + isOpen: boolean; memberId: number; teamId: number; initialRole: MembershipRole; @@ -41,7 +42,7 @@ export default function MemberChangeRoleModal(props: { } return ( - + <>
diff --git a/apps/web/components/team/MemberInvitationModal.tsx b/apps/web/components/team/MemberInvitationModal.tsx index 63c6bf4a..86303d51 100644 --- a/apps/web/components/team/MemberInvitationModal.tsx +++ b/apps/web/components/team/MemberInvitationModal.tsx @@ -5,13 +5,20 @@ import { useState } from "react"; import React, { SyntheticEvent } from "react"; import Button from "@calcom/ui/Button"; +import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog"; import { TextField } from "@calcom/ui/form/fields"; import { useLocale } from "@lib/hooks/useLocale"; import { TeamWithMembers } from "@lib/queries/teams"; 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 { t, i18n } = useLocale(); const utils = trpc.useContext(); @@ -48,102 +55,88 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n } return ( -
-
- - - - -
-
-
- -
-
- -
-

{t("invite_new_team_member")}

-
+ + +
+
+ +
+
+ +
+

{t("invite_new_team_member")}

-
-
- -
- - -
-
-
- -
-
- -
-
-
-
-
- {errorMessage && ( -

- Error: - {errorMessage} -

- )} -
- - -
-
-
-
+
+
+ +
+ + +
+
+
+ +
+
+ +
+
+
+
+
+ {errorMessage && ( +

+ Error: + {errorMessage} +

+ )} + + + + +
+ + ); } diff --git a/apps/web/components/team/MemberListItem.tsx b/apps/web/components/team/MemberListItem.tsx index 19d1a791..57a36a9c 100644 --- a/apps/web/components/team/MemberListItem.tsx +++ b/apps/web/components/team/MemberListItem.tsx @@ -164,6 +164,7 @@ export default function MemberListItem(props: Props) {
{showChangeMemberRoleModal && ( )} {showTeamAvailabilityModal && ( - + setShowTeamAvailabilityModal(false)}> -
+
{props.team.membership.role !== MembershipRole.MEMBER && ( diff --git a/apps/web/components/team/TeamCreateModal.tsx b/apps/web/components/team/TeamCreateModal.tsx index 23b8a5d2..66a1dfa7 100644 --- a/apps/web/components/team/TeamCreateModal.tsx +++ b/apps/web/components/team/TeamCreateModal.tsx @@ -1,12 +1,15 @@ import { UsersIcon } from "@heroicons/react/outline"; import { useRef, useState } from "react"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { Button } from "@calcom/ui"; 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"; interface Props { + isOpen: boolean; onClose: () => void; } @@ -32,24 +35,12 @@ export default function TeamCreate(props: Props) { }; return ( -
-
- - - - -
+ <> + +
-
- +
+
{errorMessage && } -
- - -
+ + + -
-
-
+ + + ); } diff --git a/apps/web/components/ui/ModalContainer.tsx b/apps/web/components/ui/ModalContainer.tsx index 86e92771..c348a58e 100644 --- a/apps/web/components/ui/ModalContainer.tsx +++ b/apps/web/components/ui/ModalContainer.tsx @@ -1,39 +1,35 @@ import classNames from "classnames"; import React from "react"; +import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog"; + interface Props extends React.PropsWithChildren { wide?: boolean; scroll?: boolean; noPadding?: boolean; + isOpen: boolean; + onExit: () => void; } export default function ModalContainer(props: Props) { return ( -
-
- - -
- {props.children} -
-
+
+ + +
+ {props.children} +
+ +
); } diff --git a/apps/web/components/ui/Scheduler.tsx b/apps/web/components/ui/Scheduler.tsx index 19ef56dd..e86bbb75 100644 --- a/apps/web/components/ui/Scheduler.tsx +++ b/apps/web/components/ui/Scheduler.tsx @@ -124,6 +124,7 @@ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone
{editSchedule >= 0 && ( void; @@ -86,153 +87,136 @@ export default function SetTimesModal(props: SetTimesModalProps) { )(STEP); return ( -
-
- - - - -
-
-
- -
-
- -
-

{t("set_work_schedule")}

-
-
+ + +
+
+
-
- -
- - setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef)} - /> +
+ +
+

{t("set_work_schedule")}

- : -
- - setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef)} - /> -
-
-
- -
- - { - if (endHoursRef.current.value === "24") endMinsRef.current.value = "0"; - setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef); - setEndMinuteDisable(endHoursRef.current.value === "24"); - }} - /> -
- : -
- - setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef)} - /> -
-
-
- -
-
-
+
+ +
+ + setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef)} + /> +
+ : +
+ + setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef)} + /> +
+
+
+ +
+ + { + if (endHoursRef.current.value === "24") endMinsRef.current.value = "0"; + setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef); + setEndMinuteDisable(endHoursRef.current.value === "24"); + }} + /> +
+ : +
+ + setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef)} + /> +
+
+ + + + + + ); } diff --git a/apps/web/ee/components/stripe/PaymentPage.tsx b/apps/web/ee/components/stripe/PaymentPage.tsx index e4e0c897..e80a79ba 100644 --- a/apps/web/ee/components/stripe/PaymentPage.tsx +++ b/apps/web/ee/components/stripe/PaymentPage.tsx @@ -8,11 +8,12 @@ import Head from "next/head"; import React, { FC, useEffect, useState } from "react"; import { FormattedNumber, IntlProvider } from "react-intl"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; import getStripe from "@calcom/stripe/client"; +import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog"; import PaymentComponent from "@ee/components/stripe/Payment"; import { PaymentPageProps } from "@ee/pages/payment/[uid]"; -import { useLocale } from "@lib/hooks/useLocale"; import useTheme from "@lib/hooks/useTheme"; import { isBrowserLocale24h } from "@lib/timeFormat"; @@ -43,90 +44,86 @@ const PaymentPage: FC = (props) => {
-
-
-
) : null; diff --git a/apps/web/pages/cancel/[uid].tsx b/apps/web/pages/cancel/[uid].tsx index 3f64966e..feec8ff2 100644 --- a/apps/web/pages/cancel/[uid].tsx +++ b/apps/web/pages/cancel/[uid].tsx @@ -5,6 +5,7 @@ import { useRouter } from "next/router"; import { useState } from "react"; import { Button } from "@calcom/ui/Button"; +import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog"; import { TextField } from "@calcom/ui/form/fields"; import { asStringOrUndefined } from "@lib/asStringOrNull"; @@ -38,123 +39,107 @@ export default function Type(props: inferSSRProps) { />
-
-
-
); diff --git a/apps/web/pages/cancel/success.tsx b/apps/web/pages/cancel/success.tsx index f50bf12b..a744df7f 100644 --- a/apps/web/pages/cancel/success.tsx +++ b/apps/web/pages/cancel/success.tsx @@ -3,9 +3,9 @@ import { ArrowRightIcon } from "@heroicons/react/solid"; import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; import Button from "@calcom/ui/Button"; - -import { useLocale } from "@lib/hooks/useLocale"; +import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog"; import { HeadSeo } from "@components/seo/head-seo"; @@ -23,46 +23,34 @@ export default function CancelSuccess() { description={`${t("cancelled")} ${title} | ${name}`} />
-
-
- -
+
+ +
+ {!loading && !session?.user && ( +
+

{t("free_to_pick_another_event_type")}

+
+ )} +
+ + {!loading && !session?.user && } + {!loading && session?.user && ( + + )} + +
+ +
); diff --git a/apps/web/pages/settings/teams/[id]/index.tsx b/apps/web/pages/settings/teams/[id]/index.tsx index d15be660..1ced8949 100644 --- a/apps/web/pages/settings/teams/[id]/index.tsx +++ b/apps/web/pages/settings/teams/[id]/index.tsx @@ -142,7 +142,11 @@ export function TeamSettingsPage() {
{showMemberInvitationModal && ( - setShowMemberInvitationModal(false)} /> + setShowMemberInvitationModal(false)} + /> )} )} diff --git a/apps/web/pages/settings/teams/index.tsx b/apps/web/pages/settings/teams/index.tsx index a0346707..034f77c1 100644 --- a/apps/web/pages/settings/teams/index.tsx +++ b/apps/web/pages/settings/teams/index.tsx @@ -58,7 +58,9 @@ export default function Teams() { className="my-4" /> )} - {showCreateTeamModal && setShowCreateTeamModal(false)} />} + {showCreateTeamModal && ( + setShowCreateTeamModal(false)} /> + )}
)) || diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx index 0484b979..6a504d8e 100644 --- a/apps/web/pages/video/meeting-ended/[uid].tsx +++ b/apps/web/pages/video/meeting-ended/[uid].tsx @@ -6,7 +6,9 @@ import { getSession } from "next-auth/react"; import { useRouter } from "next/router"; import { useEffect } from "react"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; import Button from "@calcom/ui/Button"; +import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog"; import prisma from "@lib/prisma"; import { detectBrowserTimeFormat } from "@lib/timeFormat"; @@ -16,6 +18,7 @@ import { HeadSeo } from "@components/seo/head-seo"; export default function MeetingUnavailable(props: inferSSRProps) { const router = useRouter(); + const { t } = useLocale(); // if no booking redirectis to the 404 page const emptyBooking = props.booking === null; useEffect(() => { @@ -28,49 +31,38 @@ export default function MeetingUnavailable(props: inferSSRProps
-
-
- -
+
+ +
+ +

+ + {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")} +

+

+ This meeting will be accessible 60 minutes in advance. +

+
+ + + +
+ +
); diff --git a/apps/web/pages/video/meeting-not-started/[uid].tsx b/apps/web/pages/video/meeting-not-started/[uid].tsx index c3ad5686..765af769 100644 --- a/apps/web/pages/video/meeting-not-started/[uid].tsx +++ b/apps/web/pages/video/meeting-not-started/[uid].tsx @@ -6,7 +6,9 @@ import { getSession } from "next-auth/react"; import { useRouter } from "next/router"; import { useEffect } from "react"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; import Button from "@calcom/ui/Button"; +import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog"; import prisma from "@lib/prisma"; import { detectBrowserTimeFormat } from "@lib/timeFormat"; @@ -16,7 +18,7 @@ import { HeadSeo } from "@components/seo/head-seo"; export default function MeetingNotStarted(props: inferSSRProps) { const router = useRouter(); - + const { t } = useLocale(); //if no booking redirectis to the 404 page const emptyBooking = props.booking === null; useEffect(() => { @@ -29,54 +31,33 @@ export default function MeetingNotStarted(props: inferSSRProps
-
-
- -
+
+ +
+

+ + {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")} +

+

+ This meeting will be accessible 60 minutes in advance. +

+
+ + + +
+ +
); diff --git a/apps/web/pages/video/no-meeting-found.tsx b/apps/web/pages/video/no-meeting-found.tsx index c7685cec..c048e392 100644 --- a/apps/web/pages/video/no-meeting-found.tsx +++ b/apps/web/pages/video/no-meeting-found.tsx @@ -1,9 +1,9 @@ import { XIcon } from "@heroicons/react/outline"; import { ArrowRightIcon } from "@heroicons/react/solid"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; import Button from "@calcom/ui/Button"; - -import { useLocale } from "@lib/hooks/useLocale"; +import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog"; import { HeadSeo } from "@components/seo/head-seo"; @@ -14,41 +14,27 @@ export default function NoMeetingFound() {
-
-
- -
+
+ +
+

{t("no_meeting_found_description")}

+
+ + + +
+ +
); diff --git a/packages/ui/Dialog.tsx b/packages/ui/Dialog.tsx index 7d305beb..277756d3 100644 --- a/packages/ui/Dialog.tsx +++ b/packages/ui/Dialog.tsx @@ -63,7 +63,7 @@ export const DialogContent = React.forwardRef {children}