From 05fe3e57b8b185b2ef625de182218ce0062ddb15 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Thu, 9 May 2019 16:30:39 +0300
Subject: [PATCH] Styles: Dmp listing page and some general css changes

---
 .../src/app/core/model/dmp/dmp-listing.ts     |  2 +
 .../criteria/dataset-criteria.component.html  |  8 +-
 .../criteria/dataset-criteria.component.scss  |  5 -
 .../listing/dataset-listing.component.scss    | 68 +++++++-------
 .../dataset-listing-item.component.html       | 10 +-
 .../dataset-listing-item.component.ts         |  6 +-
 .../criteria/dmp-criteria.component.html      | 12 +--
 .../criteria/dmp-criteria.component.scss      |  5 -
 .../ui/dmp/listing/dmp-listing.component.html | 13 +--
 .../ui/dmp/listing/dmp-listing.component.scss | 41 ++++++---
 .../dmp-listing-item.component.html           | 92 +++++++++++--------
 .../dmp-listing-item.component.scss           | 39 ++++++++
 .../dmp-listing-item.component.ts             |  4 +
 .../explore-dmp-listing-item.component.html   |  6 +-
 .../explore-dmp-listing-item.component.scss   |  2 +-
 .../project-listing-item.component.html       |  4 +-
 .../project-listing-item.component.scss       |  2 +-
 .../listing/project-listing.component.scss    | 23 +++--
 dmp-frontend/src/styles.scss                  | 27 +++++-
 19 files changed, 225 insertions(+), 144 deletions(-)

diff --git a/dmp-frontend/src/app/core/model/dmp/dmp-listing.ts b/dmp-frontend/src/app/core/model/dmp/dmp-listing.ts
index 791e459b1..bd4434d4c 100644
--- a/dmp-frontend/src/app/core/model/dmp/dmp-listing.ts
+++ b/dmp-frontend/src/app/core/model/dmp/dmp-listing.ts
@@ -3,8 +3,10 @@ import { DmpStatus } from "../../common/enum/dmp-status";
 export interface DmpListingModel {
 	id: String;
 	label: String;
+	description: String;
 	status: DmpStatus;
 	project: String;
+	projectabbreviation: String;
 	profile: String;
 	creationTime: String;
 	modifiedTime: String;
diff --git a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
index 0335028d7..5aaa254c3 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.html
@@ -13,7 +13,7 @@
 			<!-- End of Search Filter -->
 
 			<!-- Status Filter-->
-			<div class="col-10 filter-category" [formGroup]="options">
+			<div class="col-10 gray-container" [formGroup]="options">
 				<h6 class="category-title">STATUS</h6>
 				<mat-list-item><mat-checkbox formControlName="getDrafts">{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</mat-checkbox></mat-list-item>
 				<mat-list-item><mat-checkbox formControlName="getFinalized">{{ 'TYPES.DATASET-STATUS.FINALISED' | translate }}</mat-checkbox></mat-list-item>
@@ -21,7 +21,7 @@
 			</div>
 			<!-- End of Status Filter-->
 			<!-- Related Project Filters -->
-			<div class="col-10 filter-category">
+			<div class="col-10 gray-container">
 				<h6 class="category-title">{{ 'DMP-RELATED-PROJECT.RELATED-PROJECT' | translate}}</h6>
 				<mat-form-field>
 					<input matInput placeholder="Select Organizations">
@@ -35,7 +35,7 @@
 			<!-- End of Related Projects Filters -->
 
 			<!-- Role Filter -->
-			<div class="col-10 filter-category">
+			<div class="col-10 gray-container">
 				<h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6>
 				<mat-radio-group aria-label="Select an option">
 					<mat-list-item>
@@ -52,7 +52,7 @@
 			<!-- End of Role Filter -->
 
 			<!-- Related Organization Filter -->
-			<div class="col-10 filter-category">
+			<div class="col-10 gray-container">
 				<h6 class="category-title">RELATED ORGANIZATION</h6>
 				<mat-form-field>
 					<input matInput placeholder="Select Organizations">
diff --git a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss
index 9d56a7993..f4822491e 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss
@@ -2,11 +2,6 @@
   margin-left: 1em;
 }
 
-.filter-category {
-  background-color: #f6f6f6;
-  margin: 5px 0px;
-}
-
 .category-title {
   color: #2e75b6;
   margin-top: 8px;
diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
index 4e233f9f3..c8073db0e 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
@@ -1,3 +1,34 @@
+::ng-deep .mat-paginator-container {
+  flex-direction: row-reverse !important;
+  justify-content: space-between !important;
+  background-color: #f6f6f6;
+  height: 30px;
+  min-height: 30px !important;
+}
+
+::ng-deep .mat-paginator-page-size {
+  height: 43px;
+}
+
+::ng-deep .mat-icon-button {
+  height: 30px !important;
+  font-size: 12px !important;
+}
+
+::ng-deep .mat-paginator-range-label {
+  margin: 15px 32px 0 24px !important;
+}
+
+::ng-deep .mat-paginator-range-actions {
+  width: 55% !important;
+  min-height: 43px !important;
+  justify-content: space-between;
+}
+
+::ng-deep .mat-paginator-navigation-previous {
+  margin-left: auto !important;
+}
+
 // .mat-table {
 //   margin: 24px;
 // }
@@ -35,37 +66,6 @@
 //   margin-top: 0px;
 // }
 
-::ng-deep .mat-paginator {
-	margin-top: auto;
-}
-
-::ng-deep .mat-paginator-container {
-	flex-direction: row-reverse !important;
-	justify-content: space-between !important;
-  background-color: #f6f6f6;
-  height: 30px;
-  min-height: 30px !important;
-}
-
-::ng-deep .mat-paginator-page-size {
-	height: 43px;
-}
-
-::ng-deep .mat-icon-button {
-	height: 30px !important;
-	font-size: 12px !important;
-}
-
-::ng-deep .mat-paginator-range-label {
-	margin: 15px 32px 0 24px !important;
-}
-
-::ng-deep .mat-paginator-range-actions {
-	width: 55% !important;
-	min-height: 43px !important;
-	justify-content: space-between;
-}
-
-::ng-deep .mat-paginator-navigation-previous {
-	margin-left: auto !important;
-}
+// ::ng-deep .mat-paginator {
+//   margin-top: auto;
+// }
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
index 8da3e109c..72f8aec5c 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
@@ -1,11 +1,11 @@
 <div class="listing-item row" (click)="itemClicked()">
 	<div class="col-auto">
-		<mat-icon *ngIf="draft" class="draft-bookmark">bookmark</mat-icon>
-		<mat-icon *ngIf="!draft" class="finalized-bookmark">bookmark</mat-icon>
+		<mat-icon *ngIf="isDraft" class="draft-bookmark">bookmark</mat-icon>
+		<mat-icon *ngIf="!isDraft" class="finalized-bookmark">bookmark</mat-icon>
 	</div>
 	<div class="col">
-		<h4 *ngIf="draft"><span>DRAFT:</span> {{ dataset.label }}</h4>
-		<h4 *ngIf="!draft">{{ dataset.label }}</h4>
+		<h4 *ngIf="isDraft"><span>DRAFT:</span> {{ dataset.label }}</h4>
+		<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
 		<p>{{ dataset.description }}</p>
 		<div class="info">
 			<h6>{{ dataset.dmp }}</h6>
@@ -19,4 +19,4 @@
 			<mat-icon>more_horiz</mat-icon>
 		</div> -->
 </div>
-<mat-divider *ngIf="showDivider"></mat-divider>
+<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->
diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts
index e26e53704..b04c98193 100644
--- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts
+++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts
@@ -12,13 +12,13 @@ export class DatasetListingItemComponent implements OnInit {
 	@Input() showDivider: boolean = true;
 	@Output() onClick: EventEmitter<DatasetListingModel> = new EventEmitter();
 
-	draft: boolean;
+	isDraft: boolean;
 
 	constructor() { }
 
 	ngOnInit() {
-		if (this.dataset.status == 0) { this.draft = true }
-		else { this.draft = false }
+		if (this.dataset.status == 0) { this.isDraft = true }
+		else { this.isDraft = false }
 	}
 
 	itemClicked() {
diff --git a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
index 6d63793f6..1ded81b9d 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
@@ -13,7 +13,7 @@
 			<!-- End of Search Filter -->
 
 			<!-- Visibility Filter-->
-			<div *ngIf="showProject" class="col-10 filter-category">
+			<div *ngIf="showProject" class="col-10 gray-container">
 				<h6 class="category-title">{{ 'TYPES.DMP-VISIBILITY.VISIBILITY' | translate }}</h6>
 				<mat-radio-group aria-label="Select an option" [formControl]="formGroup.get('status')">
 					<mat-list-item><mat-radio-button value="null">{{ 'TYPES.DMP-VISIBILITY.ANY' | translate }}</mat-radio-button></mat-list-item>
@@ -24,7 +24,7 @@
 			<!-- End of Visibility Filter-->
 
 			<!-- Related Project Filters -->
-			<div *ngIf="showProject" class="col-10 filter-category">
+			<div *ngIf="showProject" class="col-10 gray-container">
 				<h6 class="category-title">{{ 'DMP-RELATED-PROJECT.RELATED-PROJECT' | translate}}</h6>
 				<mat-form-field>
 					<app-multiple-auto-complete [formControl]="formGroup.get('projects')"
@@ -37,7 +37,7 @@
 			<!-- End of Related Projects Filters -->
 
 			<!-- Collaborators Filter -->
-			<div *ngIf="showProject" class="col-10 filter-category">
+			<div *ngIf="showProject" class="col-10 gray-container">
 				<h6 class="category-title">{{ 'DMP-RELATED-COLLABORATOR.RELATED-COLLABORATOR' | translate}}</h6>
 				<mat-form-field>
 					<input matInput placeholder="{{ 'DMP-RELATED-COLLABORATOR.SELECT-COLLABORATORS' | translate }}">
@@ -51,7 +51,7 @@
 			<!-- End of Collaborators Filter -->
 
 			<!-- Role Filter -->
-			<div *ngIf="showProject" class="col-10 filter-category">
+			<div *ngIf="showProject" class="col-10 gray-container">
 				<h6 class="category-title">{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</h6>
 				<mat-radio-group aria-label="Select an option">
 					<mat-list-item><mat-radio-button value="1">{{ 'TYPES.DATASET-ROLE.ANY' | translate }}</mat-radio-button></mat-list-item>
@@ -62,7 +62,7 @@
 			<!-- End of Role Filter -->
 
 			<!-- Related Organization Filter -->
-			<div *ngIf="showProject" class="col-10 filter-category">
+			<div *ngIf="showProject" class="col-10 gray-container">
 				<h6 class="category-title">{{ 'DMP-RELATED-ORGANIZATION.RELATED-ORGANIZATION' | translate }}</h6>
 				<mat-form-field>
 					<app-multiple-auto-complete [formControl]="formGroup.get('organisations')"
@@ -76,7 +76,7 @@
 
 			<!-- Import Button -->
 			<div class="col-10 import">
-				<button class="importButton" mat-raised-button color="primary"
+				<button class="importButton lightblue-btn" mat-raised-button color="primary"
 					(click)="fileSave($event)" type="button col-auto">
 					{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}
 				</button>
diff --git a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
index 93e394732..7bbec5a46 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
@@ -21,11 +21,6 @@
   margin-left: 1em;
 }
 
-.filter-category {
-  background-color: #f6f6f6;
-  margin: 5px 0px;
-}
-
 .category-title {
   color: #2e75b6;
   margin-top: 8px;
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
index 814f27e69..307046026 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
@@ -1,13 +1,13 @@
 <div class="main-content">
 	<div class="container-fluid">
 		<div class="card">
-			<div class="card-header card-header-blue d-flex">
+			<div class="card-header card-header-plain d-flex">
 				<div class="card-desc d-flex flex-column justify-content-center">
 					<h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h4>
 					<p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p>
 				</div>
 				<div class="d-flex align-items-center ml-auto p-2">
-					<button mat-raised-button color="primary" class="text-uppercase" [routerLink]="projectId ? ['/plans/new/project/', projectId] : ['./new'] ">
+					<button mat-raised-button color="primary" class="text-uppercase lightblue-btn" [routerLink]="projectId ? ['/plans/new/project/', projectId] : ['./new'] ">
 						<mat-icon>add</mat-icon> {{'DMP-LISTING.ACTIONS.NEW' | translate}}
 					</button>
 				</div>
@@ -17,11 +17,12 @@
 					<div class="col-3">
 						<app-dmp-criteria-component [showProject]="showProject" class="col-auto"></app-dmp-criteria-component>
 					</div>
-					<div class="col-9">
-						<div class="row" *ngFor="let item of listingItems; let i = index">
-							<app-dmp-listing-item-component class="col-12" [showDivider]="i != (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
+					<div class="col-9 pt-4">
+						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="top-paginator"></mat-paginator>
+						<div *ngFor="let item of listingItems; let i = index">
+							<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
 						</div>
-						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)"></mat-paginator>
+						<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="mt-2"></mat-paginator>
 					</div>
 				</div>
 			</div>
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
index 2c71ecd54..027648e92 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
@@ -1,38 +1,51 @@
-::ng-deep .mat-paginator {
-	margin-top: auto;
-}
-
 ::ng-deep .mat-paginator-container {
-	flex-direction: row-reverse !important;
-	justify-content: space-between !important;
+  flex-direction: row-reverse !important;
+  justify-content: space-between !important;
   background-color: #f6f6f6;
   height: 30px;
   min-height: 30px !important;
 }
 
 ::ng-deep .mat-paginator-page-size {
-	height: 43px;
+  height: 43px;
 }
 
 ::ng-deep .mat-icon-button {
-	height: 30px !important;
-	font-size: 12px !important;
+  height: 30px !important;
+  font-size: 12px !important;
 }
 
 ::ng-deep .mat-paginator-range-label {
-	margin: 15px 32px 0 24px !important;
+  margin: 15px 32px 0 24px !important;
 }
 
 ::ng-deep .mat-paginator-range-actions {
-	width: 55% !important;
-	min-height: 43px !important;
-	justify-content: space-between;
+  width: 55% !important;
+  min-height: 43px !important;
+  justify-content: space-between;
 }
 
 ::ng-deep .mat-paginator-navigation-previous {
-	margin-left: auto !important;
+  margin-left: auto !important;
 }
 
+
+.top-paginator ::ng-deep .mat-paginator-navigation-previous {
+	display: none !important;
+}
+
+.top-paginator ::ng-deep .mat-paginator-navigation-next {
+	display: none !important;
+}
+
+// .bot-paginator {
+// 	margin-top: auto;
+// }
+
+// ::ng-deep .mat-paginator {
+//   margin-top: auto;
+// }
+
 // .listing {
 //   .mat-card {
 //     margin: 1em 0;
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
index debf41f87..b90e4e486 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
@@ -1,48 +1,62 @@
-<div class="listing-item row">
-	<div class="col-auto">
-		<mat-icon>lock</mat-icon>
-	</div>
+<div class="listing-item">
 	<div class="col" (click)="itemClicked()">
 		<div class="row">
-			<h4 class="col-12 title">{{dmp.label}}</h4>
-			<h4 class="col-12 project-title">{{dmp.project}}</h4>
-		</div>
-		<div class="row d-flex align-items-center my-1">
-			<mat-icon class="col-auto type-icon">storage</mat-icon>
-			<h4 class="col-auto m-2 p-1">{{dmp.datasets.length}}</h4>
-			<div class="row" *ngFor="let profile of dmp.associatedProfiles">
-				<div class="col-auto chip ml-3 mr-5">{{profile.label}}</div>
+			<div class="col-12 gray-container container-header">
+				{{dmp.projectabbreviation}}
+				<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto" (click)="$event.stopImmediatePropagation();">
+					<mat-icon class="more-horiz">more_horiz</mat-icon>
+				</button>
+				<mat-menu #actionsMenu="matMenu">
+					<button mat-menu-item (click)="openShareDialog(dmp.id,dmp.label)">
+						<mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}
+					</button>
+					<button mat-menu-item (click)="addDataset(dmp.id)">
+						<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}
+					</button>
+					<button mat-menu-item (click)="showDatasets(dmp.id, dmp.label)">
+						<mat-icon>list</mat-icon>{{'DMP-LISTING.ACTIONS.DATASETS' | translate}}
+					</button>
+					<button mat-menu-item (click)="viewVersions(dmp.groupId, dmp.label)">
+						<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
+					</button>
+				</mat-menu>
 			</div>
 		</div>
-		<div class="row d-flex align-items-center my-1">
-			<mat-icon class="col-auto type-icon">settings</mat-icon>
-			<h4 class="col-auto m-0 p-0">OWNER</h4>
+		<div class="row">
+			<div class="col-12 about-item">
+				<mat-icon *ngIf="isDraft" class="draft-icon">lock</mat-icon>
+				<mat-icon *ngIf="!isDraft">lock</mat-icon>
+				<h4 class="title" *ngIf="isDraft"><span>DRAFT:</span>{{dmp.label}}</h4>
+				<h4 class="title" *ngIf="!isDraft">{{dmp.label}}</h4>
+			</div>
 		</div>
-		<div class="row d-flex align-items-center my-1">
-			<mat-icon class="col-auto type-icon">group</mat-icon>
+		<div class="row">
+			<div class="col-12">
+				<p class="mt-1 mb-2">{{dmp.description}}</p>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-12 about-item">
+				<mat-icon class="gray-icon pt-2">settings</mat-icon>
+				<h4 class="mt-2 ml-1 mr-3 p-1">OWNER</h4>
+
+				<mat-icon class="gray-icon pt-2">storage</mat-icon>
+				<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
+
+				<mat-icon class="gray-icon pt-2">assignment</mat-icon>
+				<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
+					<div class="chip ml-2 mr-2">{{profile.label}}</div>
+				</div>
+				<p>Published {{dmp.creationTime | date: "shortDate"}}</p>
+			</div>
+		</div>
+		<!-- <div class="row d-flex align-items-center my-1">
+			<mat-icon class="col-auto gray-icon">group</mat-icon>
 			<div class="row" *ngFor="let user of dmp.users">
-				<div class="col-auto dmp-squared-chip mr-2">{{user.name}}</div>
+				<div class="col-auto squared-chip mr-2">{{user.name}}</div>
 			</div>
-		</div>
-	</div>
-	<div class="col-auto">
-		<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
-			<mat-icon>more_horiz</mat-icon>
-		</button>
-		<mat-menu #actionsMenu="matMenu">
-			<button mat-menu-item (click)="openShareDialog(dmp.id,dmp.label)">
-				<mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}
-			</button>
-			<button mat-menu-item (click)="addDataset(dmp.id)">
-				<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}
-			</button>
-			<button mat-menu-item (click)="showDatasets(dmp.id, dmp.label)">
-				<mat-icon>list</mat-icon>{{'DMP-LISTING.ACTIONS.DATASETS' | translate}}
-			</button>
-			<button mat-menu-item (click)="viewVersions(dmp.groupId, dmp.label)">
-				<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
-			</button>
-		</mat-menu>
+		</div> -->
 	</div>
+
 </div>
-<mat-divider *ngIf="showDivider"></mat-divider>
+<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
index e69de29bb..54ff403a2 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
@@ -0,0 +1,39 @@
+.gray-container {
+  letter-spacing: 5px;
+  color: #aaaaaa;
+}
+
+.container-header {
+  display: flex;
+  align-items: baseline;
+  margin-top: 0px;
+  text-transform: uppercase;
+}
+
+.about-item {
+  display: flex;
+}
+
+.about-item .length {
+  color: rgb(70, 135, 240);
+}
+
+.about-item .title {
+  margin: 2px 10px;
+}
+
+.about-item p {
+  margin-left: auto;
+  margin-bottom: 0px;
+  padding-top: 7px;
+  color: #aaaaaa;
+}
+
+.draft-icon {
+  color: #aaaaaa;
+}
+
+.more-horiz {
+  font-size: 28px;
+  color: #aaaaaa;
+}
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts
index a516dafa5..650816797 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts
@@ -15,9 +15,13 @@ export class DmpListingItemComponent implements OnInit {
 	@Input() showDivider: boolean = true;
 	@Output() onClick: EventEmitter<DmpListingModel> = new EventEmitter();
 
+	isDraft: boolean;
+
 	constructor(private router: Router, private dialog: MatDialog) { }
 
 	ngOnInit() {
+		if (this.dmp.status == 0) { this.isDraft = true }
+		else { this.isDraft = false }
 	}
 
 	itemClicked() {
diff --git a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
index aab3e01ca..ce66de578 100644
--- a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
@@ -8,18 +8,18 @@
 			<h4 class="col-12 project-title">{{dmp.project}}</h4>
 		</div>
 		<div class="row d-flex align-items-center my-1">
-			<mat-icon class="col-auto type-icon">storage</mat-icon>
+			<mat-icon class="col-auto gray-icon">storage</mat-icon>
 			<h4 class="col-auto m-2 p-1">{{dmp.associatedProfiles.length}}</h4>
 			<div class="row" *ngFor="let profile of dmp.associatedProfiles">
 				<div class="col-auto explore-dmp-chip ml-2">{{profile.label}}</div>
 			</div>
 		</div>
 		<div class="row d-flex align-items-center my-1">
-			<mat-icon class="col-auto type-icon">settings</mat-icon>
+			<mat-icon class="col-auto gray-icon">settings</mat-icon>
 			<h4 class="col-auto m-0 p-0">OWNER</h4>
 		</div>
 		<div class="row d-flex align-items-center my-1">
-			<mat-icon class="col-auto type-icon">group</mat-icon>
+			<mat-icon class="col-auto gray-icon">group</mat-icon>
 			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
 			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
 			<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
diff --git a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
index 392b76645..15940c5de 100644
--- a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
@@ -11,7 +11,7 @@
 		color: rgb(93, 125, 173);
 	}
 
-	.type-icon {
+	.gray-icon {
 		color: rgb(191, 191, 191);
 	}
 
diff --git a/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.html b/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.html
index ba1566b83..6760107d2 100644
--- a/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.html
@@ -8,11 +8,11 @@
 			<h4 class="col-12 project-title">{{project.abbreviation}}</h4>
 		</div>
 		<div class="row d-flex align-items-center my-1">
-			<mat-icon class="col-auto type-icon">desc</mat-icon>
+			<mat-icon class="col-auto gray-icon">desc</mat-icon>
 			<span class="col-auto m-2 p-1">{{project.description}}</span>
 		</div>
 		<div class="row d-flex align-items-center my-1">
-			<mat-icon class="col-auto type-icon">settings</mat-icon>
+			<mat-icon class="col-auto gray-icon">settings</mat-icon>
 			<h4 class="col-auto m-2 p-1">{{project.startDate | date:'shortDate'}}</h4> - <h4 class="col-auto m-2 p-1">{{project.endDate | date:'shortDate'}}</h4>
 		</div>
 	</div>
diff --git a/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.scss b/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.scss
index 7165dbded..bc76c4282 100644
--- a/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/project/listing/listing-item/project-listing-item.component.scss
@@ -11,7 +11,7 @@
 		color: rgb(93, 125, 173);
 	}
 
-	.type-icon {
+	.gray-icon {
 		color: rgb(191, 191, 191);
 	}
 
diff --git a/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss b/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss
index a1dde24bb..8d075edf1 100644
--- a/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss
+++ b/dmp-frontend/src/app/ui/project/listing/project-listing.component.scss
@@ -2,17 +2,17 @@
 	.mat-card {
 	  margin: 1em 0;
 	}
-  
+
 	.col-9 {
 	  display: flex;
 	  flex-direction: column;
 	}
   }
-  
-  ::ng-deep .mat-paginator {
-	margin-top: auto;
-  }
-  
+
+//   ::ng-deep .mat-paginator {
+// 	margin-top: auto;
+//   }
+
   ::ng-deep .mat-paginator-container {
 	flex-direction: row-reverse !important;
 	justify-content: space-between !important;
@@ -20,27 +20,26 @@
 	height: 30px;
 	min-height: 30px !important;
   }
-  
+
   ::ng-deep .mat-paginator-page-size {
 	height: 43px;
   }
-  
+
   ::ng-deep .mat-icon-button {
 	height: 30px !important;
 	font-size: 12px !important;
   }
-  
+
   ::ng-deep .mat-paginator-range-label {
 	margin: 15px 32px 0 24px !important;
   }
-  
+
   ::ng-deep .mat-paginator-range-actions {
 	width: 55% !important;
 	min-height: 43px !important;
 	justify-content: space-between;
   }
-  
+
   ::ng-deep .mat-paginator-navigation-previous {
 	margin-left: auto !important;
   }
-  
\ No newline at end of file
diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss
index 33a35a6b9..e8c203377 100644
--- a/dmp-frontend/src/styles.scss
+++ b/dmp-frontend/src/styles.scss
@@ -30,10 +30,15 @@ $theme: mat-light-theme($primary, $accent);
   color: #111010;
 }
 
+.lightblue-btn {
+  background-color: rgb(70, 135, 240) !important;
+}
+
 .listing-item {
-  margin-top: 2em;
-  margin-bottom: 2em;
+  margin-top: 0.5em;
+  padding: 0.5em;
   cursor: pointer;
+  border: 3px solid #f2f2f2;
 
   .title {
     color: black;
@@ -43,11 +48,20 @@ $theme: mat-light-theme($primary, $accent);
     color: rgb(93, 125, 173);
   }
 
-  .type-icon {
+  .gray-icon {
     color: rgb(191, 191, 191);
   }
 
   .chip {
+    padding: 0.1em 1em;
+    border-radius: 10em;
+    background-color: rgb(70, 135, 230);
+    color: #fff;
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+
+  .bordered-chip {
     padding: 0.1em 1em;
     border: 0.1em solid rgb(218, 227, 243);
     border-radius: 10em;
@@ -115,7 +129,7 @@ $theme: mat-light-theme($primary, $accent);
   }
 
   h4 span {
-    color: #0070c0;
+    color: #619ce3;
     font-weight: 600;
   }
 }
@@ -130,3 +144,8 @@ $theme: mat-light-theme($primary, $accent);
     flex-direction: column;
   }
 }
+
+.gray-container {
+  background: linear-gradient(180deg, #f6f6f6, #fff);
+  margin: 5px 0px;
+}