Fixed confirmation modal

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();

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"

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 && (

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>

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: [