Fix style of buttons on finalize dialogs

dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts

@@ -796,6 +796,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		const dialogRef = this.dialog.open(DmpFinalizeDialogComponent, {
 			maxWidth: '500px',
 			restoreFocus: false,
+			autoFocus: false,
 			data: {
 				dialogInputModel: dialogInputModel,
 				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.FINALIZE-ITEM'),

dmp-frontend/src/app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component.html

@@ -5,6 +5,7 @@
 	</div>
 </div>
 <div mat-dialog-content class="pt-2 pb-2">
+	<div class="container">
 		<mat-accordion [multi]="true">
 			<mat-expansion-panel>
 				<mat-expansion-panel-header>
@@ -52,6 +53,7 @@
 			{{'DMP-FINALISE-DIALOG.VALIDATION.AT-LEAST-ONE-DATASET-FINALISED' | translate}}
 		</mat-error>
 	</div>
+</div>
 <div *ngIf="getFinalizedDatasets().length != 0">
 	<div class="row pt-2 pb-2 pl-4 pr-4">
 		{{ 'DMP-FINALISE-DIALOG.IMPACT' | translate }}
@@ -61,12 +63,12 @@
 	</div>
 </div>
 
-<div mat-dialog-actions class="d-flex justify-content-end">
+<div mat-dialog-actions class="d-flex justify-content-end mb-1">
 	<div class="col-auto">
-		<button mat-raised-button [disabled]="getFinalizedDatasets().length === 0 && outputModel.datasetsToBeFinalized.length === 0" class="confirm" (click)="onSubmit()">{{ data.confirmButton }}</button>
+		<button mat-raised-button cdkFocusInitial (click)="close()" class="cancel-btn">{{ data.cancelButton }}</button>
 	</div>
 	<div class="col-auto">
-		<button mat-raised-button cdkFocusInitial (click)="close()" class="cancel">{{ data.cancelButton }}</button>
+		<button mat-raised-button [disabled]="getFinalizedDatasets().length === 0 && outputModel.datasetsToBeFinalized.length === 0" class="submit-btn" (click)="onSubmit()">{{ data.confirmButton }}</button>
 	</div>
 </div>
 

dmp-frontend/src/app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component.scss

@@ -73,3 +73,57 @@
 	font-style: italic;
 	color: rgba(0, 0, 0, 0.26);
 }
+
+.save-btn {
+	background: #129d99 0% 0% no-repeat padding-box;
+	border-radius: 30px;
+	opacity: 1;
+	width: auto;
+	height: 40px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-weight: 700;
+	color: #ffffff;
+	cursor: pointer;
+}
+
+.submit-btn {
+	min-width: 84px;
+	height: 43px;
+	background: #ffffff;
+	color: #129d99;
+	border: 1px solid #129d99;
+	border-radius: 30px;
+	opacity: 1;
+}
+
+.submit-btn[disabled] {
+	border: 1px solid #b5b5b5 !important;
+}
+
+.submit-btn:not([disabled]):hover {
+	background-color: #129d99;
+    color: #ffffff;
+}
+
+.default-btn {
+	background: #ffffff 0% 0% no-repeat padding-box;
+	box-shadow: 0px 3px 6px #1e202029;
+	border: 1px solid #b5b5b5;
+	border-radius: 30px;
+	opacity: 1;
+	font-size: 0.87rem;
+	font-weight: 500;
+	color: #212121;
+	cursor: pointer;
+}
+
+.cancel-btn {
+	width: 101px;
+	height: 43px;
+	background: #ffffff;
+	border: 1px solid #b5b5b5;
+	border-radius: 30px;
+	opacity: 1;
+}

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts

@@ -593,6 +593,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 		const dialogRef = this.dialog.open(DmpFinalizeDialogComponent, {
 			maxWidth: '500px',
 			restoreFocus: false,
+			autoFocus: false,
 			data: {
 				dialogInputModel: dialogInputModel,
 				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.FINALIZE-ITEM'),

dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.ts

@@ -110,6 +110,7 @@ export class QuickWizardEditorComponent extends CheckDeactivateBaseComponent imp
 		const dialogRef = this.dialog.open(DmpFinalizeDialogComponent, {
 			maxWidth: '500px',
 			restoreFocus: false,
+			autoFocus: false,
 			data: {
 				dialogInputModel: dialogInputModel,
 				confirmButton: this.language.instant('DMP-FINALISE-DIALOG.SUBMIT'),

dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html

@@ -8,7 +8,7 @@
 			<mat-icon>close</mat-icon>
 		</div>
 	</div>
-	<div class="row d-flex flex-row">
+	<div class="row d-flex flex-row mb-2">
 		<div class="col message pb-4 pl-3">{{ data.message }}</div>
 		<div *ngIf="!data.icon" class="col-auto close-btn justify-content-end" (click)="close()">
 			<mat-icon>close</mat-icon>
@@ -22,10 +22,10 @@
 		<div *ngIf="!agreePrivacyPolicyNames" class="required-policy">{{'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REQUIRED' | translate}}</div>
 	</div>
 	<div class="row">
-		<div class="col"></div>
+		<!-- <div class="col"></div> -->
-		<div class="col-auto"><button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button></div>
+		<div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button></div>
 		<div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="delete">{{ data.confirmButton }}</button></div>
-		<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" color="primary">{{ data.confirmButton }}</button></div>
+		<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="submit-btn">{{ data.confirmButton }}</button></div>
-		<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" color="primary">{{ data.confirmButton }}</button></div>
+		<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" class="submiit-btn">{{ data.confirmButton }}</button></div>
 	</div>
 </div>

dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.scss

@@ -22,6 +22,15 @@
 	  color: #ffffff;
 	}
 
+	.cancel-btn {
+		width: 101px;
+		height: 43px;
+		background: #ffffff;
+		border: 1px solid #b5b5b5;
+		border-radius: 30px;
+		opacity: 1;
+	}
+
 	.confirm {
 	  background-color: #2cba6c;
 	  color: #ffffff;
@@ -41,5 +50,23 @@
 	  font-size: smaller;
 	  color: #f44336;
 	}
+
+	.submit-btn {
+		min-width: 101px;
+		height: 43px;
+		background: #ffffff;
+		color: #129d99;
+		border: 1px solid #129d99;
+		border-radius: 30px;
+		opacity: 1;
 	}
 
+	.submit-btn[disabled] {
+		border: 1px solid #b5b5b5 !important;
+	}
+
+	.submit-btn:not([disabled]):hover {
+		background-color: #129d99;
+		color: #ffffff;
+	}
+  }