From e59d29a42963fd99cedab4b6d4527fe7280b9455 Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
Date: Fri, 18 Mar 2022 15:25:02 +0530
Subject: [PATCH] reverts to before dialog change state (#2195)

---
 apps/web/pages/cancel/[uid].tsx               | 211 ++++++++++--------
 apps/web/pages/cancel/success.tsx             |  65 +++---
 apps/web/pages/video/meeting-ended/[uid].tsx  |  76 ++++---
 .../pages/video/meeting-not-started/[uid].tsx |  77 ++++---
 apps/web/pages/video/no-meeting-found.tsx     |  55 +++--
 5 files changed, 275 insertions(+), 209 deletions(-)

diff --git a/apps/web/pages/cancel/[uid].tsx b/apps/web/pages/cancel/[uid].tsx
index feec8ff2..3f64966e 100644
--- a/apps/web/pages/cancel/[uid].tsx
+++ b/apps/web/pages/cancel/[uid].tsx
@@ -5,7 +5,6 @@ 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";
@@ -39,107 +38,123 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
       />
       <CustomBranding lightVal={props.profile?.brandColor} darkVal={props.profile?.darkBrandColor} />
       <main className="mx-auto my-24 max-w-3xl">
-        <Dialog defaultOpen={true}>
-          <DialogContent
-            onInteractOutside={(e) => {
-              e.preventDefault();
-            }}>
-            {error && (
-              <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" />
-                </div>
-                <div className="mt-5 flex justify-center">
-                  <DialogHeader title={error} />
-                </div>
-              </div>
-            )}
-            {!error && (
-              <>
-                <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" />
-                  </div>
-                  <div className="mt-5 text-center">
-                    <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
-                      {props.cancellationAllowed ? t("really_cancel_booking") : t("cannot_cancel_booking")}
-                    </h3>
-                    <div className="mt-2">
-                      <p className="text-sm text-gray-500">
-                        {props.cancellationAllowed ? t("reschedule_instead") : t("event_is_in_the_past")}
-                      </p>
+        <div className="fixed inset-0 z-50 overflow-y-auto">
+          <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 my-4 transition-opacity sm:my-0" aria-hidden="true">
+              <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-sm sm:p-6 sm:align-middle"
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="modal-headline">
+                {error && (
+                  <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" />
                     </div>
-                    <div className="mt-4 border-t border-b py-4">
-                      <DialogHeader title={props.booking?.title} />
-                      <p className="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>
-                    </div>
-                  </div>
-                </div>
-                {props.cancellationAllowed && (
-                  <div className="mt-5 sm:mt-6">
-                    <TextField
-                      name={t("cancellation_reason")}
-                      placeholder={t("cancellation_reason_placeholder")}
-                      value={cancellationReason}
-                      onChange={(e) => setCancellationReason(e.target.value)}
-                      className="mb-5 sm:mb-6"
-                    />
-                    <div className="flex justify-center">
-                      <DialogFooter>
-                        <Button color="secondary" onClick={() => router.push("/reschedule/" + uid)}>
-                          {t("reschedule_this")}
-                        </Button>
-                        <Button
-                          data-testid="cancel"
-                          onClick={async () => {
-                            setLoading(true);
-                            const payload = {
-                              uid: uid,
-                              reason: cancellationReason,
-                            };
-                            telemetry.withJitsu((jitsu) =>
-                              jitsu.track(telemetryEventTypes.bookingCancelled, collectPageParameters())
-                            );
-                            const res = await fetch("/api/cancel", {
-                              body: JSON.stringify(payload),
-                              headers: {
-                                "Content-Type": "application/json",
-                              },
-                              method: "DELETE",
-                            });
-                            if (res.status >= 200 && res.status < 300) {
-                              await router.push(
-                                `/cancel/success?name=${props.profile.name}&title=${
-                                  props.booking.title
-                                }&eventPage=${props.profile.slug}&team=${
-                                  props.booking.eventType?.team ? 1 : 0
-                                }`
-                              );
-                            } else {
-                              setLoading(false);
-                              setError(
-                                `${t("error_with_status_code_occured", { status: res.status })} ${t(
-                                  "please_try_again"
-                                )}`
-                              );
-                            }
-                          }}
-                          loading={loading}>
-                          {t("cancel_event")}
-                        </Button>
-                      </DialogFooter>
+                    <div className="mt-3 text-center sm:mt-5">
+                      <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+                        {error}
+                      </h3>
                     </div>
                   </div>
                 )}
-              </>
-            )}
-          </DialogContent>
-        </Dialog>
+                {!error && (
+                  <>
+                    <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" />
+                      </div>
+                      <div className="mt-3 text-center sm:mt-5">
+                        <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
+                          {props.cancellationAllowed
+                            ? t("really_cancel_booking")
+                            : t("cannot_cancel_booking")}
+                        </h3>
+                        <div className="mt-2">
+                          <p className="text-sm text-gray-500">
+                            {props.cancellationAllowed ? t("reschedule_instead") : t("event_is_in_the_past")}
+                          </p>
+                        </div>
+                        <div className="mt-4 border-t border-b py-4">
+                          <h2 className="font-cal mb-2 text-lg font-medium text-gray-600">
+                            {props.booking?.title}
+                          </h2>
+                          <p className="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>
+                        </div>
+                      </div>
+                    </div>
+                    {props.cancellationAllowed && (
+                      <div className="mt-5 sm:mt-6">
+                        <TextField
+                          name={t("cancellation_reason")}
+                          placeholder={t("cancellation_reason_placeholder")}
+                          value={cancellationReason}
+                          onChange={(e) => setCancellationReason(e.target.value)}
+                          className="mb-5 sm:mb-6"
+                        />
+                        <div className="space-x-2 text-center rtl:space-x-reverse">
+                          <Button color="secondary" onClick={() => router.push("/reschedule/" + uid)}>
+                            {t("reschedule_this")}
+                          </Button>
+                          <Button
+                            data-testid="cancel"
+                            onClick={async () => {
+                              setLoading(true);
+
+                              const payload = {
+                                uid: uid,
+                                reason: cancellationReason,
+                              };
+
+                              telemetry.withJitsu((jitsu) =>
+                                jitsu.track(telemetryEventTypes.bookingCancelled, collectPageParameters())
+                              );
+
+                              const res = await fetch("/api/cancel", {
+                                body: JSON.stringify(payload),
+                                headers: {
+                                  "Content-Type": "application/json",
+                                },
+                                method: "DELETE",
+                              });
+
+                              if (res.status >= 200 && res.status < 300) {
+                                await router.push(
+                                  `/cancel/success?name=${props.profile.name}&title=${
+                                    props.booking.title
+                                  }&eventPage=${props.profile.slug}&team=${
+                                    props.booking.eventType?.team ? 1 : 0
+                                  }`
+                                );
+                              } else {
+                                setLoading(false);
+                                setError(
+                                  `${t("error_with_status_code_occured", { status: res.status })} ${t(
+                                    "please_try_again"
+                                  )}`
+                                );
+                              }
+                            }}
+                            loading={loading}>
+                            {t("cancel_event")}
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
       </main>
     </div>
   );
diff --git a/apps/web/pages/cancel/success.tsx b/apps/web/pages/cancel/success.tsx
index a744df7f..e2c2af98 100644
--- a/apps/web/pages/cancel/success.tsx
+++ b/apps/web/pages/cancel/success.tsx
@@ -5,7 +5,6 @@ import { useRouter } from "next/router";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 
 import { HeadSeo } from "@components/seo/head-seo";
 
@@ -23,34 +22,46 @@ export default function CancelSuccess() {
         description={`${t("cancelled")} ${title} | ${name}`}
       />
       <main className="mx-auto my-24 max-w-3xl">
-        <Dialog defaultOpen={true}>
-          <DialogContent
-            onInteractOutside={(e) => {
-              e.preventDefault();
-            }}>
-            <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" />
-            </div>
-            <div className="mt-5 flex justify-center">
-              <DialogHeader title={t("cancellation_successful")} />
-            </div>
-            {!loading && !session?.user && (
-              <div className="-mt-6 flex justify-center">
-                <p className="text-center text-sm text-gray-500">{t("free_to_pick_another_event_type")}</p>
+        <div className="fixed inset-0 z-50 overflow-y-auto">
+          <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 my-4 transition-opacity sm:my-0" aria-hidden="true">
+              <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-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">
+                    <CheckIcon className="h-6 w-6 text-green-600" />
+                  </div>
+                  <div className="mt-3 text-center sm:mt-5">
+                    <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
+                      {t("cancellation_successful")}
+                    </h3>
+                    {!loading && !session?.user && (
+                      <div className="mt-2">
+                        <p className="text-sm text-gray-500">{t("free_to_pick_another_event_type")}</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <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 data-testid="back-to-bookings" href="/bookings" EndIcon={ArrowRightIcon}>
+                        {t("back_to_bookings")}
+                      </Button>
+                    )}
+                  </div>
+                </div>
               </div>
-            )}
-            <div className="flex justify-center">
-              <DialogFooter>
-                {!loading && !session?.user && <Button href={eventPage as string}>Pick another</Button>}
-                {!loading && session?.user && (
-                  <Button data-testid="back-to-bookings" href="/bookings" EndIcon={ArrowRightIcon}>
-                    {t("back_to_bookings")}
-                  </Button>
-                )}
-              </DialogFooter>
             </div>
-          </DialogContent>
-        </Dialog>
+          </div>
+        </div>
       </main>
     </div>
   );
diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx
index 6a504d8e..0484b979 100644
--- a/apps/web/pages/video/meeting-ended/[uid].tsx
+++ b/apps/web/pages/video/meeting-ended/[uid].tsx
@@ -6,9 +6,7 @@ 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";
@@ -18,7 +16,6 @@ import { HeadSeo } from "@components/seo/head-seo";
 
 export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) {
   const router = useRouter();
-  const { t } = useLocale();
   // if no booking redirectis to the 404 page
   const emptyBooking = props.booking === null;
   useEffect(() => {
@@ -31,38 +28,49 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
       <div>
         <HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
         <main className="mx-auto my-24 max-w-3xl">
-          <Dialog defaultOpen={true}>
-            <DialogContent
-              onInteractOutside={(e) => {
-                e.preventDefault();
-              }}>
-              <div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                <XIcon className="h-6 w-6 text-red-600" />
+          <div className="fixed inset-0 z-50 overflow-y-auto">
+            <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 my-4 transition-opacity sm:my-0" aria-hidden="true">
+                <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-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" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-5">
+                      <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
+                        This meeting is in the past.
+                      </h3>
+                    </div>
+                    <div className="mt-4 border-t border-b py-4">
+                      <h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
+                        {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>
+                    </div>
+                  </div>
+                  <div className="mt-5 text-center sm:mt-6">
+                    <div className="mt-5">
+                      <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
+                        Go back home
+                      </Button>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div className="mt-5 flex justify-center">
-                <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.
-              </h3>
-              <p className="-mt-4 flex justify-center text-sm text-gray-500">
-                <CalendarIcon className="mr-1 inline-block h-4 w-4" />
-                {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
-              </p>
-              <p className="flex justify-center text-center text-sm text-gray-500">
-                This meeting will be accessible 60 minutes in advance.
-              </p>
-              <div className="flex justify-center">
-                <DialogFooter>
-                  <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
-                    {t("go_back_home")}
-                  </Button>
-                </DialogFooter>
-              </div>
-            </DialogContent>
-          </Dialog>
+            </div>
+          </div>
         </main>
       </div>
     );
diff --git a/apps/web/pages/video/meeting-not-started/[uid].tsx b/apps/web/pages/video/meeting-not-started/[uid].tsx
index 765af769..c3ad5686 100644
--- a/apps/web/pages/video/meeting-not-started/[uid].tsx
+++ b/apps/web/pages/video/meeting-not-started/[uid].tsx
@@ -6,9 +6,7 @@ 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";
@@ -18,7 +16,7 @@ import { HeadSeo } from "@components/seo/head-seo";
 
 export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
   const router = useRouter();
-  const { t } = useLocale();
+
   //if no booking redirectis to the 404 page
   const emptyBooking = props.booking === null;
   useEffect(() => {
@@ -31,33 +29,54 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
       <div>
         <HeadSeo title={`Meeting Unavaialble`} description={`Meeting Unavailable`} />
         <main className="mx-auto my-24 max-w-3xl">
-          <Dialog defaultOpen={true}>
-            <DialogContent
-              onInteractOutside={(e) => {
-                e.preventDefault();
-              }}>
-              <div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                <XIcon className="h-6 w-6 text-red-600" />
+          <div className="fixed inset-0 z-50 overflow-y-auto">
+            <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 my-4 transition-opacity sm:my-0" aria-hidden="true">
+                <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-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" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-5">
+                      <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
+                        This meeting has not started yet
+                      </h3>
+                    </div>
+                    <div className="mt-4 border-t border-b py-4">
+                      <h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
+                        {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>
+                    </div>
+                    <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.
+                      </p>
+                    </div>
+                  </div>
+                  <div className="mt-5 text-center sm:mt-6">
+                    <div className="mt-5">
+                      <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
+                        Go back home
+                      </Button>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div className="mt-5 flex justify-center">
-                <DialogHeader title={props.booking.title} />
-              </div>
-              <p className="-mt-4 flex items-center justify-center text-sm text-gray-500">
-                <CalendarIcon className="mr-1 inline-block h-4 w-4" />
-                {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
-              </p>
-              <p className="flex justify-center text-center text-sm text-gray-500">
-                This meeting will be accessible 60 minutes in advance.
-              </p>
-              <div className="flex justify-center">
-                <DialogFooter>
-                  <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
-                    {t("go_back_home")}
-                  </Button>
-                </DialogFooter>
-              </div>
-            </DialogContent>
-          </Dialog>
+            </div>
+          </div>
         </main>
       </div>
     );
diff --git a/apps/web/pages/video/no-meeting-found.tsx b/apps/web/pages/video/no-meeting-found.tsx
index c048e392..f8882dab 100644
--- a/apps/web/pages/video/no-meeting-found.tsx
+++ b/apps/web/pages/video/no-meeting-found.tsx
@@ -3,7 +3,6 @@ import { ArrowRightIcon } from "@heroicons/react/solid";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 
 import { HeadSeo } from "@components/seo/head-seo";
 
@@ -14,27 +13,41 @@ export default function NoMeetingFound() {
     <div>
       <HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} />
       <main className="mx-auto my-24 max-w-3xl">
-        <Dialog defaultOpen={true}>
-          <DialogContent
-            onInteractOutside={(e) => {
-              e.preventDefault();
-            }}>
-            <div className="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-              <XIcon className="h-6 w-6 text-red-600" />
+        <div className="fixed inset-0 z-50 overflow-y-auto">
+          <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 my-4 transition-opacity sm:my-0" aria-hidden="true">
+              <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-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" />
+                  </div>
+                  <div className="mt-3 text-center sm:mt-5">
+                    <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
+                      {t("no_meeting_found")}
+                    </h3>
+                  </div>
+                  <div className="mt-2">
+                    <p className="text-center text-sm text-gray-500">{t("no_meeting_found_description")}</p>
+                  </div>
+                </div>
+                <div className="mt-5 text-center sm:mt-6">
+                  <div className="mt-5">
+                    <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
+                      {t("go_back_home")}
+                    </Button>
+                  </div>
+                </div>
+              </div>
             </div>
-            <div className="mt-5 flex justify-center">
-              <DialogHeader title={t("no_meeting_found")} />
-            </div>
-            <p className="-mt-4 text-center text-sm text-gray-500">{t("no_meeting_found_description")}</p>
-            <div className="flex justify-center">
-              <DialogFooter>
-                <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
-                  {t("go_back_home")}
-                </Button>
-              </DialogFooter>
-            </div>
-          </DialogContent>
-        </Dialog>
+          </div>
+        </div>
       </main>
     </div>
   );