From 7792bed7f6a10e481ae53f4873eb79128bfc1ee1 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Tue, 27 Oct 2020 14:29:57 +0200
Subject: [PATCH] Fixes invite button clicks on dmp/dataset overview and fixes
 style on invitation dialog

---
 .../overview/dataset-overview.component.html  |   4 +-
 .../dmp-invitation-dialog.component.html      |   8 +-
 .../dmp-invitation-dialog.component.scss      | 117 ++++++++++--------
 .../dmp/overview/dmp-overview.component.html  |   7 +-
 .../dmp/overview/dmp-overview.component.scss  |   2 +-
 5 files changed, 74 insertions(+), 64 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html
index 202beeafd..152a6347b 100644
--- a/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html
+++ b/dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html
@@ -170,8 +170,8 @@
 								<button *ngIf="isUserOwner && !dataset.status && user.role" (click)="removeUserFromDmp(user)" class="remove-btn">{{ 'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REMOVE' | translate}}</button>
 							</div>
 						</div>
-						<div *ngIf="isUserOwner" (click)="openShareDialog(dataset.dmp.id, dataset.dmp.label)" class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
-							<button mat-raised-button class="invite-btn">
+						<div *ngIf="isUserOwner" class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
+							<button mat-raised-button class="invite-btn" (click)="openShareDialog(dataset.dmp.id, dataset.dmp.label)">
 								<mat-icon>group_add</mat-icon>
 								{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}
 							</button>
diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html
index a60594bae..8e600cd36 100644
--- a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html
+++ b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html
@@ -6,7 +6,7 @@
 		<div class="row m-0">
 			<h1 mat-dialog-title class="title">{{'DMP-LISTING.ACTIONS.INVITE-AUTHORS' | translate}}</h1>
 		</div>
-		<div mat-dialog-content class="row content pb-2">
+		<div mat-dialog-content class="row content">
 			<mat-form-field class="col pt-0 pb-2 mb-4 search" appearance="standard">
 				<app-multiple-auto-complete [formControl]="formGroup.get('users')"
 					placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}"
@@ -17,15 +17,15 @@
 				<mat-icon class="align-self-center mr-1">info_outlined</mat-icon>
 				{{'GENERAL.INVITATION-DIALOG.HINT' | translate}}
 			</p>
-			<div class="col-12 d-flex justify-content-end align-items-center row m-0">
+			<div class="col-12 d-flex justify-content-end align-items-center row m-0 pt-1 pb-1">
 				<mat-form-field class="select-role">
 					<mat-select [formControl]="formGroup.get('role')">
 					  <mat-option [value]="roles.Owner">{{enumUtils.toRoleString(roles.Owner)}}</mat-option>
 					  <mat-option [value]="roles.Member">{{enumUtils.toRoleString(roles.Member)}}</mat-option>
 					</mat-select>
 				  </mat-form-field>
-				<button mat-raised-button *ngIf="hasValue()" (click)="send()" type="button" class="invite-btn">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
-				<button mat-raised-button *ngIf="!hasValue()" type="button" class="invite-btn-disabled">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
+				<button mat-raised-button *ngIf="hasValue()" (click)="send()" type="button" class="invite-btn mt-2">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
+				<button mat-raised-button *ngIf="!hasValue()" type="button" class="invite-btn-disabled mt-2">{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</button>
 			</div>
 		</div>
 	</form>
diff --git a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss
index 053cd2596..9107d3b25 100644
--- a/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss
@@ -1,81 +1,87 @@
 .form-container {
-    width: 33em;
-    min-height: 14em;
-    padding: 0.28em 0.34em 0.875em 1.125em;
+	width: 33em;
+	min-height: 14em;
+	padding: 0.28em 0.34em 0em 1.125em;
 }
 
 .close-icon {
-    cursor: pointer;
+	cursor: pointer;
 }
 
 .title {
-    font-size: 2.375em;
-    font-weight: lighter;
-    color: #000000;
-    opacity: 0.8;
-    margin-bottom: 0.842em;
+	font-size: 2.375em;
+	font-weight: lighter;
+	color: #000000;
+	opacity: 0.8;
+	margin-bottom: 0.842em;
 }
 
 .content {
-    width: 31em;
-    margin: 0px;
-    padding: 0px;
+	width: 31em;
+	margin: 0px;
+	padding: 0px;
 }
 
 .mat-form-field {
-    background: #FAFAFA;
-    border: 1px solid #D1D1D1;
-    border-radius: 4px;
+	background: #fafafa;
+	border: 1px solid #d1d1d1;
+	border-radius: 4px;
 }
 
 .hint {
 	font-size: 0.875rem;
 	font-weight: 500;
+	color: #212121;
+	opacity: 0.81;
 }
 
 ::ng-deep .mat-dialog-container {
-    border-radius: 8px;
+	border-radius: 8px;
 }
 
 .search {
-    padding: 2px !important;
+	padding: 2px !important;
 }
 
 ::ng-deep .search {
-    .mat-form-field-infix {
-        border: none;
-        padding: 14px;
-    }
-    .mat-form-field-underline {
-        display: none;
-    }
-    .mat-form-field-flex {
-        padding: 0em;
-    }
-    .align-arrow-right {
-        display: none;
-    }
+	.mat-form-field-infix {
+		border: none;
+		padding: 14px;
+	}
+	.mat-form-field-underline {
+		display: none;
+	}
+	.mat-form-field-flex {
+		padding: 0em;
+	}
+	.align-arrow-right {
+		display: none;
+	}
 }
 
 .select-role {
-    width: 20% !important;
-    font-size: 14px;
-    color: #848484;
-    height: min-content;
-    margin-right: 2.5rem;
-    border: none;
-    background-color: transparent;
+	width: 20% !important;
+	font-size: 14px;
+	color: #848484;
+	height: min-content;
+	margin-right: 2rem;
+	border: none;
+	background-color: transparent;
 }
 
 ::ng-deep .select-role {
-    .mat-form-field-outline-start,
-    .mat-form-field-outline-gap,
-    .mat-form-field-outline-end {
-        border: none !important;
-    }
-    .mat-select-arrow-wrapper {
-        transform: none;
-    }
+	.mat-form-field-outline-start,
+	.mat-form-field-outline-gap,
+	.mat-form-field-outline-end {
+		border: none !important;
+	}
+	.mat-select-arrow-wrapper {
+		transform: none !important;
+	}
+}
+
+::ng-deep .select-role .mat-form-field-wrapper {
+	padding-bottom: 0 !important;
 }
 
 .invite-btn {
@@ -90,14 +96,19 @@
 }
 
 .invite-btn-disabled {
-    width: 6.64em;
-    height: 2.93em;
-    background: #FFFFFF;
-    border: 1px solid #B5B5B5;
-    border-radius: 30px;
-    font-weight: bold;
-    letter-spacing: -0.35px;
-    color: #B5B5B5;
+	width: 6.64em;
+	height: 2.93em;
+	background: #ffffff;
+	border: 1px solid #b5b5b5;
+	border-radius: 30px;
+	font-weight: bold;
+	letter-spacing: -0.35px;
+	color: #b5b5b5;
 	margin-bottom: 0.25em;
 	cursor: default;
 }
+
+.invite-btn:hover {
+	background: #129d99;
+	color: #ffffff;
+}
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
index d30e0609b..cd089a02f 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
@@ -204,8 +204,7 @@
 									</button>
 									<div>
 										<p class="authors-label">{{ user.name }}
-											<span *ngIf="isUserAuthor(user.id)">
-												({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
+											<span *ngIf="isUserAuthor(user.id)">({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
 										</p>
 										<p class="authors-role">{{ roleDisplay(user) }}</p>
 									</div>
@@ -213,8 +212,8 @@
 								<button *ngIf="isUserOwner && !dmp.status && user.role" (click)="removeUserFromDmp(user)" class="remove-btn">{{ 'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REMOVE' | translate}}</button>
 							</div>
 						</div>
-						<div *ngIf="isUserOwner" (click)="openShareDialog(dmp.id,dmp.label)" class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
-							<button mat-raised-button class="invite-btn">
+						<div *ngIf="isUserOwner" class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
+							<button mat-raised-button class="invite-btn" (click)="openShareDialog(dmp.id,dmp.label)">
 								<mat-icon>group_add</mat-icon>
 								{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}
 							</button>
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
index ab8af8a19..812b2daae 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
@@ -314,7 +314,7 @@
 	margin-bottom: 0.2rem;
 }
 
-::ng-deep mat-select .mat-select-arrow-wrapper {
+::ng-deep .versions-select mat-select .mat-select-arrow-wrapper {
 	vertical-align: bottom;
 }