From db18d98325ead904a6f35a4ee848619be02495b8 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 28 Nov 2023 19:45:39 -0300
Subject: [PATCH] Fixed confirmation modal

---
 src/frontend/src/modals/ConfirmationModal/index.tsx  | 12 +++++++-----
 .../src/modals/DeleteConfirmationModal/index.tsx     |  2 +-
 src/frontend/src/modals/baseModal/index.tsx          |  4 ++--
 .../components/nodeToolbarComponent/index.tsx        | 10 ++++------
 src/frontend/src/types/components/index.ts           |  5 +++--
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/frontend/src/modals/ConfirmationModal/index.tsx b/src/frontend/src/modals/ConfirmationModal/index.tsx
index 5a2a50a8b..11d711912 100644
--- a/src/frontend/src/modals/ConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/ConfirmationModal/index.tsx
@@ -29,6 +29,7 @@ function ConfirmationModal({
   cancelText,
   confirmationText,
   children,
+  destructive = false,
   icon,
   data,
   index,
@@ -56,9 +57,9 @@ function ConfirmationModal({
   );
 
   return (
-    <BaseModal size={size ?? "x-small"} open={modalOpen} setOpen={setModalOpen}>
+    <BaseModal size={size} open={modalOpen} setOpen={setModalOpen}>
       <BaseModal.Trigger asChild={asChild}>{triggerChild}</BaseModal.Trigger>
-      <BaseModal.Header description={titleHeader}>
+      <BaseModal.Header description={titleHeader ?? null}>
         <span className="pr-2">{title}</span>
         <Icon
           name="icon"
@@ -67,7 +68,7 @@ function ConfirmationModal({
         />
       </BaseModal.Header>
       <BaseModal.Content>
-        {modalContentTitle != "" && (
+        {modalContentTitle && modalContentTitle != "" && (
           <>
             <strong>{modalContentTitle}</strong>
             <br></br>
@@ -78,7 +79,8 @@ function ConfirmationModal({
 
       <BaseModal.Footer>
         <Button
-          className="ml-3 mt-5"
+          className="ml-3"
+          variant={destructive ? "destructive" : "default"}
           onClick={() => {
             setModalOpen(false);
             onConfirm(index, data);
@@ -88,7 +90,7 @@ function ConfirmationModal({
         </Button>
 
         <Button
-          className="mt-5"
+          className=""
           variant="outline"
           onClick={() => {
             if (onCancel) onCancel();
diff --git a/src/frontend/src/modals/DeleteConfirmationModal/index.tsx b/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
index 70d8ac430..ab0d43c4f 100644
--- a/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
@@ -41,7 +41,7 @@ export default function DeleteConfirmationModal({
         </span>
         <DialogFooter>
           <DialogClose>
-            <Button className="mr-3">Cancel</Button>
+            <Button className="mr-3" variant="outline">Cancel</Button>
 
             <Button
               type="submit"
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index 8e0d58772..124373c1b 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -99,7 +99,7 @@ function BaseModal({
   switch (size) {
     case "x-small":
       minWidth = "min-w-[20vw]";
-      height = "h-[10vh]";
+      height = " ";
       break;
     case "smaller":
       minWidth = "min-w-[40vw]";
@@ -150,7 +150,7 @@ function BaseModal({
         <div className="truncate-doubleline word-break-break-word">
           {headerChild}
         </div>
-        <div className={`mt-2 flex flex-col ${height!} w-full `}>
+        <div className={`flex flex-col ${height!} w-full `}>
           {ContentChild}
         </div>
         {ContentFooter && (
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 4f6a7b3a0..a396eacbf 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -278,11 +278,10 @@ export default function NodeToolbarComponent({
           <ConfirmationModal
             asChild
             open={showOverrideModal}
-            title={`Replace ${data.node?.display_name}`}
-            titleHeader={`Please, confirm your save actions`}
-            modalContentTitle="Attention!"
-            cancelText="New"
+            title={`Replace`}
+            cancelText="Create New"
             confirmationText="Replace"
+            size={"x-small"}
             icon={"SaveAll"}
             index={6}
             onConfirm={(index, user) => {
@@ -293,8 +292,7 @@ export default function NodeToolbarComponent({
           >
             <ConfirmationModal.Content>
               <span>
-                It seems {data.node?.display_name} already exists. Replacing it
-                will switch the current component. Proceed with replacement?
+                It seems {data.node?.display_name} already exists. Do you want to replace it with the current or create a new one?
               </span>
             </ConfirmationModal.Content>
             <ConfirmationModal.Trigger>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 810a32bf1..d7219bbf8 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -286,9 +286,10 @@ export type PaginatorComponentType = {
 export type ConfirmationModalType = {
   onCancel?: () => void;
   title: string;
-  titleHeader: string;
+  titleHeader?: string;
   asChild?: boolean;
-  modalContentTitle: string;
+  destructive?: boolean;
+  modalContentTitle?: string;
   cancelText: string;
   confirmationText: string;
   children: [