From e9b09e5b501b9de8a0880acdf0e9dd5bacddda29 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Fri, 8 Nov 2024 22:48:06 +0800
Subject: [PATCH] pkp/pkp-lib#10444 Add modalStyle to new dialogs related to
 user invitations

---
 .../UserInvitationManager/UserInvitationManagerStore.js      | 5 +++--
 src/mixins/dialog.mdx                                        | 4 +++-
 src/pages/acceptInvitation/AcceptInvitationPageStore.js      | 2 ++
 src/pages/userInvitation/UserInvitationPageStore.js          | 1 +
 src/pages/userInvitation/UserInvitationUserGroupsTable.vue   | 1 +
 5 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/managers/UserInvitationManager/UserInvitationManagerStore.js b/src/managers/UserInvitationManager/UserInvitationManagerStore.js
index 9783a624d..e99698448 100755
--- a/src/managers/UserInvitationManager/UserInvitationManagerStore.js
+++ b/src/managers/UserInvitationManager/UserInvitationManagerStore.js
@@ -105,6 +105,7 @@ export const useUserInvitationManagerStore = defineComponentStore(
 						},
 					},
 				],
+				modalStyle: 'primary',
 			});
 		}
 
@@ -135,7 +136,7 @@ export const useUserInvitationManagerStore = defineComponentStore(
 				actions: [
 					{
 						label: t('invitation.cancelInvite.title'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: async (close) => {
 							const {apiUrl: cancelApiUrl} = useUrl(
 								`invitations/${invitationObj.id}/cancel`,
@@ -154,12 +155,12 @@ export const useUserInvitationManagerStore = defineComponentStore(
 					},
 					{
 						label: t('common.cancel'),
-						isWarnable: true,
 						callback: (close) => {
 							close();
 						},
 					},
 				],
+				modalStyle: 'negative',
 			});
 		}
 
diff --git a/src/mixins/dialog.mdx b/src/mixins/dialog.mdx
index ad03e3da9..3b243bb16 100644
--- a/src/mixins/dialog.mdx
+++ b/src/mixins/dialog.mdx
@@ -36,7 +36,8 @@ export default {
 			],
 			close: () => {
 				// dialog has been closed
-			}
+			},
+			modalStyle: 'primary',
 		});
 	}
 }
@@ -58,6 +59,7 @@ The `openDialog()` method accepts a configuration object with the following para
 | `title` | A localized title to display in the dialog. |
 | `message` | A localized message to display in the dialog. |
 | `close` | A callback function that will be fired when the dialog is closed. |
+| `modalStyle` | The visual style of the modal: 'basic' (no border style)', 'primary', 'negative', or 'success'. |
 | `actions` | An array of buttons to add to the dialog. |
 | `actions[0].label` | The label for the button. |
 | `actions[0].callback` | A callback function that will be fired when the button is pressed. |
diff --git a/src/pages/acceptInvitation/AcceptInvitationPageStore.js b/src/pages/acceptInvitation/AcceptInvitationPageStore.js
index 1ad8eff9f..9445d2f98 100644
--- a/src/pages/acceptInvitation/AcceptInvitationPageStore.js
+++ b/src/pages/acceptInvitation/AcceptInvitationPageStore.js
@@ -71,6 +71,7 @@ export const useAcceptInvitationPageStore = defineComponentStore(
 						const {redirectToPage} = useUrl('submissions');
 						redirectToPage();
 					},
+					modalStyle: 'negative',
 				});
 			} else {
 				email.value = data.value.email;
@@ -394,6 +395,7 @@ export const useAcceptInvitationPageStore = defineComponentStore(
 						},
 					},
 				],
+				modalStyle: 'negative',
 			});
 		}
 
diff --git a/src/pages/userInvitation/UserInvitationPageStore.js b/src/pages/userInvitation/UserInvitationPageStore.js
index 9c4bce0d6..00bb0878a 100644
--- a/src/pages/userInvitation/UserInvitationPageStore.js
+++ b/src/pages/userInvitation/UserInvitationPageStore.js
@@ -353,6 +353,7 @@ export const useUserInvitationPageStore = defineComponentStore(
 						},
 					},
 				],
+				modalStyle: 'negative',
 			});
 		}
 
diff --git a/src/pages/userInvitation/UserInvitationUserGroupsTable.vue b/src/pages/userInvitation/UserInvitationUserGroupsTable.vue
index c2e3d4012..4cab0152d 100644
--- a/src/pages/userInvitation/UserInvitationUserGroupsTable.vue
+++ b/src/pages/userInvitation/UserInvitationUserGroupsTable.vue
@@ -216,6 +216,7 @@ function removeUserGroup(userGroup, index) {
 				},
 			},
 		],
+		modalStyle: 'negative',
 	});
 }