From 2d9a3bd7418f44db26b2fe2b04b6864ec91ffcb0 Mon Sep 17 00:00:00 2001
From: amrit <iamamrit27@gmail.com>
Date: Tue, 18 Feb 2025 20:53:40 +0530
Subject: [PATCH] fix: EditLocationDialog footer positioning and structure
 (#19335)

* fix: EditLocationDialog footer positioning and structure

* fix: make RescheduleDialog footer layout and button structure right

* fix: input dialogue glitch now works great

* made tests happy

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 .../web/components/dialog/AddGuestsDialog.tsx | 47 ++++++++++---------
 .../components/dialog/EditLocationDialog.tsx  |  3 +-
 .../components/dialog/RescheduleDialog.tsx    | 34 +++++++-------
 packages/ui/form/MultiEmail.tsx               |  2 +-
 4 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/apps/web/components/dialog/AddGuestsDialog.tsx b/apps/web/components/dialog/AddGuestsDialog.tsx
index 592b32c886..c8077f9aa6 100644
--- a/apps/web/components/dialog/AddGuestsDialog.tsx
+++ b/apps/web/components/dialog/AddGuestsDialog.tsx
@@ -61,17 +61,19 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent enableOverflow>
         <div className="flex flex-row space-x-3">
-          <div className="bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full ">
+          <div className="bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full">
             <Icon name="user-plus" className="m-auto h-6 w-6" />
           </div>
           <div className="w-full pt-1">
             <DialogHeader title={t("additional_guests")} />
-            <MultiEmail
-              label={t("add_emails")}
-              value={multiEmailValue}
-              readOnly={false}
-              setValue={setMultiEmailValue}
-            />
+            <div className="bg-default">
+              <MultiEmail
+                label={t("add_emails")}
+                value={multiEmailValue}
+                readOnly={false}
+                setValue={setMultiEmailValue}
+              />
+            </div>
 
             {isInvalidEmail && (
               <div className="my-4 flex text-sm text-red-700">
@@ -83,24 +85,23 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
                 </div>
               </div>
             )}
-
-            <DialogFooter>
-              <Button
-                onClick={() => {
-                  setMultiEmailValue([""]);
-                  setIsInvalidEmail(false);
-                  setIsOpenDialog(false);
-                }}
-                type="button"
-                color="secondary">
-                {t("cancel")}
-              </Button>
-              <Button data-testid="add_members" loading={addGuestsMutation.isPending} onClick={handleAdd}>
-                {t("add")}
-              </Button>
-            </DialogFooter>
           </div>
         </div>
+        <DialogFooter showDivider className="mt-8">
+          <Button
+            onClick={() => {
+              setMultiEmailValue([""]);
+              setIsInvalidEmail(false);
+              setIsOpenDialog(false);
+            }}
+            type="button"
+            color="secondary">
+            {t("cancel")}
+          </Button>
+          <Button data-testid="add_members" loading={addGuestsMutation.isPending} onClick={handleAdd}>
+            {t("add")}
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index 6272e4c0a1..c0c0b2bfae 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -324,7 +324,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 }}
               />
               {selectedLocation && SelectedLocationInput}
-              <DialogFooter className="relative">
+              <DialogFooter showDivider className="mt-8">
                 <Button
                   onClick={() => {
                     setShowLocationModal(false);
@@ -336,7 +336,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                   color="secondary">
                   {t("cancel")}
                 </Button>
-
                 <Button data-testid="update-location" type="submit" disabled={isLocationUpdating}>
                   {t("update")}
                 </Button>
diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index 42ea9d7806..8e8d93d0a7 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -6,7 +6,6 @@ import { trpc } from "@calcom/trpc/react";
 import {
   Button,
   Dialog,
-  DialogClose,
   DialogContent,
   DialogFooter,
   DialogHeader,
@@ -46,7 +45,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
           <div className="bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full ">
             <Icon name="clock" className="m-auto h-6 w-6" />
           </div>
-          <div className="pt-1">
+          <div className="w-full pt-1">
             <DialogHeader title={t("send_reschedule_request")} />
             <p className="text-subtle text-sm">{t("reschedule_modal_description")}</p>
             <p className="text-emphasis mb-2 mt-6 text-sm font-bold">
@@ -60,23 +59,24 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
               onChange={(e) => setRescheduleReason(e.target.value)}
               className="mb-5 sm:mb-6"
             />
-
-            <DialogFooter>
-              <DialogClose />
-              <Button
-                data-testid="send_request"
-                disabled={isPending}
-                onClick={() => {
-                  rescheduleApi({
-                    bookingId,
-                    rescheduleReason,
-                  });
-                }}>
-                {t("send_reschedule_request")}
-              </Button>
-            </DialogFooter>
           </div>
         </div>
+        <DialogFooter showDivider className="mt-8">
+          <Button color="secondary" onClick={() => setIsOpenDialog(false)}>
+            {t("cancel")}
+          </Button>
+          <Button
+            data-testid="send_request"
+            disabled={isPending}
+            onClick={() => {
+              rescheduleApi({
+                bookingId,
+                rescheduleReason,
+              });
+            }}>
+            {t("send_reschedule_request")}
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );
diff --git a/packages/ui/form/MultiEmail.tsx b/packages/ui/form/MultiEmail.tsx
index 3528397347..69c32b23e6 100644
--- a/packages/ui/form/MultiEmail.tsx
+++ b/packages/ui/form/MultiEmail.tsx
@@ -17,7 +17,7 @@ function MultiEmail({ value, readOnly, label, setValue, placeholder }: MultiEmai
   const { t } = useLocale();
   value = value || [];
   const inputClassName =
-    "dark:placeholder:text-muted focus:border-emphasis border-subtle block w-full rounded-md border-default text-sm focus:ring-black disabled:bg-emphasis disabled:hover:cursor-not-allowed dark:selection:bg-green-500 disabled:dark:text-subtle bg-default";
+    "dark:placeholder:text-muted focus:border-emphasis border-subtle block w-full rounded-md border-default text-sm focus:ring-black disabled:bg-emphasis disabled:hover:cursor-not-allowed dark:selection:bg-green-500 disabled:dark:text-subtle";
   return (
     <>
       {value.length ? (