From b8bbfe8a3fe34c05b9771602bbbb54df6c38ccc5 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Mon, 28 Nov 2022 21:22:42 +0530
Subject: [PATCH] fix: ui of reschedule dialog (#5691)

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../components/dialog/RescheduleDialog.tsx    | 88 ++++++++-----------
 1 file changed, 39 insertions(+), 49 deletions(-)

diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index 694e453784..4424653d0f 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -2,17 +2,7 @@ import { Dispatch, SetStateAction, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  Icon,
-  showToast,
-  TextArea,
-} from "@calcom/ui";
+import { Button, Dialog, DialogContent, Icon, showToast, TextArea } from "@calcom/ui";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
@@ -40,44 +30,44 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
 
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
-      <DialogContent>
-        <div className="flex flex-row space-x-3">
-          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-            <Icon.FiClock className="m-auto h-6 w-6" />
-          </div>
-          <div className="pt-1">
-            <DialogHeader title={t("send_reschedule_request")} />
-
-            <p className="-mt-8 text-sm text-gray-500">{t("reschedule_modal_description")}</p>
-            <p className="mt-6 mb-2 text-sm font-bold text-black">
-              {t("reason_for_reschedule_request")}
-              <span className="font-normal text-gray-500"> (Optional)</span>
-            </p>
-            <TextArea
-              data-testid="reschedule_reason"
-              name={t("reschedule_reason")}
-              value={rescheduleReason}
-              onChange={(e) => setRescheduleReason(e.target.value)}
-              className="mb-5 sm:mb-6"
-            />
-
-            <DialogFooter>
-              <DialogClose asChild>
-                <Button color="secondary">{t("cancel")}</Button>
-              </DialogClose>
-              <Button
-                data-testid="send_request"
-                disabled={isLoading}
-                onClick={() => {
-                  rescheduleApi({
-                    bookingId,
-                    rescheduleReason,
-                  });
-                }}>
-                {t("send_reschedule_request")}
-              </Button>
-            </DialogFooter>
-          </div>
+      <DialogContent
+        Icon={Icon.FiClock}
+        useOwnActionButtons
+        title={t("send_reschedule_request")}
+        description={t("reschedule_modal_description")}>
+        <div>
+          <p className="text-sm font-medium text-black">
+            {t("reason_for_reschedule_request")}
+            <span className="font-normal text-gray-500"> (Optional)</span>
+          </p>
+          <TextArea
+            data-testid="reschedule_reason"
+            name={t("reschedule_reason")}
+            value={rescheduleReason}
+            onChange={(e) => setRescheduleReason(e.target.value)}
+            className="mt-2"
+          />
+        </div>
+        <div className="flex justify-end space-x-2">
+          <Button
+            onClick={() => {
+              setRescheduleReason("");
+              setIsOpenDialog(false);
+            }}
+            color="secondary">
+            {t("cancel")}
+          </Button>
+          <Button
+            data-testid="send_request"
+            disabled={isLoading}
+            onClick={() => {
+              rescheduleApi({
+                bookingId,
+                rescheduleReason,
+              });
+            }}>
+            {t("send_reschedule_request")}
+          </Button>
         </div>
       </DialogContent>
     </Dialog>