styling changes

*faq dialog, user-fields, dmp-upload dialog in progress

dmp-frontend/src/app/ui/dmp/new/upload-dialogue/dmp-upload-dialog.component.html

@@ -1,5 +1,5 @@
 <div class="confirmation-dialog">
-	<div class="row">
+	<div class="d-flex justify-content-between">
 		<div class="confirmation-message col align-self-center">
 			<h4>{{'DMP-UPLOAD.TITLE' | translate}}</h4>
 		</div>
@@ -7,7 +7,7 @@
 			<mat-icon>close</mat-icon>
 		</div>
 	</div>
-	<div class="row">
+	<div class="">
 		<div class="upload-form col-12">
 			<mat-form-field>
 				<input class="uploadInput" [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}" name="uploadFileInput">
@@ -39,8 +39,8 @@
 			</mat-form-field>
 		</div> -->
 	</div>
-	<div class="row mt-3">
+	<div class="d-flex justify-content-between">
-		<div class="col-auto ml-auto">
+		<div class="col-auto">
 			<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
 		</div>
 		<div class="col-auto">

dmp-frontend/src/app/ui/dmp/new/upload-dialogue/dmp-upload-dialog.component.scss

@@ -1,4 +1,6 @@
 .confirmation-dialog {
+	padding: 1.0rem;
+
 	.confirmation-message {
 		padding-bottom: 20px;
 	}

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

@@ -1,27 +1,31 @@
-<div *ngIf="enableSorting==true; else sortingDisabled" class="col-12" cdkDropList (cdkDropListDropped)="dropUsers($event)">
+<div class="invite-users-dialog-wrapper">
-	hello!
+	<div *ngIf="enableSorting==true; else sortingDisabled" class="col-12" cdkDropList (cdkDropListDropped)="dropUsers($event)">
-	<ng-container *ngTemplateOutlet="userForm"></ng-container>	
+		<ng-container *ngTemplateOutlet="userForm"></ng-container>	
-</div>
+	</div>
-	
-<ng-template class="col-12" #sortingDisabled>
-	<ng-container *ngTemplateOutlet="userForm"></ng-container>	
-</ng-template>
 
-<div class="row">
+	<ng-template class="col-12" #sortingDisabled>
-	<div class="col">
+		<ng-container *ngTemplateOutlet="userForm"></ng-container>	
-		<button mat-icon-button (click)="addUser()" [disabled]="form.disabled">
+	</ng-template>
-			<mat-icon>add</mat-icon>
+
-		</button>
+	<div class="row">
+		<div class="col">
+			<button mat-icon-button (click)="addUser()" [disabled]="form.disabled">
+				<mat-icon>add</mat-icon>
+			</button>
+		</div>
 	</div>
 </div>
 
 <ng-template #userForm>
-	<div *ngFor="let user of form.get('users').controls; let userIndex=index;" cdkDrag class="user-fields-wrapper" [cdkDragDisabled]="form.disabled">
+	<div *ngFor="let user of form.get('users').controls; let userIndex=index;" cdkDrag class="mb-4 user-fields-wrapper" [cdkDragDisabled]="form.disabled">
-		<div class="">
+		<!-- <div class="pb-2 col-auto">
 			<span style="font-size: 15px;">{{userIndex + 1}}</span>
+		</div> -->
+		<div class="pb-2 mb-1 col-auto">
+				<span class="col-auto" style="font-size: 18px;">{{userIndex + 1}}</span>
 		</div>
 		<div *ngIf="enableSorting==true" class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': form.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
-		<div class="col-auto">
+		<div class="pb-4 col-auto">
 			<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="user.get('userType')">
 				<div *ngFor="let userType of dmpUserTypeEnumValues">
 					<mat-button-toggle class="lang-button" [value]="userType">{{enumUtils.toDmpUserTypeString(userType)}}</mat-button-toggle>

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

@@ -1,3 +1,9 @@
+.invite-users-dialog-wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: baseline;
+}
+
 .drag-handle {
 	cursor: move; 
 	color: var(--primary-color);

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

@@ -1,5 +1,5 @@
 <div class="faq">
-	<div class="row d-flex flex-row">
+	<div class="d-flex flex-row">
 		<div mat-dialog-title class="col-auto">
 			{{'FAQ.TITLE' | translate}}
 		</div>
@@ -7,7 +7,7 @@
 			<mat-icon class="clear-icon">close</mat-icon>
 		</div>
 	</div>
-	<div mat-dialog-content class="row pr-0">
+	<div mat-dialog-content class="row pr-4">
 		<app-faq-content [isDialog]="isDialog"></app-faq-content>
 	</div>
 	<div mat-dialog-actions class="row">

dmp-frontend/src/app/ui/faq/faq-content/faq-content.component.html

@@ -1,5 +1,6 @@
 <div class="container-fluid">
 	<div class="row">
+		<div *ngIf="faqHTMLUrl==null">hello!</div>
 		<iframe *ngIf="faqHTMLUrl" class="iframe" [src]="faqHTMLUrl"></iframe>
 	</div>
 </div>

dmp-frontend/src/app/ui/faq/faq-content/faq-content.component.scss

@@ -9,7 +9,7 @@ img {
 
 .iframe {
 	width: 100%;
-	height: 65vh;
+	height: 58vh;
 	margin: 0px;
 	border: none;
 	max-width: 100%;