Style changes on buttons

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component.scss

@@ -30,3 +30,8 @@
 	color: #129d99;
 	font-weight: 500;
 }
+
+.confirm-btn:hover {
+	background-color: #129d99;
+	color: #ffffff;
+}

dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.html

@@ -1,6 +1,9 @@
 <div class="clone-dialog">
+	<div mat-dialog-title class="row d-flex m-0">
 		<div *ngIf="!data.isNewVersion" class="heading-1">{{'DMP-EDITOR.TITLE.CLONE-DMP' | translate}}</div>
 		<div *ngIf="data.isNewVersion" class="heading-1">{{'DMP-EDITOR.TITLE.NEW-VERSION' | translate}}</div>
+		<span class="ml-auto align-self-center" (click)="close()"><mat-icon class="close-icon">close</mat-icon></span>
+	</div>
 	<!-- Title Field -->
 	<div class="row">
 		<div class="col-12">
@@ -66,7 +69,7 @@
 	</div>
 	<div class="row pt-4">
 		<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 class="col-auto"><button mat-raised-button type="button" (click)="confirm()" color="accent">{{ data.confirmButton }}</button></div>
+		<div class="col-auto"><button mat-raised-button type="button" class="confirm-btn" (click)="confirm()" color="accent">{{ data.confirmButton }}</button></div>
 	</div>
 </div>

dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.scss

@@ -10,7 +10,7 @@
 	}
 
 	.heading-1 {
-    text-align: center;
+		text-align: left;
 		font-weight: 700;
 		font-size: 20px;
 		letter-spacing: 0px;
@@ -18,4 +18,38 @@
 		opacity: 0.81;
 		margin-bottom: 0.625rem;
 	}
+
+	.close-icon {
+		cursor: pointer;
+		margin-right: 20px;
+	}
+
+	// .close-icon:hover {
+	// 	background-color: #ECECED !important;
+	// 	border-radius: 50%;
+	// }
+
+	.cancel-btn {
+		width: 101px;
+		height: 43px;
+		background: #ffffff;
+		border: 1px solid #b5b5b5;
+		border-radius: 30px;
+		opacity: 1;
+	}
+
+	.confirm-btn {
+		width: 84px;
+		height: 43px;
+		background: #ffffff;
+		color: #129d99;
+		border: 1px solid #129d99;
+		border-radius: 30px;
+		opacity: 1;
+	}
+
+	.confirm-btn:hover {
+		background-color: #129d99;
+		color: #ffffff;
+	}
 }

dmp-frontend/src/app/ui/user-profile/user-profile.component.html

@@ -186,15 +186,15 @@
 								<div class="col-auto field-title">{{ 'USER-PROFILE.ZENODO.TITLE' | translate}}</div>
 							</div>
 							<div class="row">
-								<div *ngIf="hasZenodo()" class="col-auto language-form">
+								<div *ngIf="hasZenodo()" class="col-auto language-form d-flex">
 									<mat-form-field>
 										<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.ZENODO' | translate}}" value="{{zenodoEmail}}" matInput disabled>
 										<mat-hint>{{'USER-PROFILE.ZENODO.DESCRIPTION' | translate}}</mat-hint>
 									</mat-form-field>
-								</div>
+									<div *ngIf="hasZenodo()" class="col-auto d-flex">
-								<div *ngIf="hasZenodo()" class="col-auto d-flex align-items-center">
 										<div class="remove-btn"><button mat-raised-button type="button" (click)="RemoveZenodo()" class="confirm unlinkBtn">{{'USER-PROFILE.ZENODO.LOGOUT' | translate}}</button></div>
 									</div>
+								</div>
 								<div *ngIf="!hasZenodo()" class="col-md-4">
 									<button mat-raised-button type="button" (click)="loginToZenodo()" class="confirm" color="primary">{{'USER-PROFILE.ZENODO.LOGIN' | translate}}</button>
 								</div>

dmp-frontend/src/app/ui/user-profile/user-profile.component.scss

@@ -98,7 +98,8 @@
 }
 
 .remove-btn {
-	padding-bottom: 1.34375em;
+	padding-top: .8rem;
+	// padding-bottom: 1.34375em;
 }
 
 .unlinkBtn {