Merge branch 'css-config-changes' into Development

dmp-frontend/angular.json

@@ -30,7 +30,6 @@
 						"scripts": [
 							"node_modules/cookieconsent/build/cookieconsent.min.js",
 							"node_modules/tinymce/tinymce.min.js"
-
 						],
 						"vendorChunk": true,
 						"extractLicenses": false,

dmp-frontend/src/app/core/services/configuration/configuration.service.ts

@@ -41,6 +41,11 @@ export class ConfigurationService extends BaseComponent {
 		return this._defaultLanguage;
 	}
 
+	private _availableLanguages: any[] = [];
+	get availableLanguages(): any[] {
+		return this._availableLanguages;
+	}
+
 	private _loginProviders: LoginProviders;
 	get loginProviders(): LoginProviders {
 		return this._loginProviders;
@@ -127,6 +132,7 @@ export class ConfigurationService extends BaseComponent {
 		this._helpService = HelpService.parseValue(config.HelpService);
 		this._defaultCulture = config.defaultCulture;
 		this._defaultLanguage = config.defaultLanguage;
+		this._availableLanguages = config.availableLanguages;
 		this._loginProviders = LoginProviders.parseValue(config.loginProviders);
 		this._logging = Logging.parseValue(config.logging);
 		this._lockInterval = config.lockInterval;

dmp-frontend/src/app/core/services/language/language.service.ts

@@ -7,8 +7,6 @@ import { BaseHttpService } from '../http/base-http.service';
 import { Language } from '@app/models/language/Language';
 import { ConfigurationService } from '../configuration/configuration.service';
 
-const availableLanguages: any[] = require('../../../../assets/resources/language.json');
-
 @Injectable()
 export class LanguageService {
 	private currentLanguage: string;
@@ -43,7 +41,7 @@ export class LanguageService {
 
 	public getCurrentLanguageName() {
 		let result: string = '';
-		availableLanguages.forEach(language => {
+		this.configurationService.availableLanguages.forEach(language => {
 			if (language.value === this.currentLanguage) {
 				result = this.translate.instant(language.label);
 			}

dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss

@@ -65,7 +65,7 @@
 		margin: 0px 5px 0px 10px;
 	}
 	mat-icon:hover {
-		color: #129d99;
+		color: var(--primary-color);
 	}
 }
 

dmp-frontend/src/app/library/export-method-dialog/export-method-dialog.component.scss

@@ -10,7 +10,7 @@
 
 	button {
 		// background-color: #aaaaaa;
-		background-color: #00b29f;
+		background-color: var(--primary-color-3);
 		color: #ffffff;
 	}
 }

dmp-frontend/src/app/library/guided-tour/guided-tour.component.html

@@ -37,8 +37,7 @@
                 </div>
             </div>
             <div class="col-auto p-0 d-flex align-items-end">
-				<img src="../../../assets/splash/assets/img/2_Sign_in/Png/Sign In - Copy.png" width="190px" height="210px">
+				<img src="../../../assets/images/guided-tour-side.png">
-				<!-- <div class="argos-present-img"></div> -->
 			</div>
         </div>
     </div>

dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss

@@ -211,9 +211,9 @@ ngx-guided-tour {
 				// float: right;
 				min-width: 133px;
 				height: 40px;
-				border: 1px solid #129d99;
+				border: 1px solid var(--primary-color);
 				background: #ffffff 0% 0% no-repeat padding-box;
-				color: #129d99;
+				color: var(--primary-color);
 			}
 
 			.next-button {
@@ -231,7 +231,7 @@ ngx-guided-tour {
 				padding-left: 1em;
 				padding-right: 1em;
 				min-width: 101px;
-				background: #129d99 0% 0% no-repeat padding-box;
+				background: var(--primary-color) 0% 0% no-repeat padding-box;
 			}
 
 			/*custom add*/
@@ -245,16 +245,5 @@ ngx-guided-tour {
 				border-radius: 30px;
 			}
 		}
-
-		/*custom add*/
-		.argos-present-img {
-			background: url("../../../assets/splash/assets/img/2_Sign_in/Svg/Sign\ In.svg") no-repeat;
-			min-width: 176px;
-			height: 220px;
-			position: relative;
-			top: 110px;
-			left: -85px;
-			border-top: none;
-		}
 	}
 }

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.scss

@@ -15,7 +15,7 @@
 
 //Palete
 
-$blue-color : #129D99;
+$blue-color : var(--primary-color);
 $blue-color-light: #5cf7f2;
 
 .actions-list{

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.scss

@@ -14,7 +14,7 @@ mat-radio-button{
 }
 
 li.list-inline-item{
-  color: #129D99;
+  color: var(--primary-color);
   .mat-icon{
     vertical-align: bottom;
   }
@@ -27,7 +27,7 @@ li.list-inline-item{
     color: #212121;
   }
   .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
-    background-color:#129D99 ;
+    background-color:var(--primary-color) ;
   }
   .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
     background-color:rgba(0,178,159,0.34);

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.scss

@@ -1,4 +1,4 @@
-$blue-color : #129D99;
+$blue-color : var(--primary-color);
 $blue-color-light: #5cf7f2;
 
 
@@ -33,7 +33,7 @@ $blue-color-light: #5cf7f2;
 }
 .actions-list{
   //   border: 1px solid $blue-color;
-  // box-shadow: 0px 3px 12px #129D9999;
+  // box-shadow: 0px 3px 12px var(--primary-color)99;
   border-radius: 4px;
   // padding-top: 1rem;
   padding: 1em 0.9em;
@@ -59,7 +59,7 @@ $blue-color-light: #5cf7f2;
       margin-right: 0.5em;
       margin-left: -.09em;
       height: auto;
-      color: #129D99;;
+      color: var(--primary-color);;
     }
     .input_icon{
       width: 14px;

dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss

@@ -72,7 +72,7 @@
 	transition-timing-function: ease-out;
 	transition-delay: 50ms;
 	box-shadow: 0px 1px 2px #bfbfbf;
-	background-color: #F7DD72;
+	background-color: var(--secondary-color);
 }
 #progress-container{
 	box-shadow: 1px 1px 6px #00000029;;
@@ -81,8 +81,8 @@
 // .import-btn {
 // 	background: #ffffff 0% 0% no-repeat padding-box;
 // 	border-radius: 30px;
-// 	// color: #129d99;
+// 	// color: var(--primary-color);
-// 	// border: 1px solid #129d99;
+// 	// border: 1px solid var(--primary-color);
 // 	padding-left: 2em;
 // 	padding-right: 2em;
 // 	color: #000;
@@ -90,7 +90,7 @@
 //   }
 .navigate-btn {
 	border-radius: 30px;
-	background-color: #f7dd72;
+	background-color: var(--secondary-color);
 	border: 1px solid transparent;
 	padding-left: 2em;
 	padding-right: 2em;
@@ -108,7 +108,7 @@ color: #FFF;
 
 .create-section-btn {
 	border-radius: 30px;
-	background-color: #f7dd72;
+	background-color: var(--secondary-color);
 	border: 1px solid transparent;
 	padding-left: 1em;
 	padding-right: 1em;
@@ -117,21 +117,21 @@ color: #FFF;
 }
 
 
-$blue-color : #129D99;
+$blue-color : var(--primary-color);
 $blue-color-light: #5cf7f2;
 
 .finalize-btn {
 	border-radius: 30px;
-	border: 1px solid #129D99;
+	border: 1px solid var(--primary-color);
 	background: transparent;
 	padding-left: 2em;
 	padding-right: 2em;
 	box-shadow: 0px 3px 6px #1E202029;
-	color: #129D99;
+	color: var(--primary-color);
 }
 .template_action_btn{
 	border-radius: 30px;
-	border: 1px solid #129D99;
+	border: 1px solid var(--primary-color);
 	background: transparent;
 	//padding-left: 2em;
 	//padding-right: 2em;
@@ -139,10 +139,10 @@ $blue-color-light: #5cf7f2;
 	min-width: 110px;
 	width: auto;
 	box-shadow: 0px 3px 6px #1E202029;
-	color: #129D99;
+	color: var(--primary-color);
 	flex: 0 0 auto;
 	&.save-btn{
-		background-color: #f7dd72;
+		background-color: var(--secondary-color);
 		border: 1px solid transparent;
 		//padding-left: 2em;
 		//padding-right: 2em;
@@ -196,7 +196,7 @@ $blue-color-light: #5cf7f2;
 
 .actions-list{
 	//   border: 1px solid $blue-color;
-	box-shadow: 0px 3px 12px #129D9999;
+	box-shadow: 0px 3px 12px var(--primary-color)99;
 	border-radius: 4px;
 	// padding-top: 1rem;
 	padding: 1em 0.9em;
@@ -220,7 +220,7 @@ $blue-color-light: #5cf7f2;
 			margin-right: 0.5em;
 			margin-left: -.09em;
 			height: auto;
-			color: #129D99;;
+			color: var(--primary-color);;
 		}
 		.input_icon{
 			width: 14px;
@@ -322,7 +322,7 @@ $blue-color-light: #5cf7f2;
 	position: fixed;
 	bottom: 20em;
 	right: 2em;
-	color: #129D99 !important;
+	color: var(--primary-color) !important;
 	cursor: pointer;
 	font-size: 1rem;
 	font-weight: 400;

dmp-frontend/src/app/ui/admin/dataset-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.scss

@@ -15,12 +15,12 @@ min-width: 101px;
 
 .next-btn {
 	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
 	border-radius: 30px;
 	opacity: 1;
 min-width: 101px;
 	height: 43px;
-	color: #129d99;
+	color: var(--primary-color);
 	font-weight: 500;
 }
 
@@ -34,7 +34,7 @@ min-width: 101px;
 }
 
 .next-btn:not([disabled]):hover {
-	background-color: #129d99;
+	background-color: var(--primary-color);
 	color: #ffffff;
 }
 
@@ -86,15 +86,15 @@ min-width: 101px;
 	width: 156px;
 	height: 44px;
 	color: #ffffff;
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1e202029;
 	border-radius: 30px;
 }
 
 .attach-file:hover {
 	background-color: #ffffff;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
-	color: #129d99;
+	color: var(--primary-color);
 }
 
 .close-btn:hover{

dmp-frontend/src/app/ui/admin/dataset-profile/listing/dataset-profile-listing.component.scss

@@ -104,8 +104,8 @@ mat-row:hover {
 .import-btn {
   background: #ffffff 0% 0% no-repeat padding-box;
   border-radius: 30px;
-  // color: #129d99;
+  // color: var(--primary-color);
-  // border: 1px solid #129d99;
+  // border: 1px solid var(--primary-color);
   padding-left: 2em;
   padding-right: 2em;
   color: #000;
@@ -113,7 +113,7 @@ mat-row:hover {
 }
 .create-btn {
   border-radius: 30px;
-  background-color: #f7dd72;
+  background-color: var(--secondary-color);
   padding-left: 2em;
   padding-right: 2em;
 }

dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.scss

@@ -83,9 +83,9 @@
 
 
 
-$blue-color : #129D99;
+$blue-color : var(--primary-color);
 $blue-color-light: #5cf7f2;
-$yellow: #f7dd72;
+$yellow: var(--secondary-color);
 .badge-ball{
   display: inline-block;
   border-radius: 50%;

dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.scss

@@ -20,7 +20,7 @@
 }
 
 ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
-	background-color: #00b29f;
+	background-color: var(--primary-color-3);
 	// background-color: #0070c0;
 }
 
@@ -30,12 +30,12 @@
 
 .finalize-btn {
 	border-radius: 30px;
-	border: 1px solid #129D99;
+	border: 1px solid var(--primary-color);
 	background: transparent;
 	padding-left: 2em;
 	padding-right: 2em;
 	box-shadow: 0px 3px 6px #1E202029;
-	color: #129D99;
+	color: var(--primary-color);
   &:disabled{
 		background-color: #CBCBCB;
 		color: #FFF;
@@ -45,7 +45,7 @@
 
 .action-btn {
 	border-radius: 30px;
-	background-color: #f7dd72;
+	background-color: var(--secondary-color);
 	border: 1px solid transparent;
 	padding-left: 2em;
 	padding-right: 2em;

dmp-frontend/src/app/ui/admin/dmp-profile/listing/criteria/dialog-confirmation-upload-profile/dialog-confirmation-upload-profiles.component.scss

@@ -15,12 +15,12 @@ min-width: 101px;
 
 .next-btn {
 	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
 	border-radius: 30px;
 	opacity: 1;
 min-width: 101px;
 	height: 43px;
-	color: #129d99;
+	color: var(--primary-color);
 	font-weight: 500;
 }
 
@@ -34,7 +34,7 @@ min-width: 101px;
 }
 
 .next-btn:not([disabled]):hover {
-	background-color: #129d99;
+	background-color: var(--primary-color);
 	color: #ffffff;
 }
 
@@ -86,15 +86,15 @@ min-width: 101px;
 	width: 156px;
 	height: 44px;
 	color: #ffffff;
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1e202029;
 	border-radius: 30px;
 }
 
 .attach-file:hover {
 	background-color: #ffffff;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
-	color: #129d99;
+	color: var(--primary-color);
 }
 
 .close-btn:hover{

dmp-frontend/src/app/ui/admin/dmp-profile/listing/dmp-profile-listing.component.scss

@@ -37,7 +37,7 @@
 }
 .create-btn {
   border-radius: 30px;
-  background-color: #f7dd72;
+  background-color: var(--secondary-color);
   padding-left: 2em;
   padding-right: 2em;
   // color: #000;
@@ -50,8 +50,8 @@
 .import-btn {
   background: #ffffff 0% 0% no-repeat padding-box;
   border-radius: 30px;
-  // color: #129d99;
+  // color: var(--primary-color);
-  // border: 1px solid #129d99;
+  // border: 1px solid var(--primary-color);
   padding-left: 2em;
   padding-right: 2em;
   color: #000;

dmp-frontend/src/app/ui/admin/user/listing/criteria/user-criteria.component.scss

@@ -14,7 +14,7 @@
 	}
 
 	.search-form mat-icon {
-		color: #129d99;
+		color: var(--primary-color);
 	}
 }
 

dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.scss

@@ -20,7 +20,7 @@
 	}
 
 	.row-action {
-		color: #129d99;
+		color: var(--primary-color);
 		cursor: pointer;
 	}
 	.user-role{

dmp-frontend/src/app/ui/admin/user/listing/user-listing.component.scss

@@ -50,8 +50,8 @@
 		background: #ffffff 0% 0% no-repeat padding-box;
 		border-radius: 30px;
 		width: 145px;
-		color: #129d99;
+		color: var(--primary-color);
-		border: 1px solid #129d99;
+		border: 1px solid var(--primary-color);
 	}
 
 	.export-icon {

dmp-frontend/src/app/ui/auth/login/login.component.scss

@@ -32,13 +32,13 @@
   font: Bold 38px/82px Roboto;
   height: 60px;
   letter-spacing: -0.95px;
-  color: #23bcba;
+  color: var(--primary-color-2);
   margin-top: 11px;
   margin-bottom: 21px;
 }
 
 .line {
-  border-top: 5px solid #23bcba;
+  border-top: 5px solid var(--primary-color-2);
   width: 116px;
   margin-bottom: 97px;
 }
@@ -261,7 +261,7 @@ span.twitterIcon {
 .openaireIconButton:hover,
 .orcidIconMediumButton:hover,
 .iconmediumButton:hover {
-  //   background-color: #129d993b;
+  //   background-color: var(--primary-color)3b;
   background-color: #ececec;
   border-radius: 60%;
 }
@@ -341,8 +341,7 @@ span.zenodoIcon {
 // }
 
 .laptop-img {
-  //   background: url("../../../../assets/splash/assets/img/laptop.png") no-repeat;
+  background: url("../../../../assets/images/login-bottom-image.png") no-repeat;
-  background: url("../../../../assets/splash/assets/img/1_Main/Png/Who\ \ \ Benefits\ Small.png") no-repeat;
   width: 164px;
   height: 200px;
   position: relative;

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

@@ -25,12 +25,12 @@ img {
 
 .send-btn {
 	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
 	border-radius: 30px;
 	opacity: 1;
 	min-width: 101px;
 	height: 43px;
-	color: #129d99;
+	color: var(--primary-color);
 	font-weight: 500;
 }
 

dmp-frontend/src/app/ui/dashboard/dashboard.component.html

@@ -20,14 +20,12 @@
 							<div class="row d-flex align-items-center">
 								<div *ngIf="!this.hasDmps()" class="col-auto add-dataset-btn d-flex">
 									<button type="button" class="col-auto align-self-center normal-btn" (click)="openNewDmpDialog()">{{'DASHBOARD.START-YOUR-FIRST-DMP' | translate}}</button>
-									<!-- <img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who   Benefits copy.png" width="116" height="139"> -->
-									<!-- <img class="col-auto ml-auto laptop-img"> -->
 								</div>
 								<div *ngIf="this.hasDmps()" class="new-dataset-tour add-dataset-btn col-auto d-flex">
 									<button mat-raised-button type="button" class="col-auto align-self-center yellow-btn" (click)="addNewDataset()">{{'DASHBOARD.ACTIONS.ADD-DATASET-DESCRIPTION' | translate}}</button>
 								</div>
 								<span class="col-auto ml-auto">
-									<img class="laptop-img\6" src="../../../assets/splash/assets/img/1_Main/Png/Who   Benefits copy.png" width="116" height="139">
+									<img class="laptop-img\6" src="../../../assets/images/dashboard-popup.png">
 								</span>
 							</div>
 						</div>
@@ -120,7 +118,7 @@
 									</div>
 									<div class="d-flex">
 										<!-- <button type="button" class="col-auto align-self-center normal-btn" (click)="openNewDmpDialog()">{{'DASHBOARD.START-YOUR-FIRST-DMP' | translate}}</button> -->
-										<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who   Benefits copy.png" width="116" height="139">
+										<img class="col-auto ml-auto laptop-img" src="../../../assets/images/dashboard-popup.png">
 										<!-- <img class="col-auto ml-auto laptop-img"> -->
 									</div>
 								</div>

dmp-frontend/src/app/ui/dashboard/dashboard.component.scss

@@ -64,7 +64,7 @@
 	max-width: 256px;
 	height: 40px;
 	cursor: pointer;
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1e202029;
 	border-radius: 30px;
 	border: none;
@@ -81,7 +81,7 @@
 	//max-width: 256px;
 	height: 40px;
 	cursor: pointer;
-	background: #f7dd72 0% 0% no-repeat padding-box;
+	background: var(--secondary-color) 0% 0% no-repeat padding-box;
 	border-radius: 30px;
 	opacity: 1;
 	border: none;
@@ -197,7 +197,7 @@ input[type="text"] {
 }
 
 .dmp-label {
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	opacity: 1;
 	min-width: 67px;
@@ -210,7 +210,7 @@ input[type="text"] {
 	//   width: 158px;
 	width: auto;
 	height: 37px;
-	background: #f7dd72 0% 0% no-repeat padding-box;
+	background: var(--secondary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	text-align: left;
 	line-height: 2.8;
@@ -292,7 +292,7 @@ input[type="text"] {
 
 .dataset-card-actions a:hover,
 .dmp-card-actions a:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .dmp-dataset-descriptions-title {
@@ -313,7 +313,7 @@ input[type="text"] {
 }
 
 .show-more:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .btn-load-more {
@@ -354,7 +354,7 @@ input[type="text"] {
 .add-dataset {
 	width: 142px;
 	height: 40px;
-	background: #f7dd72 0% 0% no-repeat padding-box;
+	background: var(--secondary-color) 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1e202029;
 	border-radius: 30px;
 	opacity: 1;
@@ -401,7 +401,7 @@ input[type="text"] {
 
 :host ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
 .mat-tab-nav-bar.mat-primary .mat-ink-bar {
-	background: #129d99;
+	background: var(--primary-color);
 	height: 5px;
 }
 
@@ -444,14 +444,6 @@ input[type="text"] {
 	flex-grow: 1;
   } */
 
-// .header-image {
-//   background: url("/assets/images/new-dashboard-bg.png") no-repeat;
-//   background-size: cover;
-//   margin-top: 70px;
-//   min-height: 20em;
-//   position: relative;
-// }
-
 // .header-text-container {
 //   background: rgba(255, 255, 255, 0.7);
 //   position: absolute;

dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.css

@@ -38,7 +38,7 @@
 }
 
 .about-item .length {
-	color: #00b29f;
+	color: var(--primary-color-3);
 	/* color: #089dbb; */
 }
 

dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.css

@@ -47,7 +47,7 @@ input[type="text"] {
 }
 
 .dmp-label {
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	opacity: 1;
 	min-width: 67px;
@@ -59,7 +59,7 @@ input[type="text"] {
 .dataset-label {
 	width: auto;
 	height: 37px;
-	background: #f7dd72 0% 0% no-repeat padding-box;
+	background: var(--secondary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	text-align: left;
 	line-height: 2.8;
@@ -130,7 +130,7 @@ input[type="text"] {
 
 .dataset-card-actions a:hover,
 .dmp-card-actions a:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .dmp-dataset-descriptions-title {
@@ -151,7 +151,7 @@ input[type="text"] {
 }
 
 .show-more:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .btn-load-more {
@@ -183,7 +183,7 @@ input[type="text"] {
 }
 
 .search-form mat-icon {
-	color: #129d99;
+	color: var(--primary-color);
 }
 
 ::ng-deep .search-form .mat-form-field-wrapper {

dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css

@@ -47,7 +47,7 @@ input[type="text"] {
 }
 
 .dmp-label {
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	opacity: 1;
 	min-width: 67px;
@@ -59,7 +59,7 @@ input[type="text"] {
 .dataset-label {
 	width: auto;
 	height: 37px;
-	background: #f7dd72 0% 0% no-repeat padding-box;
+	background: var(--secondary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	text-align: left;
 	line-height: 2.8;
@@ -139,7 +139,7 @@ input[type="text"] {
 
 .dataset-card-actions a:hover,
 .dmp-card-actions a:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .dmp-dataset-descriptions-title {
@@ -160,7 +160,7 @@ input[type="text"] {
 }
 
 .show-more:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .btn-load-more {
@@ -192,7 +192,7 @@ input[type="text"] {
 }
 
 .search-form mat-icon {
-	color: #129d99;
+	color: var(--primary-color);
 }
 
 ::ng-deep .search-form .mat-form-field-wrapper {
@@ -234,9 +234,9 @@ a {
 .is-public {
   padding-left: 5px;
   padding-right: 5px;
-  border: 1px solid #00b29f3b;
+  border: 1px solid var(--primary-color-3)3b;
-  color: #00b29f;
+  color: var(--primary-color-3);
-  background-color: #00b29f0f;
+  background-color: var(--primary-color-3)0f;
   border-radius: 10em;
   text-align: center;
 }

dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.scss

@@ -47,7 +47,7 @@ input[type="text"] {
 }
 
 .dmp-label {
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	opacity: 1;
 	min-width: 67px;
@@ -59,7 +59,7 @@ input[type="text"] {
 .dataset-label {
 	width: auto;
 	height: 37px;
-	background: #f7dd72 0% 0% no-repeat padding-box;
+	background: var(--secondary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	text-align: left;
 	line-height: 2.8;
@@ -141,7 +141,7 @@ input[type="text"] {
 
 .dataset-card-actions a:hover,
 .dmp-card-actions a:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .dmp-dataset-descriptions-title {
@@ -162,7 +162,7 @@ input[type="text"] {
 }
 
 .show-more:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .btn-load-more {
@@ -194,7 +194,7 @@ input[type="text"] {
 }
 
 .search-form mat-icon {
-	color: #129d99;
+	color: var(--primary-color);
 }
 
 ::ng-deep .search-form .mat-form-field-wrapper {

dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.css

@@ -46,7 +46,7 @@ input[type="text"] {
 }
 
 .dmp-label {
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	opacity: 1;
 	min-width: 67px;
@@ -58,7 +58,7 @@ input[type="text"] {
 .dataset-label {
 	width: auto;
 	height: 37px;
-	background: #f7dd72 0% 0% no-repeat padding-box;
+	background: var(--secondary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	text-align: left;
 	line-height: 2.8;
@@ -123,7 +123,7 @@ input[type="text"] {
 }
 
 .dataset-card-actions a:hover, .dmp-card-actions a:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .dmp-dataset-descriptions-title {
@@ -144,7 +144,7 @@ input[type="text"] {
 }
 
 .show-more:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .btn-load-more {
@@ -176,7 +176,7 @@ input[type="text"] {
 }
 
 .search-form mat-icon {
-	color: #129d99;
+	color: var(--primary-color);
 }
 
 ::ng-deep .search-form .mat-form-field-wrapper {
@@ -204,9 +204,9 @@ a {
 .is-public {
   padding-left: 5px;
   padding-right: 5px;
-  border: 1px solid #00b29f3b;
+  border: 1px solid var(--primary-color-3)3b;
-  color: #00b29f;
+  color: var(--primary-color-3);
-  background-color: #00b29f0f;
+  background-color: var(--primary-color-3)0f;
   border-radius: 10em;
   text-align: center;
 }

dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.css

@@ -5,9 +5,9 @@ th {
 .is-public {
 	padding-left: 5px;
 	padding-right: 5px;
-	border: 1px solid #00b29f3b;
+	border: 1px solid var(--primary-color-3)3b;
-	color: #00b29f;
+	color: var(--primary-color-3);
-	background-color: #00b29f0f;
+	background-color: var(--primary-color-3)0f;
 	border-radius: 10em;
 	text-align: center;
 }

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component.scss

@@ -22,17 +22,17 @@ min-width: 101px;
 
 .confirm-btn {
 	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
 	border-radius: 30px;
 	opacity: 1;
 min-width: 101px;
 	height: 43px;
-	color: #129d99;
+	color: var(--primary-color);
 	font-weight: 500;
 }
 
 .confirm-btn:hover {
-	background-color: #129d99;
+	background-color: var(--primary-color);
 	color: #ffffff;
 }
 

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.scss

@@ -53,7 +53,7 @@
   }
 
   .input-btn :hover {
-    color: #00b29f !important;
+    color: var(--primary-color-3) !important;
   }
 
   .dmp-link {

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss

@@ -104,7 +104,7 @@
   }
 
   .more-icon :hover {
-    color: #00b29f;
+    color: var(--primary-color-3);
   }
 
   .new-dataset {
@@ -120,8 +120,8 @@
 
   .dataset-editor-header {
     height: 113px;
-    background: var(--unnamed-color-129d99) 0% 0% no-repeat padding-box;
+    background: var(--unnamed-color-var(--primary-color)) 0% 0% no-repeat padding-box;
-    background: #f7dd72 0% 0% no-repeat padding-box;
+    background: var(--secondary-color) 0% 0% no-repeat padding-box;
     box-shadow: 0px 3px 6px #00000029;
     padding: 0.6rem;
     margin: 30px 0px 0px 0px;
@@ -192,7 +192,7 @@
     justify-content: center;
     align-items: center;
     font-weight: 700;
-    color: #129d99;
+    color: var(--primary-color);
   }
 
   .dataset-discard-btn {
@@ -227,7 +227,7 @@
     text-align: left;
     font-size: 1rem;
     font-weight: 700;
-    color: #129d99;
+    color: var(--primary-color);
     line-height: 25px;
   }
 
@@ -238,7 +238,7 @@
   .dmp-label {
     min-width: 67px;
     height: 37px;
-    background: #129d99 0% 0% no-repeat padding-box;
+    background: var(--primary-color) 0% 0% no-repeat padding-box;
     color: white;
     border-radius: 4px;
     opacity: 1;
@@ -264,7 +264,7 @@
     opacity: 0.75;
   }
   .open-in-new-icon:hover {
-    color: #129d99;
+    color: var(--primary-color);
   }
 
   .dataset-stepper {
@@ -347,7 +347,7 @@
       width: 100%;
       height: 27px;
       line-height: 27px;
-      background-color: #f7dd72;
+      background-color: var(--secondary-color);
       color: #5d5d5d;
       border-radius: 4px;
       font-weight: 400;
@@ -423,7 +423,7 @@
   }
 
   .add-dataset-btn {
-	background: #f7dd72 0% 0% no-repeat padding-box;
+	background: var(--secondary-color) 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1e202029;
 	font-weight: 500;
 	word-wrap: break-word;
@@ -432,7 +432,7 @@
   }
 
   .next {
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	color: white;
 	box-shadow: 0px 3px 6px #1e202029;
 	font-weight: 400;
@@ -440,7 +440,7 @@
   }
 
   .dataset-next {
-	background: #f7dd72 0% 0% no-repeat padding-box;
+	background: var(--secondary-color) 0% 0% no-repeat padding-box;
 	color: #212121;
 	box-shadow: 0px 3px 6px #1e202029;
 	font-weight: 700;
@@ -500,7 +500,7 @@ mat-icon.size-18 {
 // }
 
 // ::ng-deep .mat-ink-bar {
-//   background-color: #00b29f !important;
+//   background-color: var(--primary-color-3) !important;
 //   //   background-color: #0070c0 !important;
 // }
 

dmp-frontend/src/app/ui/dataset/dataset-wizard/prefill-dataset/prefill-dataset.component.scss

@@ -3,7 +3,7 @@
 		display: flex;
 		width: 100%;
 		height: 60px;
-		background-color: #f7dd72;
+		background-color: var(--secondary-color);
 		color: #212121;
 		font-size: 1.25rem;
 	}
@@ -33,8 +33,8 @@
 	}
 
 	.empty-btn, .prefill-btn {
-		background: #f7dd72 0 0 no-repeat padding-box;
+		background: var(--secondary-color) 0 0 no-repeat padding-box;
-		border: 1px solid #f7dd72;
+		border: 1px solid var(--secondary-color);
 		border-radius: 30px;
 		opacity: 1;
 	min-width: 101px;

dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss

@@ -34,7 +34,7 @@
 .filters-title {
 	width: 93px;
 	//   color: #089dbb;
-	color: #23bcba;
+	color: var(--primary-color-2);
 	background-color: white;
 	padding: 0px 20px;
 	margin-top: -10px;

dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html

@@ -11,7 +11,7 @@
 						<button mat-raised-button class="add-dataset align-self-center yellow-btn" (click)="addNewDataset()">
 							{{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
 						</button>
-						<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who   Benefits copy.png" width="116" height="139">
+						<img class="col-auto ml-auto laptop-img" src="../../../assets/images/dashboard-popup.png">
 					</div>
 				</div>
 			</div>

dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss

@@ -102,7 +102,7 @@
   max-width: 256px;
   height: 40px;
   cursor: pointer;
-  background: #129d99 0% 0% no-repeat padding-box;
+  background: var(--primary-color) 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #1e202029;
   border-radius: 30px;
   border: none;
@@ -119,7 +119,7 @@
   max-width: 256px;
   height: 40px;
   cursor: pointer;
-  background: #f7dd72 0% 0% no-repeat padding-box;
+  background: var(--secondary-color) 0% 0% no-repeat padding-box;
   border-radius: 30px;
   opacity: 1;
   border: none;
@@ -148,7 +148,7 @@
 
 .filter-btn button {
   color: white;
-  background-color: #23bcba;
+  background-color: var(--primary-color-2);
   width: 37px;
   height: 45px;
 }
@@ -173,7 +173,7 @@
 }
 
 .search-form mat-icon {
-  color: #129d99;
+  color: var(--primary-color);
 }
 
 .empty-list {
@@ -186,7 +186,7 @@
 }
 
 .pointer:hover {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 ::ng-deep .search-form .mat-form-field-wrapper {
@@ -250,12 +250,12 @@
 
 ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
   border-color: #777777;
-  // border-color: #00b29f;
+  // border-color: var(--primary-color-3);
 }
 
 ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
-  //   color: #00b29f;
+  //   color: var(--primary-color-3);
-  //   background-color: #00b29f;
+  //   background-color: var(--primary-color-3);
   color: #777777;
   background-color: #777777;
 }

dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss

@@ -18,7 +18,7 @@
 }
 
 .container-header :hover {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 h4 {
@@ -42,11 +42,11 @@ h4 > span {
 }
 
 .links :hover {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 .about-item .length {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 .about-item .title {
@@ -66,7 +66,7 @@ p {
 }
 
 .storage :hover {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 .draft-bookmark {
@@ -115,7 +115,7 @@ input[type="text"] {
 }
 
 .dmp-label {
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	opacity: 1;
 	min-width: 67px;
@@ -127,7 +127,7 @@ input[type="text"] {
 .dataset-label {
 	width: auto;
 	height: 37px;
-	background: #f7dd72 0% 0% no-repeat padding-box;
+	background: var(--secondary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	text-align: left;
 	line-height: 2.8;
@@ -209,7 +209,7 @@ input[type="text"] {
 
 .dataset-card-actions a:hover,
 .dmp-card-actions a:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .dmp-dataset-descriptions-title {
@@ -230,7 +230,7 @@ input[type="text"] {
 }
 
 .show-more:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .btn-load-more {

dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.scss

@@ -17,7 +17,7 @@
   width: 2.5em;
   height: 2.5em;
   color: #212121;
-  background-color: #f7dd72;
+  background-color: var(--secondary-color);
 }
 
 .mat-mini-fab-icon,
@@ -27,7 +27,7 @@
 
 .actions-btn:hover,
 .finalize-btn:hover {
-  background-color: #129d99;
+  background-color: var(--primary-color);
   color: #ffffff;
 }
 
@@ -63,7 +63,7 @@
 .dmp-btn {
   width: 35em;
   min-height: 2.3em;
-  background-color: #129d99;
+  background-color: var(--primary-color);
   border-radius: 4px;
   flex-direction: row;
   justify-content: space-between;
@@ -80,7 +80,7 @@
   width: 31.6em;
   padding: 0 1em;
   background-color: #ffffff00;
-  color: #129d99;
+  color: var(--primary-color);
   font-weight: 700;
 }
 
@@ -91,7 +91,7 @@
 }
 
 .finalize-btn {
-  //   border: 1px solid #F7DD72;
+  //   border: 1px solid var(--secondary-color);
   background: #f5db71;
 }
 
@@ -129,7 +129,7 @@
 .dataset-logo {
   width: 6em;
   height: 2.6em;
-  background: #f7dd72;
+  background: var(--secondary-color);
   border-radius: 4px;
   font-size: 0.875em;
   // color: #212121;

dmp-frontend/src/app/ui/dmp/clone/clone-dialog/clone-dialog.component.scss

@@ -45,14 +45,14 @@
 		min-width: 84px;
 		height: 43px;
 		background: #ffffff;
-		color: #129d99;
+		color: var(--primary-color);
-		border: 1px solid #129d99;
+		border: 1px solid var(--primary-color);
 		border-radius: 30px;
 		opacity: 1;
 	}
 
 	.confirm-btn:hover {
-		background-color: #129d99;
+		background-color: var(--primary-color);
 		color: #ffffff;
 	}
 }

dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.scss

@@ -7,7 +7,7 @@ a {
 }
 
 a:hover {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 .main-content {
@@ -23,8 +23,8 @@ a:hover {
 
 .editor-header {
   height: 64px;
-  background: var(--unnamed-color-129d99) 0% 0% no-repeat padding-box;
+  background: var(--unnamed-color-var(--primary-color)) 0% 0% no-repeat padding-box;
-  background: #129d99 0% 0% no-repeat padding-box;
+  background: var(--primary-color) 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #00000029;
   padding: 0.6rem;
   margin: 30px 0px 0px 0px;
@@ -41,8 +41,8 @@ a:hover {
 
 .dataset-editor-header {
   height: 113px;
-  background: var(--unnamed-color-129d99) 0% 0% no-repeat padding-box;
+  background: var(--unnamed-color-var(--primary-color)) 0% 0% no-repeat padding-box;
-  background: #f7dd72 0% 0% no-repeat padding-box;
+  background: var(--secondary-color) 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #00000029;
   padding: 0.6rem;
   margin: 30px 0px 0px 0px;
@@ -135,7 +135,7 @@ a:hover {
   justify-content: center;
   align-items: center;
   font-weight: 700;
-  color: #129d99;
+  color: var(--primary-color);
   cursor: pointer;
 }
 
@@ -241,7 +241,7 @@ a:hover {
   .dataset-tag {
     width: 73px;
     height: 27px;
-    background-color: #f7dd72;
+    background-color: var(--secondary-color);
     color: #5d5d5d;
     border-radius: 4px;
     font-weight: 400;
@@ -286,7 +286,7 @@ a:hover {
 }
 
 .next {
-  background: #129d99 0% 0% no-repeat padding-box;
+  background: var(--primary-color) 0% 0% no-repeat padding-box;
   color: white;
   box-shadow: 0px 3px 6px #1e202029;
   font-weight: 400;
@@ -294,7 +294,7 @@ a:hover {
 }
 
 .dataset-next {
-  background: #f7dd72 0% 0% no-repeat padding-box;
+  background: var(--secondary-color) 0% 0% no-repeat padding-box;
   color: #212121;
   box-shadow: 0px 3px 6px #1e202029;
   font-weight: 700;
@@ -322,7 +322,7 @@ a:hover {
 .dmp-label {
   min-width: 67px;
   height: 37px;
-  background: #129d99 0% 0% no-repeat padding-box;
+  background: var(--primary-color) 0% 0% no-repeat padding-box;
   color: white;
   border-radius: 4px;
   opacity: 1;
@@ -372,7 +372,7 @@ a:hover {
 // }
 
 ::ng-deep .mat-ink-bar {
-  background-color: #00b29f !important;
+  background-color: var(--primary-color-3) !important;
   //   background-color: #0070c0 !important;
 }
 
@@ -405,7 +405,7 @@ a:hover {
 // }
 
 // .more-icon :hover {
-//   color: #00b29f;
+//   color: var(--primary-color-3);
 // }
 
 // ::ng-deep .mat-tab-labels {
@@ -417,5 +417,5 @@ a:hover {
 // }
 
 // ::ng-deep .mat-ink-bar {
-//   background-color: #00b29f !important;
+//   background-color: var(--primary-color-3) !important;
 // }

dmp-frontend/src/app/ui/dmp/dataset-preview/dataset-preview-dialog.component.scss

@@ -3,7 +3,7 @@
 		display: flex;
 		width: 100%;
 		height: 89px;
-		background-color: #129D99;
+		background-color: var(--primary-color);
 		color: #FFFFFF;
 		font-size: 1.25rem;
 	}
@@ -33,8 +33,8 @@
 	}
 
 	.start-btn {
-		background: #129d99 0% 0% no-repeat padding-box;
+		background: var(--primary-color) 0% 0% no-repeat padding-box;
-		border: 1px solid #129d99;
+		border: 1px solid var(--primary-color);
 		border-radius: 30px;
 		opacity: 1;
 	min-width: 101px;

dmp-frontend/src/app/ui/dmp/dmp-to-dataset/dmp-to-dataset-dialog.component.html

@@ -19,6 +19,6 @@
 				</div>
 			</div>
 		</div>
-		<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/2_Sign_in/Png/Sign In - Copy.png" width="116" height="139">
+		<img class="col-auto ml-auto laptop-img" src="../../../assets/images/guided-tour-side.png" width="116" height="139">
 	</div>
 </div>

dmp-frontend/src/app/ui/dmp/dmp-to-dataset/dmp-to-dataset-dialog.component.scss

@@ -38,8 +38,8 @@
 }
 
 .start-btn {
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
 	border-radius: 30px;
 	opacity: 1;
 	min-width: 101px;
@@ -49,7 +49,7 @@
 }
 
 .color-green {
-	color: #129d99;
+	color: var(--primary-color);
 	font-weight: 500;
 }
 

dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.scss

@@ -57,7 +57,7 @@
   }
 
   .input-btn :hover {
-    color: #00b29f !important;
+    color: var(--primary-color-3) !important;
   }
 
   .dmp-link {

dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.scss

@@ -56,7 +56,7 @@
   }
 
   .input-btn :hover {
-    color: #00b29f !important;
+    color: var(--primary-color-3) !important;
   }
 
   .not-found {

dmp-frontend/src/app/ui/dmp/editor/datasets-tab/datasets-tab.component.scss

@@ -45,7 +45,7 @@
 
 .show-more {
   background-color: #ffffff00;
-  color: #00b29f;
+  color: var(--primary-color-3);
   font-weight: 700;
   justify-self: center;
 }

dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss

@@ -18,7 +18,7 @@ a {
 }
 
 a:hover {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 .main-content {
@@ -40,7 +40,7 @@ a:hover {
 }
 
 .more-icon :hover {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 .export-btn {
@@ -56,8 +56,8 @@ a:hover {
 
 .editor-header {
   height: 64px;
-  background: var(--unnamed-color-129d99) 0% 0% no-repeat padding-box;
+  background: var(--unnamed-color-var(--primary-color)) 0% 0% no-repeat padding-box;
-  background: #129d99 0% 0% no-repeat padding-box;
+  background: var(--primary-color) 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #00000029;
   padding: 0.6rem;
   margin: 30px 0px 0px 0px;
@@ -74,8 +74,8 @@ a:hover {
 
 .dataset-editor-header {
   height: 113px;
-  background: var(--unnamed-color-129d99) 0% 0% no-repeat padding-box;
+  background: var(--unnamed-color-var(--primary-color)) 0% 0% no-repeat padding-box;
-  background: #f7dd72 0% 0% no-repeat padding-box;
+  background: var(--secondary-color) 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #00000029;
   padding: 0.6rem;
   margin: 30px 0px 0px 0px;
@@ -167,7 +167,7 @@ a:hover {
   justify-content: center;
   align-items: center;
   font-weight: 700;
-  color: #129d99;
+  color: var(--primary-color);
 }
 
 .dataset-discard-btn {
@@ -278,7 +278,7 @@ a:hover {
     width: 100%;
     height: 27px;
     line-height: 27px;
-    background-color: #f7dd72;
+    background-color: var(--secondary-color);
     color: #5d5d5d;
     border-radius: 4px;
     font-weight: 400;
@@ -344,7 +344,7 @@ mat-icon.size-16 {
 }
 
 .add-dataset-btn {
-  background: #f7dd72 0% 0% no-repeat padding-box;
+  background: var(--secondary-color) 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #1e202029;
   font-weight: 500;
   white-space: normal;
@@ -361,7 +361,7 @@ mat-icon.size-16 {
 }
 
 .next {
-  background: #129d99 0% 0% no-repeat padding-box;
+  background: var(--primary-color) 0% 0% no-repeat padding-box;
   color: white;
   box-shadow: 0px 3px 6px #1e202029;
   font-weight: 400;
@@ -369,7 +369,7 @@ mat-icon.size-16 {
 }
 
 .dataset-next {
-  background: #f7dd72 0% 0% no-repeat padding-box;
+  background: var(--secondary-color) 0% 0% no-repeat padding-box;
   color: #212121;
   box-shadow: 0px 3px 6px #1e202029;
   font-weight: 700;
@@ -391,8 +391,8 @@ mat-icon.size-16 {
 }
 
 // .add-dataset-btn:hover {
-//   color: #129d99 !important;
+//   color: var(--primary-color) !important;
-//   border: 1px solid #129d99;
+//   border: 1px solid var(--primary-color);
 // }
 
 .dataset-list {
@@ -403,7 +403,7 @@ mat-icon.size-16 {
 .dmp-label {
   min-width: 67px;
   height: 37px;
-  background: #129d99 0% 0% no-repeat padding-box;
+  background: var(--primary-color) 0% 0% no-repeat padding-box;
   color: white;
   border-radius: 4px;
   opacity: 1;
@@ -462,6 +462,6 @@ mat-icon.size-16 {
 // }
 
 ::ng-deep .mat-ink-bar {
-  background-color: #00b29f !important;
+  background-color: var(--primary-color-3) !important;
   //   background-color: #0070c0 !important;
 }

dmp-frontend/src/app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component.scss

@@ -66,7 +66,7 @@
 }
 
 .datasets span {
-	color: #00b29f;
+	color: var(--primary-color-3);
 }
 
 .emptyList {
@@ -75,7 +75,7 @@
 }
 
 .save-btn {
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	border-radius: 30px;
 	opacity: 1;
 	width: auto;
@@ -92,8 +92,8 @@
 	min-width: 84px;
 	height: 43px;
 	background: #ffffff;
-	color: #129d99;
+	color: var(--primary-color);
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
 	border-radius: 30px;
 	opacity: 1;
 }
@@ -103,7 +103,7 @@
 }
 
 .submit-btn:not([disabled]):hover {
-	background-color: #129d99;
+	background-color: var(--primary-color);
     color: #ffffff;
 }
 

dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.scss

@@ -56,12 +56,12 @@
   }
 
   .input-btn :hover {
-    color: #00b29f !important;
+    color: var(--primary-color-3) !important;
   }
 
   .insert {
 	text-decoration: underline;
-	color: #00b29f;
+	color: var(--primary-color-3);
 	cursor: pointer;
 	font-size: 1rem;
 	font-weight: 400;

dmp-frontend/src/app/ui/dmp/editor/general-tab/general-tab.component.scss

@@ -6,7 +6,7 @@
 }
 
 .input-btn :hover {
-  color: #00b29f !important;
+  color: var(--primary-color-3) !important;
 }
 
 // .icon-btn {
@@ -31,7 +31,7 @@
 }
 
 .version-menu mat-icon {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-wrapper {

dmp-frontend/src/app/ui/dmp/editor/grant-tab/grant-tab.component.scss

@@ -5,7 +5,7 @@
   align-self: center;
   padding-bottom: 1em;
   cursor: pointer;
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 .add-entity:after {
@@ -16,7 +16,7 @@
   height: 2px;
   left: 50%;
   position: absolute;
-  background: #00b29f;
+  background: var(--primary-color-3);
   //   background: #0070c0;
   transition: width 0.3s ease 0s, left 0.3s ease 0s;
   width: 0;

dmp-frontend/src/app/ui/dmp/editor/license-info/license-info.component.scss

@@ -56,7 +56,7 @@
   }
 
   .input-btn :hover {
-    color: #00b29f !important;
+    color: var(--primary-color-3) !important;
   }
 }
 

dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.scss

@@ -62,12 +62,12 @@
 	}
 
 	.input-btn :hover {
-		color: #00b29f !important;
+		color: var(--primary-color-3) !important;
 	}
 
 	.insert-manually {
 		text-decoration: underline;
-		color: #00b29f;
+		color: var(--primary-color-3);
 		cursor: pointer;
 		font-size: 1rem;
 		font-weight: 400;

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss

@@ -95,12 +95,12 @@
 
 .invite-btn {
 	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
 	border-radius: 30px;
 	opacity: 1;
 	min-width: 101px;
 	height: 43px;
-	color: #129d99;
+	color: var(--primary-color);
 	font-weight: 500;
 }
 
@@ -118,7 +118,7 @@
 }
 
 .invite-btn:hover {
-	background: #129d99;
+	background: var(--primary-color);
 	color: #ffffff;
 }
 

dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss

@@ -48,7 +48,7 @@
 .filters-title {
   width: 93px;
   //   color: #089dbb;
-  color: #23bcba;
+  color: var(--primary-color-2);
   background-color: white;
   padding: 0px 20px;
   margin-top: -10px;
@@ -65,7 +65,7 @@
 // }
 
 // ::ng-deep .mat-focused .mat-form-field-label {
-//   color: #00b29f !important;
+//   color: var(--primary-color-3) !important;
 // }
 
 // ::ng-deep.mat-form-field-underline {
@@ -73,7 +73,7 @@
 // }
 
 // ::ng-deep.mat-form-field-ripple {
-//   background-color: #00b29f !important;
+//   background-color: var(--primary-color-3) !important;
 // }
 
 // ::ng-deep .mat-checkbox {
@@ -90,7 +90,7 @@
 .mat-accent .mat-pseudo-checkbox-indeterminate,
 .mat-pseudo-checkbox-checked,
 .mat-pseudo-checkbox-indeterminate {
-  background-color: #00b29f;
+  background-color: var(--primary-color-3);
 }
 
 ::ng-deep .mat-ripple-element {
@@ -108,14 +108,14 @@
 
 ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
   border-color: #777777;
-  // border-color: #00b29f;
+  // border-color: var(--primary-color-3);
 }
 
 ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
   color: #777777;
   background-color: #777777;
-  // color: #00b29f;
+  // color: var(--primary-color-3);
-  // background-color: #00b29f;
+  // background-color: var(--primary-color-3);
 }
 
 .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {

dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html

@@ -9,7 +9,7 @@
 					<p class="mt-4 pt-2">{{'DMP-LISTING.TEXT-INFO-QUESTION' | translate}} <a class="zenodo-link" href="https://zenodo.org/communities/liber-dmp-cat/?page=1&size=20" target="_blank">{{'DMP-LISTING.LINK-ZENODO' | translate}}</a> {{'DMP-LISTING.GET-IDEA' | translate}}</p>
 					<div class="d-flex">
 						<div *ngIf="!isPublic" class="col left-content" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</div>
-						<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/1_Main/Png/Who   Benefits copy.png" width="116" height="139">
+						<img class="col-auto ml-auto laptop-img" src="../../../assets/images/dashboard-popup.png">
 					</div>
 				</div>
 			</div>

dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss

@@ -69,7 +69,7 @@
 }
 
 .more-icon :hover {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 .header-image {
@@ -163,7 +163,7 @@
   max-width: 256px;
   height: 40px;
   cursor: pointer;
-  background: #129d99 0% 0% no-repeat padding-box;
+  background: var(--primary-color) 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #1e202029;
   border-radius: 30px;
   border: none;
@@ -180,7 +180,7 @@
   max-width: 256px;
   height: 40px;
   cursor: pointer;
-  background: #f7dd72 0% 0% no-repeat padding-box;
+  background: var(--secondary-color) 0% 0% no-repeat padding-box;
   border-radius: 30px;
   opacity: 1;
   border: none;
@@ -211,7 +211,7 @@
 
 .filter-btn button {
   color: white;
-  background-color: #23bcba;
+  background-color: var(--primary-color-2);
   width: 37px;
   height: 45px;
 }
@@ -223,7 +223,7 @@
 }
 
 .search-form mat-icon {
-  color: #129d99;
+  color: var(--primary-color);
 }
 
 .empty-list {
@@ -242,7 +242,7 @@
 
 .pointer:hover,
 .zenodo-link:hover {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 ::ng-deep .search-form .mat-form-field-wrapper {

dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss

@@ -17,7 +17,7 @@
 }
 
 .container-header :hover {
-  color: #00b29f;
+  color: var(--primary-color-3);
 }
 
 h4 {
@@ -45,7 +45,7 @@ h4 > span {
 }
 
 .datasets-counter :hover {
-  color: #00b29f !important;
+  color: var(--primary-color-3) !important;
 }
 
 .about-item .title {
@@ -149,7 +149,7 @@ input[type="text"] {
 }
 
 .dmp-label {
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	opacity: 1;
 	min-width: 67px;
@@ -161,7 +161,7 @@ input[type="text"] {
 .dataset-label {
 	width: auto;
 	height: 37px;
-	background: #f7dd72 0% 0% no-repeat padding-box;
+	background: var(--secondary-color) 0% 0% no-repeat padding-box;
 	border-radius: 4px 0px;
 	text-align: left;
 	line-height: 2.8;
@@ -240,7 +240,7 @@ input[type="text"] {
 
 .dataset-card-actions a:hover,
 .dmp-card-actions a:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .dmp-dataset-descriptions-title {
@@ -261,7 +261,7 @@ input[type="text"] {
 }
 
 .show-more:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .btn-load-more {

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

@@ -37,12 +37,12 @@ min-width: 101px;
 
 .next-btn {
 	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
 	border-radius: 30px;
 	opacity: 1;
 min-width: 101px;
 	height: 43px;
-	color: #129d99;
+	color: var(--primary-color);
 	font-weight: 500;
 }
 
@@ -56,7 +56,7 @@ min-width: 101px;
 }
 
 .next-btn:not([disabled]):hover {
-	background-color: #129d99;
+	background-color: var(--primary-color);
 	color: #ffffff;
 }
 
@@ -70,7 +70,7 @@ min-width: 101px;
 // }
 
 // .next-btn:hover {
-// 	background: #129d99;
+// 	background: var(--primary-color);
 // 	color: #ffffff;
 // }
 
@@ -82,15 +82,15 @@ min-width: 101px;
 	min-width: 156px;
 	height: 44px;
 	color: #ffffff;
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1e202029;
 	border-radius: 30px;
 }
 
 .attach-file:hover {
 	background-color: #ffffff;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
-	color: #129d99;
+	color: var(--primary-color);
 }
 
 .drop-file {

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss

@@ -16,7 +16,7 @@
 .mat-mini-fab {
 	width: 2.5em;
 	height: 2.5em;
-	background-color: #129d99;
+	background-color: var(--primary-color);
 	color: white;
 }
 
@@ -45,7 +45,7 @@
 .dataset-btn {
 	width: 36.1em;
 	padding: 0 1.1em;
-	background-color: #f7dd72;
+	background-color: var(--secondary-color);
 	border-radius: 4px;
 	justify-content: space-between;
 	color: #212121;
@@ -65,7 +65,7 @@
 	width: 31.6em;
 	padding: 0 1em;
 	background-color: #ffffff00;
-	color: #129d99;
+	color: var(--primary-color);
 	font-weight: 700;
 }
 
@@ -75,8 +75,8 @@
 }
 
 .finalize-btn {
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
-	color: #129d99;
+	color: var(--primary-color);
 }
 
 .grant-title {
@@ -125,7 +125,7 @@
 	padding: 10px;
 	min-width: 4.8em;
 	height: 2.6em;
-	background: #129d99;
+	background: var(--primary-color);
 	border-radius: 4px;
 	font-size: 0.875em;
 	color: #ffffff;
@@ -237,7 +237,7 @@
 }
 
 .finalize-txt {
-	color: #129d99;
+	color: var(--primary-color);
 }
 
 .frame-txt,
@@ -305,7 +305,7 @@
 }
 
 .add-dataset-btn:hover {
-	color: #129d99 !important;
+	color: var(--primary-color) !important;
 }
 
 .show-more-btn {
@@ -356,7 +356,7 @@
 // }
 
 // .more-icon :hover {
-//   color: #00b29f;
+//   color: var(--primary-color-3);
 // }
 
 // .export-btn {
@@ -453,7 +453,7 @@
 // }
 
 // .container-header :hover {
-//   color: #00b29f;
+//   color: var(--primary-color-3);
 // }
 
 // .dataset-card {
@@ -480,13 +480,13 @@
 
 // .show-more {
 //   background-color: #ffffff00;
-//   color: #00b29f;
+//   color: var(--primary-color-3);
 //   font-weight: 700;
 //   justify-self: center;
 // }
 
 // .visit-website {
-//   background-color: #00b29f;
+//   background-color: var(--primary-color-3);
 //   color: #ffffff;
 // }
 
@@ -550,7 +550,7 @@
 // }
 
 // .datasets-counter :hover {
-//   color: #00b29f !important;
+//   color: var(--primary-color-3) !important;
 // }
 
 // .total-info {
@@ -594,5 +594,5 @@
 // }
 
 // .interact-icon :hover {
-// 	color: #00b29f !important;
+// 	color: var(--primary-color-3) !important;
 // }

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

@@ -63,17 +63,17 @@ min-width: 101px;
 
 .next-btn {
 	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
 	border-radius: 30px;
 	opacity: 1;
 min-width: 101px;
 	height: 43px;
-	color: #129d99;
+	color: var(--primary-color);
 	font-weight: 500;
 }
 
 .next-btn:hover {
-	background-color: #129d99;
+	background-color: var(--primary-color);
 	color: white;
 }
 

dmp-frontend/src/app/ui/dmp/wizard/editor/dmp-wizard-editor.component.scss

@@ -14,7 +14,7 @@
 }
 
 .input-btn :hover {
-  color: #00b29f !important;
+  color: var(--primary-color-3) !important;
 }
 
 .table-card .mat-grid-tile {

dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.scss

@@ -32,7 +32,7 @@
 .filters-title {
   width: 90px;
   //   color: #089dbb;
-  color: #23bcba;
+  color: var(--primary-color-2);
   background-color: white;
   padding: 0px 20px;
   margin-top: -10px;
@@ -49,7 +49,7 @@
 // }
 
 // ::ng-deep .mat-focused .mat-form-field-label {
-//   color: #00b29f !important;
+//   color: var(--primary-color-3) !important;
 // }
 
 // ::ng-deep.mat-form-field-underline {
@@ -57,7 +57,7 @@
 // }
 
 // ::ng-deep.mat-form-field-ripple {
-//   background-color: #00b29f !important;
+//   background-color: var(--primary-color-3) !important;
 // }
 
 // ::ng-deep .mat-checkbox {
@@ -74,7 +74,7 @@
 .mat-accent .mat-pseudo-checkbox-indeterminate,
 .mat-pseudo-checkbox-checked,
 .mat-pseudo-checkbox-indeterminate {
-  background-color: #00b29f;
+  background-color: var(--primary-color-3);
 }
 
 ::ng-deep .mat-ripple-element {
@@ -92,14 +92,14 @@
 
 ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
   border-color: #777777;
-  //   border-color: #00b29f;
+  //   border-color: var(--primary-color-3);
 }
 
 ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
   color: #777777;
   background-color: #777777;
-  //   color: #00b29f;
+  //   color: var(--primary-color-3);
-  //   background-color: #00b29f;
+  //   background-color: var(--primary-color-3);
 }
 
 .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {

dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.scss

@@ -34,7 +34,7 @@ h4 {
 }
 
 .about-item .length {
-  color: #00b29f;
+  color: var(--primary-color-3);
   //   color: #089dbb;
 }
 

dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.scss

@@ -32,7 +32,7 @@
 .filters-title {
   width: 93px;
   //   color: #089dbb;
-  color: #23bcba;
+  color: var(--primary-color-2);
   background-color: white;
   padding: 0px 20px;
   margin-top: -10px;
@@ -49,7 +49,7 @@
 // }
 
 // ::ng-deep .mat-focused .mat-form-field-label {
-//   color: #00b29f !important;
+//   color: var(--primary-color-3) !important;
 // }
 
 // ::ng-deep.mat-form-field-underline {
@@ -57,7 +57,7 @@
 // }
 
 // ::ng-deep.mat-form-field-ripple {
-//   background-color: #00b29f !important;
+//   background-color: var(--primary-color-3) !important;
 // }
 
 // ::ng-deep .mat-checkbox {
@@ -74,7 +74,7 @@
 .mat-accent .mat-pseudo-checkbox-indeterminate,
 .mat-pseudo-checkbox-checked,
 .mat-pseudo-checkbox-indeterminate {
-  background-color: #00b29f;
+  background-color: var(--primary-color-3);
 }
 
 ::ng-deep .mat-ripple-element {
@@ -92,14 +92,14 @@
 
 ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
   border-color: #777777;
-  //   border-color: #00b29f;
+  //   border-color: var(--primary-color-3);
 }
 
 ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
   color: #777777;
   background-color: #777777;
-  //   color: #00b29f;
+  //   color: var(--primary-color-3);
-  //   background-color: #00b29f;
+  //   background-color: var(--primary-color-3);
 }
 
 .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {

dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss

@@ -22,7 +22,7 @@
 }
 
 .about-item .length {
-  color: #00b29f;
+  color: var(--primary-color-3);
   // color: #089dbb;
 }
 

dmp-frontend/src/app/ui/grant/listing/criteria/grant-criteria.component.scss

@@ -46,7 +46,7 @@
 .filters-title {
   width: 90px;
   //   color: #089dbb;
-  color: #23bcba;
+  color: var(--primary-color-2);
   background-color: white;
   padding: 0px 20px;
   margin-top: -10px;
@@ -63,7 +63,7 @@
 //   }
 
 //   ::ng-deep .mat-focused .mat-form-field-label {
-// 	color: #00b29f !important;
+// 	color: var(--primary-color-3) !important;
 //   }
 
 //   ::ng-deep.mat-form-field-underline {
@@ -71,7 +71,7 @@
 //   }
 
 //   ::ng-deep.mat-form-field-ripple {
-// 	background-color: #00b29f !important;
+// 	background-color: var(--primary-color-3) !important;
 //   }
 
 ::ng-deep .mat-checkbox {
@@ -88,7 +88,7 @@
 .mat-accent .mat-pseudo-checkbox-indeterminate,
 .mat-pseudo-checkbox-checked,
 .mat-pseudo-checkbox-indeterminate {
-  background-color: #00b29f;
+  background-color: var(--primary-color-3);
 }
 
 ::ng-deep .mat-ripple-element {
@@ -106,14 +106,14 @@
 
 ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
   border-color: #777777;
-  // border-color: #00b29f;
+  // border-color: var(--primary-color-3);
 }
 
 ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
   color: #777777;
   background-color: #777777;
-  // color: #00b29f;
+  // color: var(--primary-color-3);
-  // background-color: #00b29f;
+  // background-color: var(--primary-color-3);
 }
 
 .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {

dmp-frontend/src/app/ui/language/language-content/language.component.ts

@@ -5,8 +5,7 @@ import { LanguageService } from '@app/core/services/language/language.service';
 import { UserService } from '@app/core/services/user/user.service';
 import { takeUntil } from 'rxjs/operators';
 import { BaseComponent } from '@common/base/base.component';
-
+import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
-const availableLanguages: any[] = require('../../../../assets/resources/language.json');
 
 @Component({
 	selector: 'app-language',
@@ -16,14 +15,18 @@ const availableLanguages: any[] = require('../../../../assets/resources/language
 export class LanguageComponent extends BaseComponent implements OnInit {
 
 	@Output() languageChange: EventEmitter<any> = new EventEmitter();
-	languages = availableLanguages;
+	languages = [];
 
 	constructor(
 		private router: Router,
 		private authentication: AuthService,
 		private languageService: LanguageService,
-		private userService: UserService
+		private userService: UserService,
-	) { super(); }
+		private configurationService:ConfigurationService
+	) {
+		super();
+		this.languages = this.configurationService.availableLanguages;
+	}
 
 	ngOnInit() {
 		this.languageChange.emit(this.getCurrentLanguage().value)

dmp-frontend/src/app/ui/misc/breadcrumb/breadcrumb.component.scss

@@ -44,7 +44,7 @@
   }
 
   .active {
-    color: #00b29f;
+    color: var(--primary-color-3);
   }
 
   .icon {

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-composite-title/form-composite-title.component.scss

@@ -24,7 +24,7 @@ h6 {
 
 .more {
 	text-decoration: underline;
-	color: #F7DD72;
+	color: var(--secondary-color);
 	cursor: pointer;
 	font-size: 1rem;
 	font-weight: 400;

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.scss

@@ -38,15 +38,15 @@
 	min-width: 156px;
 	height: 44px;
 	color: #ffffff;
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1e202029;
 	border-radius: 30px;
 }
 
 .attach-file-btn:hover {
 	background-color: #ffffff;
-	border: 1px solid #129d99;
+	border: 1px solid var(--primary-color);
-	color: #129d99;
+	color: var(--primary-color);
 }
 
 .attach-file-btn.mat-button-disabled, .attach-file-btn.mat-button-disabled:hover {

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section-inner/form-section-inner.component.scss

@@ -9,7 +9,7 @@
 	.addOneFieldButton {
 		margin-top: -15px;
 		margin-left: -11px;
-		color: #129d99;
+		color: var(--primary-color);
 	}
 	.panel-title,
 	.panel-desc {

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss

@@ -9,7 +9,7 @@
 	.addOneFieldButton {
 		margin-top: -15px;
 		margin-left: -11px;
-		color: #129d99;
+		color: var(--primary-color);
 	}
 	.panel-title,
 	.panel-desc {

dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss

@@ -27,5 +27,5 @@
 .mat-step-header .mat-step-icon-selected,
 .mat-step-header .mat-step-icon-state-done,
 .mat-step-header .mat-step-icon-state-edit {
-  background-color: #129d99 !important;
+  background-color: var(--primary-color) !important;
 }

dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.scss

@@ -43,5 +43,5 @@
 // ::ng-deep .mat-step-header .mat-step-icon-selected,
 // .mat-step-header .mat-step-icon-state-done,
 // .mat-step-header .mat-step-icon-state-edit {
-// 	background-color: #129d99 !important;
+// 	background-color: var(--primary-color) !important;
 // }

dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.scss

@@ -50,7 +50,7 @@ $mat-card-header-size: 40px !default;
 }
 
 .check-icon {
-  color: #129D99;
+  color: var(--primary-color);
   transform: scale(0.7);
 }
 

dmp-frontend/src/app/ui/navbar/navbar.component.html

@@ -1,13 +1,13 @@
 <ng-container>
 	<nav class="navbar navbar-expand-lg fixed-navbar">
-		<div class="container-fluid">
+		<div class="container-fluid h-100">
 
 			<div class="hamburger change" id="hamburger" (click)="toggleMyNav($event)">
 				<div class="icon-bar1"></div>
 				<div class="icon-bar2"></div>
 				<div class="icon-bar3"></div>
 			</div>
-			<a class="logo" [routerLink]="['home']"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
+			<a class="logo" [routerLink]="['home']"><img class="logo-image" src="../../../assets/images/nav-logo.png"></a>
 
 			<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
 				<img *ngIf="this.isAuthenticated();else loginoption" mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)">

dmp-frontend/src/app/ui/navbar/navbar.component.scss

@@ -30,10 +30,11 @@ $mat-card-header-size: 40px !default;
 }
 
 .logo {
-  // width: 98px;
-  // height: 37px;
-  margin-top: 15px;
   margin-left: 5px;
+  height: 100%;
+}
+.logo-image {
+	height: 100%;
 }
 
 .faq-title {
@@ -48,7 +49,7 @@ $mat-card-header-size: 40px !default;
 
 .faq-title:hover,
 .lang:hover {
-  color: #23bcba !important;
+  color: var(--primary-color-2) !important;
 }
 
 .lang {

dmp-frontend/src/app/ui/navbar/navbar.component.ts

@@ -1,29 +1,24 @@
 import { Location } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
 import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { Router } from '@angular/router';
 import { AppRole } from '@app/core/common/enum/app-role';
+import { UserListingModel } from '@app/core/model/user/user-listing';
 import { AuthService } from '@app/core/services/auth/auth.service';
+import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
+import { LanguageService } from '@app/core/services/language/language.service';
+import { MatomoService } from '@app/core/services/matomo/matomo-service';
 import { ProgressIndicationService } from '@app/core/services/progress-indication/progress-indication-service';
+import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
+import { UserService } from '@app/core/services/user/user.service';
 import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/operators';
+import { StartNewDmpDialogComponent } from '../dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component';
+import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component';
 import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
 import { DATASETS_ROUTES, DMP_ROUTES, GENERAL_ROUTES } from '../sidebar/sidebar.component';
-import { LanguageService } from '@app/core/services/language/language.service';
-import { UserService } from '@app/core/services/user/user.service';
-import { FaqDialogComponent } from '../faq/dialog/faq-dialog.component';
-import { DmpInvitationDialogComponent } from '../dmp/invitation/dmp-invitation-dialog.component';
-import { StartNewDmpDialogComponent } from '../dmp/start-new-dmp-dialogue/start-new-dmp-dialog.component';
-import { UserListingModel } from '@app/core/model/user/user-listing';
-import { Principal } from '@app/core/model/auth/principal';
-import { MatomoService } from '@app/core/services/matomo/matomo-service';
-import { HttpClient } from '@angular/common/http';
-import { SideNavService } from '@app/core/services/sidenav/side-nav.sevice';
-import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
-
-const availableLanguages: any[] = require('../../../assets/resources/language.json');
-
 @Component({
 	selector: 'app-navbar',
 	templateUrl: './navbar.component.html',
@@ -36,8 +31,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 	mobile_menu_visible: any = 0;
 	private toggleButton: any;
 	private sidebarVisible: boolean;
-	languages = availableLanguages;
+	languages = [];
-	language = this.languages[0];
 	currentRoute: string;
 	selectedLanguage: string;
 	private user: UserListingModel;
@@ -60,6 +54,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		super();
 		this.location = location;
 		this.sidebarVisible = false;
+		this.languages = this.configurationService.availableLanguages;
 		this.selectedLanguage = this.configurationService.defaultLanguage || 'en';
 	}
 
@@ -266,7 +261,7 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 		this.sidebarToggled.emit(event);
 	}
 
-	toggleMyNav(event){
+	toggleMyNav(event) {
 		this.sidenavService.toggle();
 	}
 

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css

@@ -17,7 +17,7 @@
 }
 
 .sidebar-footer .option:hover {
-	color: #00b29f;
+	color: var(--primary-color-3);
 }
 
 .sidebar-footer .vl {
@@ -26,5 +26,5 @@
 }
 
 .option-active {
-	color: #00b29f !important;
+	color: var(--primary-color-3) !important;
 }

dmp-frontend/src/app/ui/sidebar/sidebar.component.scss

@@ -34,7 +34,7 @@ $mat-card-header-size: 30px !default;
 }
 
 .active a i {
-  color: #23bcba;
+  color: var(--primary-color-2);
 }
 
 .inner-line {

dmp-frontend/src/app/ui/user-profile/add-account/add-account-dialog.component.scss

@@ -3,7 +3,7 @@
 		display: flex;
 		width: 100%;
 		height: 89px;
-		background-color: #129d99;
+		background-color: var(--primary-color);
 		color: #ffffff;
 		font-size: 1.25rem;
 	}
@@ -42,14 +42,14 @@
 		width: 84px;
 		height: 43px;
 		background: #ffffff;
-		color: #129d99;
+		color: var(--primary-color);
-		border: 1px solid #129d99;
+		border: 1px solid var(--primary-color);
 		border-radius: 30px;
 		opacity: 1;
 	}
 
 	.add-btn:hover {
-		background-color: #129d99;
+		background-color: var(--primary-color);
 		color: #ffffff;
 	}
 }

dmp-frontend/src/app/ui/user-profile/user-profile-editor.model.ts

@@ -2,7 +2,6 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 import { RoleOrganizationType } from '@app/core/common/enum/role-organization-type';
 import { OrganizationModel } from '@app/core/model/organisation/organization';
 import { UserListingModel } from '@app/core/model/user/user-listing';
-const availableLanguages: any[] = require('../../../assets/resources/language.json');
 
 export class UserProfileEditorModel {
 	public id: String;
@@ -25,7 +24,7 @@ export class UserProfileEditorModel {
 		return this;
 	}
 
-	buildForm(): FormGroup {
+	buildForm(availableLanguages: any[]): FormGroup {
 		const formGroup = new FormBuilder().group({
 			id: new FormControl(this.id),
 			name: new FormControl(this.name),

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

@@ -10,7 +10,7 @@
 }
 .clickable:hover {
 	//text-decoration: underline; //Alternative
-	color: #00b29f !important;
+	color: var(--primary-color-3) !important;
 }
 // .two-line-mat-option {
 // 	height: 3.5em;
@@ -66,7 +66,7 @@
 	}
 
 	.name {
-		color: #129d99;
+		color: var(--primary-color);
 		font-weight: 500;
 		font-size: 1.25rem;
 		line-height: 3rem;
@@ -77,7 +77,7 @@
 	}
 
 	.mail {
-		color: #129d99;
+		color: var(--primary-color);
 		font-weight: 500;
 	}
 
@@ -114,7 +114,7 @@
 }
 
 .save-btn {
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	border-radius: 30px;
 	opacity: 1;
 	width: auto;
@@ -151,13 +151,13 @@
     min-width: 162px;
     max-width: 256px;
     height: 40px;
-    color: #129d99;
+    color: var(--primary-color);
     font-size: 0.87rem;
     font-weight: 500;
 }
 
 .vertical-line {
-	border-left: 2px solid #129d99;
+	border-left: 2px solid var(--primary-color);
 }
 
 .email-title {
@@ -179,7 +179,7 @@
 // }
 
 .check-icon {
-	color: #129d99;
+	color: var(--primary-color);
 	transform: scale(0.75);
 	padding: 0.4rem;
 }
@@ -205,7 +205,7 @@
 	cursor: pointer;
 
 	mat-icon {
-		color: #129d99;
+		color: var(--primary-color);
 		display: inline-flex;
 		vertical-align: middle;
 	}

dmp-frontend/src/app/ui/user-profile/user-profile.component.ts

@@ -31,9 +31,7 @@ import { FormValidationErrorsDialogComponent } from '@common/forms/form-validati
 import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
 import { MatomoService } from '@app/core/services/matomo/matomo-service';
 import { HttpClient } from '@angular/common/http';
-import {PopupNotificationDialogComponent} from "@app/library/notification/popup/popup-notification.component";
+import { PopupNotificationDialogComponent } from "@app/library/notification/popup/popup-notification.component";
-
-const availableLanguages: any[] = require('../../../assets/resources/language.json');
 
 @Component({
 	selector: 'app-user-profile',
@@ -49,7 +47,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 	cultures: Observable<CultureInfo[]>;
 	timezones: Observable<any[]>;
 	editMode = false;
-	languages = availableLanguages;
+	languages = [];
 	zenodoToken: string;
 	zenodoEmail: String;
 	roleOrganizationEnum = RoleOrganizationType;
@@ -86,7 +84,10 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 		private mergeEmailConfirmation: MergeEmailConfirmationService,
 		private httpClient: HttpClient,
 		private matomoService: MatomoService
-	) { super(); }
+	) {
+		super();
+		this.languages = this.configurationService.availableLanguages;
+	}
 
 	ngOnInit() {
 		this.matomoService.trackPageView('User Profile');
@@ -101,7 +102,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes
 					this.zenodoEmail = result['zenodoEmail'];
 
 					this.userProfileEditorModel = new UserProfileEditorModel().fromModel(result);
-					this.formGroup = this.userProfileEditorModel.buildForm();
+					this.formGroup = this.userProfileEditorModel.buildForm(this.configurationService.availableLanguages);
 					// this.formGroup = new FormBuilder().group({
 					// 	language: new FormControl(result['language'] ? availableLanguages.filter(x => x.value === result['language']['value']).pop() : '', [Validators.required]),
 					// 	timezone: new FormControl(result['timezone'], [Validators.required]),

dmp-frontend/src/assets/config/config.json

@@ -8,6 +8,48 @@
 	},
 	"defaultCulture": "en-US",
 	"defaultLanguage": "en",
+	"availableLanguages": [
+		{
+			"label": "GENERAL.LANGUAGES.ENGLISH",
+			"value": "en"
+		},
+		{
+			"label": "GENERAL.LANGUAGES.GREEK",
+			"value": "gr"
+		},
+		{
+			"label": "GENERAL.LANGUAGES.SPANISH",
+			"value": "es"
+		},
+		{
+			"label": "GENERAL.LANGUAGES.GERMAN",
+			"value": "de"
+		},
+		{
+			"label": "GENERAL.LANGUAGES.TURKISH",
+			"value": "tr"
+		},
+		{
+			"label": "GENERAL.LANGUAGES.SLOVAK",
+			"value": "sk"
+		},
+		{
+			"label": "GENERAL.LANGUAGES.SERBIAN",
+			"value": "sr"
+		},
+		{
+			"label": "GENERAL.LANGUAGES.PORTUGUESE",
+			"value": "pt"
+		},
+		{
+			"label": "GENERAL.LANGUAGES.CROATIAN",
+			"value": "hr"
+		},
+		{
+			"label": "GENERAL.LANGUAGES.POLISH",
+			"value": "pl"
+		}
+	],
 	"loginProviders": {
 		"enabled": [1, 2, 3, 4, 5, 6, 7, 8],
 		"facebookConfiguration": { "clientId": "" },

dmp-frontend/src/assets/css/demo.css

@@ -78,7 +78,7 @@ h6 {
 }
 
 .sidebar[data-color="danger"] li.active>a {
-	background-color: rgb(0, 178, 159);
+	background-color: var(--primary-color-1);
 	/* -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); */
 	/* box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); */
 	box-shadow: none;
@@ -353,7 +353,7 @@ table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .
 }
 
 .attach-file :hover {
-	color: #00b29f
+	color: var(--primary-color-3)
 }
 
 .normal-btn {
@@ -361,7 +361,7 @@ table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .
 	max-width: 256px;
 	height: 40px;
 	cursor: pointer;
-	background: #129d99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1e202029;
 	border-radius: 30px;
 	border: none;
@@ -416,7 +416,7 @@ p {
 }
 
 p a {
-	color: #23BCBA;
+	color: var(--primary-color-2);
 }
 
 .bootstrap-overrides a {
@@ -425,7 +425,7 @@ p a {
 }
 
 .bootstrap-overrides a:hover {
-	color: #23BCBA;
+	color: var(--primary-color-2);
 	text-decoration: none;
 }
 
@@ -566,7 +566,7 @@ hr {
 	max-width: 256px;
 	height: 40px;
 	cursor: pointer;
-	background: #129D99 0% 0% no-repeat padding-box;
+	background: var(--primary-color) 0% 0% no-repeat padding-box;
 	box-shadow: 0px 3px 6px #1E202029;
 	border-radius: 30px;
 	border: none;
@@ -599,7 +599,7 @@ hr {
 	width: 894px;
 	height: 221px;
 	background: #FFFFFF 0% 0% no-repeat padding-box;
-	border: 1px solid #23BCBA;
+	border: 1px solid var(--primary-color-2);
 	border-radius: 37px;
 	opacity: 1;
 	margin: 3.75rem 0rem;