From 4e93bf73877508acf88d44f698fbc6d5021c4c72 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Thu, 20 Jun 2019 10:25:26 +0300
Subject: [PATCH] Adds full-width bar on top of datasets-tab - (Issue #117)

---
 .../datasets-tab/datasets-tab.component.html       | 14 ++++++++++----
 .../datasets-tab/datasets-tab.component.scss       |  4 ++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dmp/editor/datasets-tab/datasets-tab.component.html b/dmp-frontend/src/app/ui/dmp/editor/datasets-tab/datasets-tab.component.html
index ac6958b70..c19c46f09 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/datasets-tab/datasets-tab.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/datasets-tab/datasets-tab.component.html
@@ -1,15 +1,21 @@
 <div class="container-fluid">
 	<div class="row d-flex">
-		<div class="col-12 add-dataset" *ngIf="!isPublic" (click)="addDataset(dmp.id)">
-			<mat-icon>add</mat-icon><span>{{ 'DMP-LISTING.ACTIONS.ADD-DATASET' | translate }}</span>
+		<div class="col-12 pr-4 pl-4" *ngIf="!isPublic">
+			<div class="add-dataset">
+				<button mat-raised-button color="primary" (click)="addDataset(dmp.id)"
+					class="lightblue-btn ml-2 text-uppercase">
+					<mat-icon>add</mat-icon> {{ 'DMP-LISTING.ACTIONS.ADD-DATASET' | translate }}
+				</button>
+			</div>
 		</div>
 	</div>
-	<div class="row pt-2 pb-4" *ngIf="dmp.datasets">
+	<div class="row pt-2 pb-4 pl-3" *ngIf="dmp.datasets">
 		<div *ngFor="let dataset of dmp.datasets" class="col-3">
 			<div class="dataset-card" (click)="datasetClicked(dataset.id)">
 				<mat-icon *ngIf="isDraft(dataset)" class="draft-bookmark">bookmark</mat-icon>
 				<mat-icon *ngIf="!isDraft(dataset)" class="finalized-bookmark">bookmark</mat-icon>
-				<h4 *ngIf="isDraft(dataset)"><span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
+				<h4 *ngIf="isDraft(dataset)"><span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span>
+					{{ dataset.label }}</h4>
 				<h4 *ngIf="!isDraft(dataset)">{{ dataset.label }}</h4>
 				<div matTooltip="{{ dataset.profile }}" class="chip">
 					{{ dataset.profile }}</div>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/datasets-tab/datasets-tab.component.scss b/dmp-frontend/src/app/ui/dmp/editor/datasets-tab/datasets-tab.component.scss
index f73b2294b..b6edcaa28 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/datasets-tab/datasets-tab.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/editor/datasets-tab/datasets-tab.component.scss
@@ -65,9 +65,9 @@
   display: flex;
   justify-content: flex-end;
   margin-top: 1.5em;
-  padding-right: 2em;
+  padding: 0.5em 0.8em;
   cursor: pointer;
-  color: #0070c0;
+  background-color: rgb(248, 248, 248);
 }
 
 h4 span {