pkp/pkp-lib#10444 Improve dialog component design

src/components/ActionPanel/ActionPanel.stories.js

@@ -35,6 +35,7 @@ export const Default = {
 							callback: (close) => close(),
 						},
 					],
+					modalStyle: 'negative',
 				});
 			}
 			return {

src/components/Composer/Composer.vue

@@ -906,6 +906,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 

src/components/Container/DecisionPage.vue

@@ -182,6 +182,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
@@ -266,6 +267,7 @@ export default {
 				message: this.decisionCompleteDescription,
 				actions,
 				close,
+				modalStyle: 'success',
 			});
 		},
 

src/components/Container/ManageEmailsPage.vue

@@ -151,6 +151,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
@@ -187,6 +188,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
@@ -224,6 +226,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
@@ -325,7 +328,7 @@ export default {
 						title: mailable ? mailable.name : '',
 						mailable: this.currentMailable,
 						onOpenTemplate: this.openTemplate,
-						onConfirmResetTemplate: this.confirmRemoveTemplate,
+						onConfirmResetTemplate: this.confirmResetTemplate,
 						onConfirmRemoveTemplate: this.confirmRemoveTemplate,
 					});
 				});

src/components/Container/SubmissionWizardPage.vue

@@ -432,6 +432,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
@@ -661,6 +662,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 

src/components/Container/WorkflowPage.vue

@@ -352,6 +352,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 

src/components/Form/context/NotifyUsersForm.vue

@@ -53,6 +53,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 	},

src/components/Form/fields/FieldShowEnsuringLink.vue

@@ -23,7 +23,7 @@ export default {
 	},
 	mounted() {
 		/**
-		 * Show the requested message in a modal when the link in the messgae is
+		 * Show the requested message in a modal when the link in the message is
 		 * clicked.
 		 */
 		$('.pkpFormField--options__option button', this.$el).click(() => {
@@ -36,6 +36,7 @@ export default {
 					callback: (close) => {
 						close();
 					},
+					modalStyle: 'primary',
 				},
 				{
 					height: 'auto',

src/components/ListPanel/announcements/AnnouncementsListPanel.vue

@@ -209,7 +209,7 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: (close) => {
 							var self = this;
 							$.ajax({
@@ -233,10 +233,10 @@ export default {
 					},
 					{
 						label: this.t('common.no'),
-						isWarnable: true,
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 

src/components/ListPanel/contributors/ContributorsListPanel.vue

@@ -359,6 +359,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 

src/components/ListPanel/doi/DoiListPanel.vue

@@ -789,6 +789,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 		/**

src/components/ListPanel/highlights/HighlightsListPanel.vue

@@ -228,7 +228,7 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: (close) => {
 							$.ajax({
 								url: this.apiUrl + '/' + id,
@@ -251,10 +251,10 @@ export default {
 					},
 					{
 						label: this.t('common.no'),
-						isWarnable: true,
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 

src/components/ListPanel/institutions/InstitutionsListPanel.vue

@@ -211,7 +211,7 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: (close) => {
 							var self = this;
 							$.ajax({
@@ -235,10 +235,10 @@ export default {
 					},
 					{
 						label: this.t('common.no'),
-						isWarnable: true,
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 

src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue

@@ -259,7 +259,7 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: (close) => {
 							$.ajax({
 								url: this.apiUrl + '/' + item.id + '?stageId=' + this.stageId,
@@ -281,10 +281,10 @@ export default {
 					},
 					{
 						label: this.t('common.no'),
-						isWarnable: true,
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 

src/components/ListPanel/submissions/SubmissionsListItem.vue

@@ -813,15 +813,15 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: this.deleteSubmission,
 					},
 					{
 						label: this.t('common.no'),
-						isWarnable: true,
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 

src/components/Modal/Dialog.mdx

@@ -19,6 +19,15 @@ Dialog purpose is to display simple feedback like success and error messages. Or
 
 Dialog are opened via method `openDialog` from [useModal](../?path=/docs/composables-usemodal--docs#opensidemodal) composable. Check out the props description for details.
 
+## Styling
+
+The style of the modal can be changed by passing the prop `modalStyle`. It accepts the following values:
+
+- **`default`**: The standard modal style, which has no special border styling. This serves as the default value for the modal style.
+- **`primary`**: A modal style that uses the primary color scheme.
+- **`negative`**: Indicates a negative state, typically for error messages or alerts.
+- **`success`**: Represents a positive state, often used for success notifications.
+
 ## Accessibility
 
 To correctly handle accessibility (title, description) and focus management - [headless-ui](https://headlessui.com) library is used.