fix: remove app dialog while removing installed calendar (#10234)

* Fix remove app dialog while removing installed calendar

* fix: dialog in webhook, otp

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

* fix: more dialogs

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

* fix: margin

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: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

packages/app-store/routing-forms/components/FormActions.tsx

@@ -145,7 +145,7 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
               />
             )}
           </div>
-          <DialogFooter showDivider className="mt-12 flex flex-row-reverse gap-x-2">
+          <DialogFooter showDivider className="mt-12">
             <DialogClose />
             <Button loading={mutation.isLoading} data-testid="add-form" type="submit">
               {t("continue")}

packages/features/apps/components/DisconnectIntegration.tsx

@@ -5,14 +5,12 @@ import { trpc } from "@calcom/trpc/react";
 import type { ButtonProps } from "@calcom/ui";
 import {
   Button,
+  ConfirmationDialogContent,
   Dialog,
-  DialogContent,
   DialogTrigger,
   showToast,
-  DialogFooter,
-  DialogClose,
 } from "@calcom/ui";
-import { Trash, AlertCircle } from "@calcom/ui/components/icon";
+import { Trash } from "@calcom/ui/components/icon";
 
 export default function DisconnectIntegration({
   credentialId,
@@ -62,18 +60,15 @@ export default function DisconnectIntegration({
             {label && label}
           </Button>
         </DialogTrigger>
-        <DialogContent
+        <ConfirmationDialogContent
+          variety="danger"
           title={t("remove_app")}
-          description={t("are_you_sure_you_want_to_remove_this_app")}
-          type="confirmation"
-          Icon={AlertCircle}>
-          <DialogFooter>
-            <DialogClose onClick={() => setModalOpen(false)} />
-            <DialogClose color="primary" onClick={() => mutation.mutate({ id: credentialId })}>
-              {t("yes_remove_app")}
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
+          confirmBtnText={t("yes_remove_app")}
+          onConfirm={() => {
+            mutation.mutate({ id: credentialId });
+          }}>
+          <p className="mt-5">{t("are_you_sure_you_want_to_remove_this_app")}</p>
+        </ConfirmationDialogContent>
       </Dialog>
     </>
   );

packages/features/ee/teams/components/MemberChangeRoleModal.tsx

@@ -102,7 +102,7 @@ export default function MemberChangeRoleModal(props: {
                 {errorMessage}
               </p>
             )}
-            <DialogFooter className="mt-12 sm:flex sm:flex-row-reverse">
+            <DialogFooter className="mt-12">
               <Button type="button" color="secondary" onClick={props.onExit}>
                 {t("cancel")}
               </Button>

packages/features/ee/workflows/components/WorkflowStepContainer.tsx

@@ -945,8 +945,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           </ConfirmationDialogContent>
         </Dialog> */}
         <Dialog open={isAdditionalInputsDialogOpen} onOpenChange={setIsAdditionalInputsDialogOpen}>
-          <DialogContent type="creation" className="sm:max-w-[610px]">
-            <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
+          <DialogContent enableOverflow type="creation" className="sm:max-w-[610px]">
+            <div>
               <h1 className="w-full text-xl font-semibold ">{t("how_booking_questions_as_variables")}</h1>
               <div className="bg-muted-3 mb-6 rounded-md sm:p-4">
                 <p className="test-sm font-medium">{t("format")}</p>
@@ -994,7 +994,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 </div>
               </div>
             </div>
-            <DialogFooter showDivider className="flex flex-row-reverse">
+            <DialogFooter showDivider>
               <DialogClose color="primary" />
             </DialogFooter>
           </DialogContent>

packages/features/eventtypes/components/DuplicateDialog.tsx

@@ -149,7 +149,7 @@ const DuplicateDialog = () => {
               />
             </div>
           </div>
-          <DialogFooter showDivider className="mt-10 flex-row-reverse gap-x-2">
+          <DialogFooter showDivider className="mt-10">
             <DialogClose />
             <Button type="submit" loading={duplicateMutation.isLoading}>
               {t("continue")}

packages/features/webhooks/components/WebhookForm.tsx

@@ -5,7 +5,17 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { WebhookTriggerEvents } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
-import { Button, Form, Label, Select, Switch, TextArea, TextField, ToggleGroup } from "@calcom/ui";
+import {
+  Button,
+  Form,
+  Label,
+  Select,
+  Switch,
+  TextArea,
+  TextField,
+  ToggleGroup,
+  DialogFooter,
+} from "@calcom/ui";
 
 import customTemplate, { hasTemplateIntegration } from "../lib/integrationTemplate";
 import WebhookTestDisclosure from "./WebhookTestDisclosure";
@@ -259,7 +269,7 @@ const WebhookForm = (props: {
           <WebhookTestDisclosure />
         </div>
 
-        <div className="mt-12 flex place-content-end space-x-4">
+        <DialogFooter showDivider>
           <Button
             type="button"
             color="minimal"
@@ -270,7 +280,7 @@ const WebhookForm = (props: {
           <Button type="submit" loading={formMethods.formState.isSubmitting}>
             {props?.webhook?.id ? t("save") : t("create_webhook")}
           </Button>
-        </div>
+        </DialogFooter>
       </Form>
     </>
   );