From 3bf6c2d92778abde82be4423409178a44c7971cd Mon Sep 17 00:00:00 2001
From: gpapavgeri <gpapavgeri@cite.gr>
Date: Mon, 29 Jun 2020 10:53:56 +0300
Subject: [PATCH] dmp-overview_re-design_initial commit

---
 .../dmp/overview/dmp-overview.component.html  | 158 ++++-
 .../dmp/overview/dmp-overview.component.scss  | 584 +++++++++++-------
 dmp-frontend/src/assets/i18n/en.json          |   7 +
 dmp-frontend/src/assets/i18n/es.json          |   7 +
 dmp-frontend/src/assets/i18n/gr.json          |   7 +
 5 files changed, 524 insertions(+), 239 deletions(-)

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 072c3db51..1d2eec1fa 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
@@ -1,3 +1,146 @@
+<div class="main-content pl-5 pr-5">
+	<div class="container-fluid ml-5 mr-5">
+		<div *ngIf="dmp">
+			<div class="row mb-2">
+				<mat-icon class="chevron-icon">chevron_left</mat-icon>
+				<p class="label-text">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p>
+			</div>
+			<div class="row">
+				<div class="col-md-8 col-lg-8">
+					<div class="row">
+						<a mat-raised-button primary class="dmp-btn">
+							<span class="dmp-btn-text">{{ 'DATASET-LISTING.COLUMNS.DMP' | translate }}</span>
+						</a>
+						<p class="dmp-label ml-2">{{ dmp.label }}</p>
+					</div>
+					<div class="row d-flex align-items-center mt-3 mb-4 label-text">
+						<div *ngIf="isUserDMPRelated()" class="d-flex">
+							<p class="ml-0 mr-3 mb-0"
+								matTooltip="{{'DMP-OVERVIEW.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
+								{{ roleDisplayFromList(dmp.users) }}</p>
+						</div>
+						<div class="d-flex mr-4">Public</div>
+						<div class="d-flex mr-4">Locked</div>
+						<button class="d-flex mr-4 version-btn label-text">
+							{{'DMP-LISTING.COLUMNS.VERSION' | translate}}
+							<mat-select>
+								<mat-option *ngFor="let version of dmp.version" [value]="version">
+									{{version}}
+								</mat-option>
+							</mat-select>
+						</button>
+						<div class="d-flex mr-4">{{'GENERAL.STATUSES.EDIT' | translate}} : {{dmp.modifiedTime | date:"longDate"}}</div>
+					</div>
+					<div class="row">
+						<button *ngIf="isAuthenticated()" (click)="cloneClicked(dmp)" mat-mini-fab
+							class="mr-4" matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}">
+							<mat-icon class="actions-icon">content_copy</mat-icon>
+						</button>
+						<button *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="editClicked(dmp)" mat-mini-fab
+							class="mr-4" matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}">
+							<mat-icon class="actions-icon">create</mat-icon>
+						</button>
+						<button *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="deleteClicked()" mat-mini-fab
+							class="mr-4" matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}">
+							<mat-icon class="actions-icon">delete</mat-icon>
+						</button>
+						<button *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="finalize(dmp)" mat-mini-fab
+							class="mr-4">
+							<mat-icon class="actions-icon">lock_outline</mat-icon>
+						</button>
+					</div>
+					<div class="row title">{{'DMP-OVERVIEW.GRANT' | translate}}</div>
+					<div class="row dmp-label">{{ dmp.grant.label }}</div>
+					<div class="row title">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
+					<div class="row">
+						<div *ngFor="let researcher of dmp.researchers">
+							<div matTooltip="{{ researcher.name }}" class="avatar">{{ researcher.name }}</div>
+						</div>
+					</div>
+					<div class="row title">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
+					<div class="row desc-text" *ngIf="dmp.grant.description">
+						<p>{{ dmp.grant.description }}</p>
+					</div>
+					<div class="row title">{{'DMP-OVERVIEW.DATASETS-USED' | translate}}</div>
+					<div class="row">
+						<div *ngFor="let dataset of dmp.datasets; let i=index">
+							<div *ngIf="i < 9" (click)="datasetClicked(dataset.id)">
+								<!-- <p *ngIf="isDraftDataset(dataset)">
+									<mat-icon class="draft-bookmark">bookmark</mat-icon>
+									<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span>
+								</p>
+								<p *ngIf="!isDraftDataset(dataset)">
+									<mat-icon class="finalized-bookmark">bookmark</mat-icon>
+								</p> -->
+								<button mat-raised-button class="dataset-btn mb-2">
+									<div matTooltip="{{ dataset.datasetTemplate.label }}" class="dataset-btn-label">
+										{{ dataset.label }}: {{ dataset.datasetTemplate.label }}
+										<mat-icon>launch</mat-icon>
+									</div>
+								</button>
+							</div>
+							<!-- <div *ngIf="dmp.datasets.length > 9" class="gray-container d-flex justify-content-center">
+								<button mat-button (click)="datasetsClicked(dmp.id)" class="show-more">
+									<mat-icon class="mr-2">expand_more</mat-icon>{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
+								</button>
+							</div> -->
+						</div>
+					</div>
+					<div class="row mt-2 d-flex align-items-center">
+						<button class="add-dataset d-flex align-items-center" *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="addDataset(dmp.id)">
+							<mat-icon>add</mat-icon>
+						</button>
+						<span class="add-dataset">{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</span>
+					</div>
+				</div>
+				<div class="col-md-4 col-lg-4">
+					<div class="frame">
+						<div class="row ml-1">
+							<button mat-icon-button class="frame-button">
+								<mat-icon>archive</mat-icon>
+							</button>
+							{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}
+						</div>
+						<div class="row ml-1">
+							<button mat-icon-button class="frame-button">
+								<mat-icon>redo</mat-icon>
+							</button>
+							{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}
+						</div>
+						<div class="row ml-1">
+							<button mat-icon-button class="frame-button">
+								<mat-icon>add_to_photos</mat-icon>
+							</button>
+							{{ 'DMP-LISTING.ACTIONS.START-NEW-VERSION' | translate }}
+						</div>
+						<div class="row ml-1">
+							<button mat-icon-button class="frame-button">
+								<mat-icon>public</mat-icon>
+							</button>
+							{{ 'DMP-LISTING.ACTIONS.MAKE-PUBLIC' | translate }}
+						</div>
+					</div>
+
+					<div class="frame">
+						<div class="row ml-1">
+							<h3>{{'DMP-OVERVIEW.DMP-AUTHORS' | translate}}</h3>
+						</div>
+						<div class="row ml-1">
+							<button mat-raised-button class="frame-button invite-button">
+								<mat-icon>group_add</mat-icon>
+								{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+
+<!--
 <div class="main-content">
 	<div class="container-fluid">
 		<div *ngIf="dmp" class="card pb-4">
@@ -14,9 +157,11 @@
 								<button *ngIf="isUserOwner" mat-menu-item (click)="openShareDialog(dmp.id,dmp.label)">
 									<mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}
 								</button>
-								<!-- <button *ngIf="isDraftDmp(dmp) && isUserOwner" mat-menu-item (click)="addDataset(dmp.id)">
+								-->
+<!-- <button *ngIf="isDraftDmp(dmp) && isUserOwner" mat-menu-item (click)="addDataset(dmp.id)">
 									<mat-icon>add_box</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}
 								</button> -->
+<!--
 								<button *ngIf="isUserOwner" mat-menu-item (click)="newVersion(dmp.id, dmp.label)">
 									<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
 								</button>
@@ -160,15 +305,17 @@
 
 							<div class="row desc-container" *ngIf="dmp.grant.description">
 								<p #desc class="ml-3 mr-3 desc" [ngClass]="{'desc-expanded': expand}">{{ dmp.grant.description }}</p>
-								<button *ngIf="checkOverflow(desc)" mat-flat-button class="show-more col-12" (click)="expandDesc()"> <!-- (click)="grantClicked(dmp.grant.id)"> -->
-									<mat-icon class="mr-2">{{!expand ? 'expand_more' : 'expand_less'}}</mat-icon>
+								<button *ngIf="checkOverflow(desc)" mat-flat-button class="show-more col-12" (click)="expandDesc()"> -->
+<!-- (click)="grantClicked(dmp.grant.id)"> -->
+<!--<mat-icon class="mr-2">{{!expand ? 'expand_more' : 'expand_less'}}</mat-icon>
 									{{ (!expand ? 'GENERAL.ACTIONS.SHOW-MORE' : 'GENERAL.ACTIONS.SHOW-LESS') | translate }}
 								</button>
-							</div>
-							<!-- <button mat-flat-button class="show-more" (click)="grantClicked(dmp.grant.id)">
+							</div>-->
+<!-- <button mat-flat-button class="show-more" (click)="grantClicked(dmp.grant.id)">
 								<mat-icon class="mr-2">expand_more</mat-icon>
 								{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
 							</button> -->
+<!--
 
 							<a *ngIf="dmp.grant.uri" mat-raised-button class="visit-website" href="{{dmp.grant.uri}}" target="_blank">
 								<mat-icon class="mr-2">open_in_new</mat-icon>
@@ -193,3 +340,4 @@
 		</div>
 	</div>
 </div>
+-->
\ No newline at end of file
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 bd93feadb..a86c2cab6 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
@@ -1,256 +1,372 @@
-.card-content {
+
+.container-fluid {
+  padding: 30px;
+}
+
+.chevron-icon {
+  height: 12px;
+  opacity: 0.4;
+}
+
+.label-text {
+  font-size: 14px;
+  color: #848484;
+}
+
+.dmp-btn {
+  background: #129D99;
+  border-radius: 4px;
+}
+
+.dmp-btn-text {
+  width: 30px;
+  font-size: 14px;
+  color: #FFFFFF;
+  opacity: 0.8;
+}
+
+.dmp-label {
+  font-size: 20px;
+  font-weight: bold;
+  color: #212121;
   display: flex;
-  justify-content: center;
   align-items: center;
 }
 
-.actions {
-  margin-left: auto;
+.version-btn {
+  width: 94px;
+  height: 25px;
+  border: 1px solid #707070;
+  border-radius: 4px;
 }
 
-.more-horiz {
-  font-size: 28px;
-  color: #aaaaaa;
+.actions-btn {
+  background-color: #23BCBA;
+  margin-right: 23px;
+  // width: 35px;
+  // height: 35px;
+  // box-shadow: 0px 2px 6px #00000029;
 }
 
-.more-icon :hover {
-  color: #00b29f;
+.actions-icon {
+  color: white;
 }
 
-.export-btn {
-  padding-right: 6px;
+.title {
+  font-size: 20px;
+  color: #212121;
+  opacity: 0.6;
+  margin-top: 20px;
+  margin-bottom: 5px;
 }
 
-.menu-item {
-  width: 248px;
-}
-
-.dmp-info {
-  display: flex;
-  flex-direction: column;
-  //   margin: 2em 2em;
-  padding: 1em 1em;
-}
-
-.card-subtitle {
-  font-size: 14px;
-  font-weight: 700;
-  color: black;
-  text-transform: uppercase;
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-.gray-container {
-  letter-spacing: 5px;
-  color: #aaaaaa;
-}
-
-.grant-item,
-.researchers {
-  display: flex;
-  flex-direction: column;
-  border: 2px solid #f2f2f2;
-  margin-right: 2em;
-  margin-top: 2em;
-  padding: 0.5em;
-}
-
-.researchers-title {
-  width: 120px;
-  color: #089dbb;
-  background-color: white;
-  padding: 0px 10px;
-  margin-top: -16px;
-  cursor: default;
-  text-transform: uppercase;
-}
-
-.grant-title {
-  width: 68px;
-  color: #089dbb;
-  background-color: white;
-  padding: 0px 10px;
-  margin-top: -16px;
-  cursor: default;
-  text-transform: uppercase;
-}
-
-.collaborators {
-	display: flex;
-	flex-direction: column;
-	border: 2px solid #f2f2f2;
-	margin-right: 2em;
-	margin-top: 2em;
-	padding: 0.5em;
-  }
-
-  .collaborators-title {
-	width: 138px;
-	color: #089dbb;
-	background-color: white;
-	padding: 0px 10px;
-	margin-top: -16px;
-	cursor: default;
-	text-transform: uppercase;
-  }
-
-.container-header {
-  display: flex;
-  align-items: baseline;
-  margin-top: 0px;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-.container-header p {
-  letter-spacing: 5px;
-  color: #aaaaaa;
-  padding-top: 10px;
-  margin-bottom: 0px;
-}
-
-.container-header :hover {
-  color: #00b29f;
-}
-
-.dataset-card {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  border-radius: 6px;
-  color: #333333;
-  background: #fff;
-  width: 100%;
-  min-height: 90%;
-  max-height: 90%;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  cursor: pointer;
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
-}
-
-.dataset-card h4 {
-  padding-left: 1em;
-  margin: 1em 1.5em;
-}
-
-.show-more {
-  background-color: #ffffff00;
-  color: #00b29f;
-  font-weight: 700;
-  justify-self: center;
-}
-
-.visit-website {
-  background-color: #00b29f;
-  color: #ffffff;
-}
-
-.draft-bookmark {
-  color: #e7e6e6;
-  display: inline;
-  position: absolute;
-  margin-top: 0.5em;
-  margin-left: 0.5em;
-}
-
-.finalized-bookmark {
-  color: #08bd63;
-  //   color: #92d050;
-  display: inline;
-  position: absolute;
-  margin-top: 0.5em;
-  margin-left: 0.5em;
-}
-
-h4 span {
-  color: #089dbb;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.chip {
-  padding: 0.1em 1em;
-  margin-top: auto;
-  margin-bottom: 1em;
-  margin-left: 2.5em;
-  margin-right: 2.5em;
-  border-radius: 10em;
-  background-color: #0d7489;
-  //   background-color: rgba(0, 112, 192, 1);
-  //   background-color: rgb(70, 135, 230);
-  color: #fff;
-  text-transform: uppercase;
-  font-weight: 500;
-  max-width: 160px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.avatar {
-  padding: 0.1em 1em;
-  margin: 0.5em;
-  border-radius: 10em;
-  background-color: #eeeeee;
-  color: black;
-  max-width: 160px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.datasets-counter {
-  display: flex;
-  cursor: pointer;
-}
-
-.datasets-counter :hover {
-  color: #00b29f !important;
-}
-
-.total-info {
-  text-transform: uppercase;
-}
-
-.desc-container {
-	margin: 0px;
-}
-
-.desc {
-  position: relative;
-  overflow: hidden;
-  height: 80px;
-  font-size: 14px;
-  padding-top: 15px;
+.desc-text {
+  font-size: 16px;
+  color: #212121;
   margin-bottom: 30px;
-  cursor: default;
 }
 
-.desc-expanded {
-	overflow: visible !important;
-	height: auto !important;
-	position: inherit;
+.dataset-btn {
+  width: 506px;
+  height: 37px;
+  background-color: #F7DD72;
+  border-radius: 4px;
 }
 
-.desc:after {
-  content: "";
-  text-align: right;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 70%;
-  height: 1.4em;
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
+.dataset-btn-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #212121;
+  opacity: 0.8;
 }
 
-.interact-icon {
-	cursor: pointer;
-	margin-left: 32px;
+.add-dataset {
+  border: none;
+  font: Bold 14px/19px Open Sans;
+  color: #444444;
 }
 
-.interact-icon :hover {
-	color: #00b29f !important;
+
+.frame {
+  width: 370px;
+  height: 234px;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 5px #00000026;
+  border-radius: 4px;
+  opacity: 1;
+  margin-bottom: 20px;
 }
+
+.frame-button {
+  border: 1px solid #212121;
+  background: #FFFFFF 0% 0% no-repeat padding-box;
+}
+
+.invite-button{
+  border-radius: 30px;
+}
+
+
+
+
+
+
+
+
+// .card-content {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// }
+
+// .actions {
+//   margin-left: auto;
+// }
+
+// .more-horiz {
+//   font-size: 28px;
+//   color: #aaaaaa;
+// }
+
+// .more-icon :hover {
+//   color: #00b29f;
+// }
+
+// .export-btn {
+//   padding-right: 6px;
+// }
+
+// .menu-item {
+//   width: 248px;
+// }
+
+// .dmp-info {
+//   display: flex;
+//   flex-direction: column;
+//   //   margin: 2em 2em;
+//   padding: 1em 1em;
+// }
+
+// .card-subtitle {
+//   font-size: 14px;
+//   font-weight: 700;
+//   color: black;
+//   text-transform: uppercase;
+//   margin-top: 0;
+//   margin-bottom: 1rem;
+// }
+
+// .gray-container {
+//   letter-spacing: 5px;
+//   color: #aaaaaa;
+// }
+
+// .grant-item,
+// .researchers {
+//   display: flex;
+//   flex-direction: column;
+//   border: 2px solid #f2f2f2;
+//   margin-right: 2em;
+//   margin-top: 2em;
+//   padding: 0.5em;
+// }
+
+// .researchers-title {
+//   width: 120px;
+//   color: #089dbb;
+//   background-color: white;
+//   padding: 0px 10px;
+//   margin-top: -16px;
+//   cursor: default;
+//   text-transform: uppercase;
+// }
+
+// .grant-title {
+//   width: 68px;
+//   color: #089dbb;
+//   background-color: white;
+//   padding: 0px 10px;
+//   margin-top: -16px;
+//   cursor: default;
+//   text-transform: uppercase;
+// }
+
+// .collaborators {
+// 	display: flex;
+// 	flex-direction: column;
+// 	border: 2px solid #f2f2f2;
+// 	margin-right: 2em;
+// 	margin-top: 2em;
+// 	padding: 0.5em;
+//   }
+
+//   .collaborators-title {
+// 	width: 138px;
+// 	color: #089dbb;
+// 	background-color: white;
+// 	padding: 0px 10px;
+// 	margin-top: -16px;
+// 	cursor: default;
+// 	text-transform: uppercase;
+//   }
+
+// .container-header {
+//   display: flex;
+//   align-items: baseline;
+//   margin-top: 0px;
+//   text-transform: uppercase;
+//   cursor: pointer;
+// }
+
+// .container-header p {
+//   letter-spacing: 5px;
+//   color: #aaaaaa;
+//   padding-top: 10px;
+//   margin-bottom: 0px;
+// }
+
+// .container-header :hover {
+//   color: #00b29f;
+// }
+
+// .dataset-card {
+//   display: flex;
+//   flex-direction: column;
+//   min-width: 0;
+//   word-wrap: break-word;
+//   border-radius: 6px;
+//   color: #333333;
+//   background: #fff;
+//   width: 100%;
+//   min-height: 90%;
+//   max-height: 90%;
+//   margin-top: 1em;
+//   margin-bottom: 1em;
+//   cursor: pointer;
+//   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
+// }
+
+// .dataset-card h4 {
+//   padding-left: 1em;
+//   margin: 1em 1.5em;
+// }
+
+// .show-more {
+//   background-color: #ffffff00;
+//   color: #00b29f;
+//   font-weight: 700;
+//   justify-self: center;
+// }
+
+// .visit-website {
+//   background-color: #00b29f;
+//   color: #ffffff;
+// }
+
+// .draft-bookmark {
+//   color: #e7e6e6;
+//   display: inline;
+//   position: absolute;
+//   margin-top: 0.5em;
+//   margin-left: 0.5em;
+// }
+
+// .finalized-bookmark {
+//   color: #08bd63;
+//   //   color: #92d050;
+//   display: inline;
+//   position: absolute;
+//   margin-top: 0.5em;
+//   margin-left: 0.5em;
+// }
+
+// h4 span {
+//   color: #089dbb;
+//   font-weight: 600;
+//   text-transform: uppercase;
+// }
+
+// .chip {
+//   padding: 0.1em 1em;
+//   margin-top: auto;
+//   margin-bottom: 1em;
+//   margin-left: 2.5em;
+//   margin-right: 2.5em;
+//   border-radius: 10em;
+//   background-color: #0d7489;
+//   //   background-color: rgba(0, 112, 192, 1);
+//   //   background-color: rgb(70, 135, 230);
+//   color: #fff;
+//   text-transform: uppercase;
+//   font-weight: 500;
+//   max-width: 160px;
+//   white-space: nowrap;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+// }
+
+// .avatar {
+//   padding: 0.1em 1em;
+//   margin: 0.5em;
+//   border-radius: 10em;
+//   background-color: #eeeeee;
+//   color: black;
+//   max-width: 160px;
+//   white-space: nowrap;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+// }
+
+// .datasets-counter {
+//   display: flex;
+//   cursor: pointer;
+// }
+
+// .datasets-counter :hover {
+//   color: #00b29f !important;
+// }
+
+// .total-info {
+//   text-transform: uppercase;
+// }
+
+// .desc-container {
+// 	margin: 0px;
+// }
+
+// .desc {
+//   position: relative;
+//   overflow: hidden;
+//   height: 80px;
+//   font-size: 14px;
+//   padding-top: 15px;
+//   margin-bottom: 30px;
+//   cursor: default;
+// }
+
+// .desc-expanded {
+// 	overflow: visible !important;
+// 	height: auto !important;
+// 	position: inherit;
+// }
+
+// .desc:after {
+//   content: "";
+//   text-align: right;
+//   position: absolute;
+//   bottom: 0;
+//   right: 0;
+//   width: 70%;
+//   height: 1.4em;
+//   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
+// }
+
+// .interact-icon {
+// 	cursor: pointer;
+// 	margin-left: 32px;
+// }
+
+// .interact-icon :hover {
+// 	color: #00b29f !important;
+// }
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index a237cc9a3..dcbde5076 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -410,13 +410,18 @@
 			"NEW-WITH-WIZARD": "New DMP using the wizard",
 			"EDIT": "Edit",
 			"INVITE": "Invite Contributors",
+			"INVITE-SHORT": "Invite",
 			"ADD-DATASET": "Add Dataset Description To DMP",
+			"ADD-DATASET-SHORT": "Add Dataset",
 			"DATASETS": "List All DMP Dataset Descriptions",
 			"NEW-VERSION": "New Version",
+			"START-NEW-VERSION": "Start New Version",
 			"VIEW-VERSION": "All DMP Versions",
 			"CLONE": "Clone",
 			"DELETE": "Delete",
+			"DEPOSIT": "Deposit",
 			"EXPORT": "Export",
+			"MAKE-PUBLIC": "Make public",
 			"PUBLISH": "Publish",
 			"FINALIZE": "Finalize",
 			"UNFINALIZE": "Undo Finalization",
@@ -528,7 +533,9 @@
 	},
 	"DMP-OVERVIEW": {
 		"GRANT": "Grant",
+		"DMP-AUTHORS": "DΜP Authors",
 		"RESEARCHERS": "Researchers",
+		"DATASETS-USED": "Datasets used",
 		"COLLABORATORS": "Collaborators",
 		"TOOLTIP": {
 			"LEVEL-OF-ACCESS": "Level of Access",
diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json
index c90b65c5f..28d418e44 100644
--- a/dmp-frontend/src/assets/i18n/es.json
+++ b/dmp-frontend/src/assets/i18n/es.json
@@ -410,13 +410,18 @@
 			"NEW-WITH-WIZARD": "Nuevo PGD utilizando el asistente",
 			"EDIT": "Editar",
 			"INVITE": "Invitar a participantes",
+			"INVITE-SHORT": "Invitar",
 			"ADD-DATASET": "Añadir la descripción del Dataset al PGD",
+			"ADD-DATASET-SHORT": "Añadir Dataset",
 			"DATASETS": "List All PGD Dataset Descriptions",
 			"NEW-VERSION": "Nueva versión",
+			"START-NEW-VERSION": "Inicio Nueva versión",
 			"VIEW-VERSION": "Todas las versiones del PGD",
 			"CLONE": "Clonar",
 			"DELETE": "Borrar",
+			"DEPOSIT": "Depositar",
 			"EXPORT": "Expertar",
+			"MAKE-PUBLIC": "Hacer público",
 			"PUBLISH": "Publicar",
 			"FINALIZE": "Finalizar",
 			"UNFINALIZE": "Undo Finalization",
@@ -528,7 +533,9 @@
 	},
 	"DMP-OVERVIEW": {
 		"GRANT": "Grant",
+		"DMP-AUTHORS": "PGD Autores",
 		"RESEARCHERS": "Investigadores",
+		"DATASETS-USED": "Descripciones del Dataset Utilizadas",
 		"COLLABORATORS": "Colaboradores",
 		"TOOLTIP": {
 			"LEVEL-OF-ACCESS": "Nivel de acceso",
diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json
index 452a6ed8e..a56b92d08 100644
--- a/dmp-frontend/src/assets/i18n/gr.json
+++ b/dmp-frontend/src/assets/i18n/gr.json
@@ -410,13 +410,18 @@
 			"NEW-WITH-WIZARD": "Νέο Σχέδιο Διαχείρισης Δεδομένων χρησιμοποιώντας τον wizard",
 			"EDIT": "Επεξεργασία",
 			"INVITE": "Πρόσκληση Συνεργατών",
+			"INVITE-SHORT": "Πρόσκληση",
 			"ADD-DATASET": "Προσθήκη Περιγραφής Συνόλου Δεδομένων στο Σχέδιο Διαχείρισης Δεδομένων",
+			"ADD-DATASET-SHORT": "Προσθήκη Περιγραφής Συνόλου Δεδομένων",
 			"DATASETS": "Κατάλογος όλων των Περιγραφών Συνόλου Δεδομένων",
 			"NEW-VERSION": "Νέα Έκδοση",
+			"START-NEW-VERSION": "Νέα Έκδοση",
 			"VIEW-VERSION": "Όλες οι Εκδόσεις Σχεδίων Διαχείρισης Δεδομένων",
 			"CLONE": "Κλώνος",
 			"DELETE": "Διαγραφή",
+			"DEPOSIT": "Κατάθεση",
 			"EXPORT": "Εξαγωγή",
+			"MAKE-PUBLIC": "Δημοσίευση",
 			"PUBLISH": "Δημοσίευση",
 			"FINALIZE": "Οριστικοποίηση",
 			"UNFINALIZE": "Undo Finalization",
@@ -528,7 +533,9 @@
 	},
 	"DMP-OVERVIEW": {
 		"GRANT": "Επιχορήγηση",
+		"DMP-AUTHORS": "Συγγραφείς DΜP",
 		"RESEARCHERS": "Ερευνητές",
+		"DATASETS-USED": "Περιγραφές Συνόλων Δεδομένων Που Χρησιμοποιήθηκαν",
 		"COLLABORATORS": "Συνεργάτες",
 		"TOOLTIP": {
 			"LEVEL-OF-ACCESS": "Επίπεδο Πρόσβασης",