From f9dc782008dbbd991b7346001f8d9e27a97cef34 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Thu, 4 Aug 2022 15:33:49 +0300
Subject: [PATCH] Change header info style. Fix menu in admin routes. Add
 replaceHeader for dashboard and stakeholder admin.

---
 .../admin-stakeholder-routing.module.ts       |   3 -
 src/app/app-routing.module.ts                 |  12 +-
 src/app/app.component.html                    |   4 +-
 src/app/app.component.ts                      | 116 +++---
 src/app/general/general.component.html        |   6 +-
 .../manageStakeholders-routing.module.ts      |   3 +-
 .../manageStakeholders.component.html         |   8 +-
 src/app/monitor/monitor.component.html        | 370 +++++++++---------
 src/app/openaireLibrary                       |   2 +-
 src/app/topic/topic.component.html            |   8 +-
 src/app/users/users.component.html            |   8 +-
 src/assets/common-assets                      |   2 +-
 src/assets/monitor-dashboard-custom.less      |   1 +
 src/assets/openaire-theme                     |   2 +-
 14 files changed, 277 insertions(+), 268 deletions(-)

diff --git a/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts b/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts
index dcbece2..e8d1c79 100644
--- a/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts
+++ b/src/app/admin-stakeholder/admin-stakeholder-routing.module.ts
@@ -6,7 +6,6 @@ import {RouterModule} from "@angular/router";
     {
       path: '',
       loadChildren: () => import('../general/general.module').then(m => m.GeneralModule),
-      data: {hasAdminMenu: true},
       pathMatch: 'full'
     },
     {
@@ -17,7 +16,6 @@ import {RouterModule} from "@angular/router";
     {
       path: 'users/:user_type',
       loadChildren: () => import('../users/users.module').then(m => m.UsersModule),
-      data: {hasAdminMenu: true},
       pathMatch: 'full'
     },
     {
@@ -34,7 +32,6 @@ import {RouterModule} from "@angular/router";
       path: 'admin-tools',
       loadChildren: () => import('../admin-tools/admin-tools-routing.module').then(m => m.AdminToolsRoutingModule),
       data: {
-        hasAdminMenu: true,
         param: 'stakeholder',
         parentClass: 'monitor'
       }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index b119844..95798a8 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -25,32 +25,30 @@ const routes: Routes = [
     path: 'admin',
     loadChildren: () => import('./manageStakeholders/manageStakeholders.module').then(m => m.ManageStakeholdersModule),
     canActivateChild: [LoginGuard],
-    data: {hasAdminMenu: true}
+    data: {hasAdminMenu: true, hasSidebar: false}
   },
   {
     path: 'admin/user-info',
     loadChildren: () => import('./login/libUser.module').then(m => m.LibUserModule),
-    data: {hasAdminMenu: true}
+    data: {hasAdminMenu: true, hasSidebar: false}
   },
   {
     path: 'admin/admin-tools',
     loadChildren: () => import('./admin-tools/portal-admin-tools-routing.module').then(m => m.PortalAdminToolsRoutingModule),
     canActivateChild: [AdminLoginGuard],
-    data: {hasAdminMenu: true}
+    data: {hasAdminMenu: true, hasSidebar: false}
   },
   {
     path: 'admin/monitor/admin-tools',
     loadChildren: () => import('./admin-tools/admin-tools-routing.module').then(m => m.AdminToolsRoutingModule),
     canActivateChild: [AdminLoginGuard],
-    data: {hasAdminMenu: true, portal: 'monitor', monitorCurator: true, parentClass: 'monitor'}
+    data: {hasAdminMenu: true, hasSidebar: false, portal: 'monitor', monitorCurator: true, parentClass: 'monitor'}
   },
   {
     path: 'admin/:stakeholder',
     loadChildren: () => import('./admin-stakeholder/admin-stakeholder-routing.module').then(m => m.AdminStakeholderRoutingModule),
     canActivateChild: [AdminDashboardGuard],
-    data: {
-      activeMenuItem: "manage"
-    }
+    data: {hasAdminMenu: true, hasSidebar: false, activeMenuItem: "manage"}
   },
   {
     path: 'theme',
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 35eed80..a768984 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,9 +3,9 @@
 </div>
 <div *ngIf="!loading" [class.monitor]="isFrontPage">
   <div id="container" class="sidebar_main_swipe uk-background-default" [class.sidebar_main_active]="open && (hasSidebar || hasAdminMenu)"
-       [class.sidebar_mini]="!open && hasSidebar && (!hasAdminMenu || hasAdminMenu)">
+       [class.sidebar_mini]="!open &&  (hasSidebar || hasAdminMenu)">
     <div id="modal-container"></div>
-    <navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader" [dark]="isFrontPage"
+    <navbar *ngIf="hasHeader" portal="monitor_dashboard" [header]="menuHeader"
               [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
     <div>
       <dashboard-sidebar *ngIf="stakeholder && isFrontPage && hasSidebar" queryParamsHandling="merge" [items]="sideBarItems" [activeItem]="activeTopic?activeTopic.alias:null"></dashboard-sidebar>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 0505ffa..71f54ac 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -17,6 +17,7 @@ import {StakeholderUtils} from "./utils/indicator-utils";
 import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
 import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
 import {ResourcesService} from "./openaireLibrary/monitor/services/resources.service";
+import {StringUtils} from "./openaireLibrary/utils/string-utils.class";
 
 
 @Component({
@@ -245,7 +246,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.adminMenuItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, {name: 'bar_chart'}));
     if (this.stakeholder.defaultId) {
       this.adminMenuItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + "/users", false, [], [], {}, {name: 'group'}, null, null, "/admin/" + this.stakeholder.alias + "/users"));
-      if (Session.isPortalAdministrator(this.user)) {
+      if (this.isCurator()) {
         this.adminMenuItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/admin/" + this.stakeholder.alias + "/admin-tools/pages", false, [], [], {}, {name: 'description'}, null, null, "/admin/" + this.stakeholder.alias + "/admin-tools"));
       }
     }
@@ -261,15 +262,15 @@ export class AppComponent implements OnInit, OnDestroy {
     this.menuItems = [];
     this.userMenuItems = [];
     if (this.user) {
-      if (this.isCurator()) {
+      if (this.isKindOfMonitorManager()) {
         this.userMenuItems.push(new MenuItem("", "Manage profiles",
           "", "/admin", false, [], [], {}));
       }
       if (Session.isPortalAdministrator(this.user)) {
         this.userMenuItems.push(new MenuItem("adminOptions", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}));
       }
-      if (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user)) {
-        this.userMenuItems.push(new MenuItem("monitorOptions", "Monitor portal options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}));
+      if (this.isCurator()) {
+        this.userMenuItems.push(new MenuItem("monitorOptions", "Monitor options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}));
       }
     }
     if (this.stakeholder) {
@@ -286,7 +287,7 @@ export class AppComponent implements OnInit, OnDestroy {
             null, null, null, null),
           items: []
         });
-        if(this.properties.environment !== 'production') {
+        if (this.properties.environment !== 'production') {
           this.resourcesService.setResourcesDeprecated(this.menuItems, "/" + this.stakeholder.alias);
         } else {
           this.menuItems.push({
@@ -319,10 +320,23 @@ export class AppComponent implements OnInit, OnDestroy {
           url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
           title: "Monitor",
           logoUrl: 'assets/common-assets/logo-services/monitor/small-inverted.svg',
-          logoSmallUrl: "assets/common-assets/logo-services/monitor/small-inverted.svg",
+          logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
           position: 'center',
           badge: true,
-          menuPosition: "center"
+          darkBg: true,
+          menuPosition: "center",
+          replaceHeader: {
+            route: './' + this.stakeholder.alias,
+            url: null,
+            title: this.stakeholder.name,
+            logoUrl: StringUtils.getLogoUrl(this.stakeholder),
+            logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
+            logoInfo: '<div class="uk-margin-left uk-width-medium"><div class="uk-margin-remove uk-text-background uk-text-bold uk-text-small">Dashboard</div>' +
+              '<div class="uk-h6 uk-text-truncate uk-margin-remove">' + this.stakeholder.name + '</div></div>',
+            position: 'center',
+            badge: true,
+            menuPosition: "center"
+          }
         };
       } else {
         this.menuHeader = {
@@ -333,65 +347,65 @@ export class AppComponent implements OnInit, OnDestroy {
           logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
           position: 'center',
           badge: true,
-          menuPosition: "center"
+          menuPosition: "center",
+          replaceHeader: {
+            route: './' + this.stakeholder.alias,
+            url: null,
+            title: this.stakeholder.name,
+            logoUrl: StringUtils.getLogoUrl(this.stakeholder),
+            logoSmallUrl: StringUtils.getLogoUrl(this.stakeholder),
+            position: 'center',
+            badge: true,
+            menuPosition: "center"
+          }
         };
       }
     } else {
-      if (this.isFrontPage || !this.hasAdminMenu) {
-        this.userMenuItems.push(new MenuItem("", "User information", "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/user-info', '', false, [], [], {}, null, null, null, null, "_self"));
-        this.menuHeader = {
-          route: null,
-          url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
-          title: "Monitor",
-          logoUrl: 'assets/common-assets/logo-services/monitor/main.svg',
-          logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
-          position: 'left',
-          badge: true,
-          menuPosition: "center"
-        };
-        this.menuItems.push({
-          rootItem: new MenuItem("about", "About",
-            "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/about/learn-how', "", false, [], null, {}, null, null, null, null, "_self"),
-          items: []
-        });
-        if(this.properties.environment === 'development') {
-          // @ts-ignore
-          this.resourcesService.setResourcesDeprecated(this.menuItems, '', "https://" + (this.properties.environment === 'beta' ? 'beta.' : '') + 'monitor.openaire.eu');
-        }
-        this.menuItems.push({
-          rootItem: new MenuItem("stakeholders", "Browse " + this.stakeholderEntities.STAKEHOLDERS,
-            "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/browse', "", false, [], null, {}, null, null, null, null, "_self"),
-          items: []
-        });
-      } else {
-        this.userMenuItems.push(new MenuItem("", "User information", "", "/admin/user-info", false, [], [], {}));
-        this.menuHeader = {
-          route: "/",
-          url: null,
-          title: "Monitor Dashboard",
-          logoUrl: null,
-          logoSmallUrl: null,
-          position: 'center',
-          badge: false,
-          stickyAnimation: true,
-          menuPosition: "center"
-        };
+      this.userMenuItems.push(new MenuItem("", "User information", "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/user-info', '', false, [], [], {}, null, null, null, null, "_self"));
+      this.menuHeader = {
+        route: null,
+        url: "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu',
+        title: "Monitor",
+        logoUrl: 'assets/common-assets/logo-services/monitor/main.svg',
+        logoSmallUrl: "assets/common-assets/logo-services/monitor/small.svg",
+        position: 'left',
+        badge: true,
+        menuPosition: "center"
+      };
+      this.menuItems.push({
+        rootItem: new MenuItem("about", "About",
+          "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/about/learn-how', "", false, [], null, {}, null, null, null, null, "_self"),
+        items: []
+      });
+      if (this.properties.environment === 'development') {
+        // @ts-ignore
+        this.resourcesService.setResourcesDeprecated(this.menuItems, '', "https://" + (this.properties.environment === 'beta' ? 'beta.' : '') + 'monitor.openaire.eu');
+      }
+      this.menuItems.push({
+        rootItem: new MenuItem("stakeholders", "Browse " + this.stakeholderEntities.STAKEHOLDERS,
+          "https://" + (this.properties.environment == 'beta' ? 'beta.' : '') + 'monitor.openaire.eu/browse', "", false, [], null, {}, null, null, null, null, "_self"),
+        items: []
+      });
+      if (this.hasAdminMenu) {
         this.adminMenuItems = [];
         this.specialSideBarMenuItem = null;
         this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, {name: 'settings'}));
         if (Session.isPortalAdministrator(this.user)) {
-          this.adminMenuItems.push(new MenuItem("super_admin", "Super Admin Options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, null, '/admin/admin-tools'));
+          this.adminMenuItems.push(new MenuItem("super_admin", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, null, '/admin/admin-tools'));
         }
         if (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user)) {
-          this.adminMenuItems.push(new MenuItem("monitor", "Monitor Options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, '/admin/monitor/admin-tools'));
+          this.adminMenuItems.push(new MenuItem("monitor", "Monitor options", "", "/admin/monitor/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, null, '/admin/monitor/admin-tools'));
         }
-        this.hasAdminMenu = this.hasAdminMenu && this.adminMenuItems.length > 0;
+        this.hasAdminMenu = this.hasAdminMenu && this.adminMenuItems.length > 1;
       }
     }
-    
   }
   
   public isCurator() {
+    return this.user && (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user));
+  }
+  
+  public isKindOfMonitorManager() {
     return this.user && (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isKindOfMonitorManager(this.user));
   }
   
diff --git a/src/app/general/general.component.html b/src/app/general/general.component.html
index 8642b4e..c104f67 100644
--- a/src/app/general/general.component.html
+++ b/src/app/general/general.component.html
@@ -1,10 +1,10 @@
 <div page-content>
 	<div header *ngIf="stakeholder">
-		<div class="uk-flex uk-flex-middle uk-margin-top uk-margin-bottom info">
+		<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
 			<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
 			<div>
-				<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Profile</div>
-				<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}<span *ngIf="editStakeholderComponent && editStakeholderComponent.dirty && !loading" class="uk-text-large"> (unsaved changes)</span></h1>
+				<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Profile</div>
+				<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}<span *ngIf="editStakeholderComponent && editStakeholderComponent.dirty && !loading" class="uk-text-large"> (unsaved changes)</span></h1>
 			</div>
 		</div>
 	</div>
diff --git a/src/app/manageStakeholders/manageStakeholders-routing.module.ts b/src/app/manageStakeholders/manageStakeholders-routing.module.ts
index 595da18..09aaccc 100644
--- a/src/app/manageStakeholders/manageStakeholders-routing.module.ts
+++ b/src/app/manageStakeholders/manageStakeholders-routing.module.ts
@@ -9,8 +9,7 @@ import {ManageStakeholdersComponent} from "./manageStakeholders.component";
       {
         path: '',
         component: ManageStakeholdersComponent,
-        canDeactivate: [PreviousRouteRecorder],
-        data: {hasSidebar: true}
+        canDeactivate: [PreviousRouteRecorder]
       }
     ])
   ]
diff --git a/src/app/manageStakeholders/manageStakeholders.component.html b/src/app/manageStakeholders/manageStakeholders.component.html
index 9fb9893..6760158 100644
--- a/src/app/manageStakeholders/manageStakeholders.component.html
+++ b/src/app/manageStakeholders/manageStakeholders.component.html
@@ -1,13 +1,13 @@
 <div page-content>
   <div header>
-    <div class="uk-flex uk-flex-middle uk-margin-top info">
+    <div class="uk-flex uk-flex-middle uk-margin-medium-top info">
       <img src="assets/common-assets/placeholder.png" class="uk-margin-right">
       <div>
-        <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage profiles</div>
-        <h1 class="uk-h4 uk-margin-remove">Profile Templates & Profiles</h1>
+        <div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage profiles</div>
+        <h1 class="uk-h6 uk-margin-remove">Profile Templates & Profiles</h1>
       </div>
     </div>
-    <ul *ngIf="isCurator()" class="uk-tab uk-margin-top" uk-tab>
+    <ul *ngIf="isCurator()" class="uk-tab uk-margin-remove-bottom uk-margin-medium-top" uk-tab>
       <li [class.uk-active]="tab === 'all'"><a (click)="tab = 'all'">All</a></li>
       <li [class.uk-active]="tab === 'templates'"><a (click)="tab = 'templates'">Profile templates</a></li>
       <li [class.uk-active]="tab === 'profiles'"><a (click)="tab = 'profiles'">Profiles</a></li>
diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index e79e311..66462fc 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -37,41 +37,43 @@
     </div>
   </div>
 </ng-template>
-<div page-content [headerSticky]="true">
-  <div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
-    <div class="uk-flex uk-flex-middle uk-margin-top info">
+<div page-content>
+  <div header>
+    <div class="uk-flex uk-flex-middle uk-margin-medium-top info">
       <img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
       <div>
-        <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Dashboard</div>
-        <h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
+        <div class="uk-text-background uk-text-bold uk-text-small">Dashboard</div>
+        <h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
       </div>
     </div>
-    <ul *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-tab">
-        <ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
-          <li *ngIf="isPublicOrIsMember(category.visibility)"
-              [class.uk-active]="category.alias === activeCategory.alias">
-            <a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
-							[queryParams]="queryParams">
-              <span class="title">{{category.name}}</span>
-            </a>
-          </li>
-        </ng-template>
-      </ul>
   </div>
-  <div inner>
+  <div *ngIf="activeTopic && activeTopic.categories.length > 0" class="uk-margin-medium-top" actions>
+    <ul *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-tab uk-margin-remove-bottom">
+      <ng-template ngFor [ngForOf]="activeTopic.categories" let-category>
+        <li *ngIf="isPublicOrIsMember(category.visibility)"
+            [class.uk-active]="category.alias === activeCategory.alias">
+          <a [routerLink]="['/', stakeholder.alias, activeTopic.alias, category.alias]"
+             [queryParams]="queryParams">
+            <span class="title">{{category.name}}</span>
+          </a>
+        </li>
+      </ng-template>
+    </ul>
     <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1" class="uk-flex uk-flex-right uk-margin-top">
       <ul class="uk-subnav uk-subnav-pill-alt">
         <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
           <li *ngIf="isPublicOrIsMember(subCategory.visibility)"
               [ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
             <a [routerLink]="['/', stakeholder.alias, activeTopic.alias, activeCategory.alias, subCategory.alias]"
-							[queryParams]="queryParams"
-							class="uk-margin-remove-bottom"
+               [queryParams]="queryParams"
+               class="uk-margin-remove-bottom"
             ><span>{{subCategory.name}}</span></a>
           </li>
         </ng-template>
       </ul>
     </div>
+  </div>
+  <div inner>
     <div *ngIf="privateStakeholder" class="message">
       <div class="uk-text-center">
         <h3 class="uk-flex uk-flex-middle">
@@ -81,182 +83,180 @@
       </div>
     </div>
     <div *ngIf="!privateStakeholder && stakeholder" class="uk-section">
-      <div class="uk-padding uk-padding-remove-vertical">
-				<div *ngIf="activeSubCategory?.description" class="uk-margin-medium-bottom">
-					{{activeSubCategory.description}}
-				</div>
-        <div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
-          && ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) ||
-          (activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
-          (activeTopic && activeTopic.description && activeTopic.description.length > 0))" class="uk-text-center">
-          <div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
-            {{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
-              : (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
-                  (activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}
-          </div>
+      <div *ngIf="activeSubCategory?.description" class="uk-margin-medium-bottom">
+        {{activeSubCategory.description}}
+      </div>
+      <div *ngIf="(activeSubCategory && (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
+        && ((activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0) ||
+        (activeCategory && activeCategory.description && activeCategory.description.length > 0) ||
+        (activeTopic && activeTopic.description && activeTopic.description.length > 0))" class="uk-text-center">
+        <div class="uk-height-small uk-margin-large-top uk-margin-xlarge-right uk-margin-xlarge-left">
+          {{activeSubCategory && activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
+            : (activeCategory && activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description :
+                (activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}}
         </div>
-        <ng-template [ngIf]="!loading && !privateStakeholder &&
-                    (!activeSubCategory ||
-                    ((activeSubCategory.numbers.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.numbers) == 0) &&
-										(activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
-                    || !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
-          <div class="message uk-text-center">
-            <h3>
-              No indicators available yet. Stay tuned!
-            </h3>
-          </div>
-        </ng-template>
-        <ng-template #content>
-          <ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
-            <div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid uk-margin-medium-bottom" uk-grid
-							uk-height-match="target: .uk-card">
-              <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
-              <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
-                <div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
-                  <div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
-										[class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
-                    <div class="uk-text-center">
-                      <!--<div *ngIf="properties.environment === 'development'">
-                        Filtered:{{indicator.indicatorPaths[0].filtersApplied}}out of{{countSelectedFilters()}}
-                      </div>-->
-                      <div class="number uk-text-bold uk-text-background">
-                        <span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
-                        <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
-                      </div>
-                      <!-- for printing only -->
-                      <span *ngIf="numberResults.get(i + '-' + j)"
-												class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span>
-                      <!-- ----------------- -->
-                      <div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
+      </div>
+      <ng-template [ngIf]="!loading && !privateStakeholder &&
+                  (!activeSubCategory ||
+                  ((activeSubCategory.numbers.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.numbers) == 0) &&
+                  (activeSubCategory.charts.length == 0 || countSectionsWithIndicatorsToShow(activeSubCategory.charts) == 0))
+                  || !activeTopic || !activeCategory || !activeSubCategory)" [ngIfElse]="content">
+        <div class="message uk-text-center">
+          <h3>
+            No indicators available yet. Stay tuned!
+          </h3>
+        </div>
+      </ng-template>
+      <ng-template #content>
+        <ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
+          <div *ngIf="countIndicatorsToShow(number.indicators) > 0" class="uk-grid uk-margin-medium-bottom" uk-grid
+            uk-height-match="target: .uk-card">
+            <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
+            <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
+              <div *ngIf="isPublicOrIsMember(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
+                <div class="uk-card uk-card-default uk-flex uk-flex-column uk-flex-center"
+                  [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
+                  <div class="uk-text-center">
+                    <!--<div *ngIf="properties.environment === 'development'">
+                      Filtered:{{indicator.indicatorPaths[0].filtersApplied}}out of{{countSelectedFilters()}}
+                    </div>-->
+                    <div class="number uk-text-bold uk-text-background">
+                      <span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
+                      <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
                     </div>
-										<div *ngIf="indicator.description || indicator.additionalDescription"
-											class="uk-position-bottom uk-text-center uk-margin-small-bottom">
-											<a class="uk-display-inline-block uk-button uk-button-text"
-												(click)="toggleDescriptionOverlay($event, j)">
-												<span class="uk-flex uk-flex-middle">
-													<icon name="analytics" type="outlined" [flex]="true"></icon>
-													<span class="uk-margin-small-left">Description</span>
-												</span>
-											</a>
-                      </div>
-                      <div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
-												class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
-                        <div class="inner uk-padding-small" click-outside-or-esc
-													(clickOutside)="closeDescriptionOverlay($event, j)">
-                          <div class="uk-flex uk-flex-right">
-                            <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
-                              <icon name="close" ratio="1"></icon>
-                            </button>
-                          </div>
-                          <div class="uk-padding-small uk-padding-remove-horizontal">
-                            <p *ngIf="indicator.description">
-                              {{indicator.description}}
-                            </p>
-                            <p *ngIf="indicator.additionalDescription">
-                              {{indicator.additionalDescription}}
-                            </p>
-                          </div>
+                    <!-- for printing only -->
+                    <span *ngIf="numberResults.get(i + '-' + j)"
+                      class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span>
+                    <!-- ----------------- -->
+                    <div class="uk-text-uppercase uk-text-small uk-margin-top">{{indicator.name}}</div>
+                  </div>
+                  <div *ngIf="indicator.description || indicator.additionalDescription"
+                    class="uk-position-bottom uk-text-center uk-margin-small-bottom">
+                    <a class="uk-display-inline-block uk-button uk-button-text"
+                      (click)="toggleDescriptionOverlay($event, j)">
+                      <span class="uk-flex uk-flex-middle">
+                        <icon name="analytics" type="outlined" [flex]="true"></icon>
+                        <span class="uk-margin-small-left">Description</span>
+                      </span>
+                    </a>
+                    </div>
+                    <div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
+                      class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
+                      <div class="inner uk-padding-small" click-outside-or-esc
+                        (clickOutside)="closeDescriptionOverlay($event, j)">
+                        <div class="uk-flex uk-flex-right">
+                          <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
+                            <icon name="close" ratio="1"></icon>
+                          </button>
+                        </div>
+                        <div class="uk-padding-small uk-padding-remove-horizontal">
+                          <p *ngIf="indicator.description">
+                            {{indicator.description}}
+                          </p>
+                          <p *ngIf="indicator.additionalDescription">
+                            {{indicator.additionalDescription}}
+                          </p>
                         </div>
                       </div>
+                    </div>
+                </div>
+              </div>
+            </ng-template>
+          </div>
+        </ng-container>
+        <ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
+            <div *ngIf="countIndicatorsToShow(chart.indicators) > 0"
+                class="uk-grid uk-grid-column-medium uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
+                uk-height-match="target: .uk-card">
+              <h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
+              <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
+                <div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
+                  [ngClass]="getChartClassBySize(indicator.width)">
+                  <div class="uk-card uk-card-default uk-position-relative"
+                    [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
+                    <div class="uk-card-body uk-text-center uk-margin-small-bottom">
+                      <h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
+                        <div>{{indicator.name + " "}}</div>
+                      </h4>
+                      <div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
+                        <button *ngFor="let indicatorPath of indicator.indicatorPaths;"
+                                class="uk-button"
+                                (click)="setActiveChart(i, j, indicatorPath.type)"
+                                [class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
+                          {{indicatorPath.type}}
+                        </button>
+                      </div>
+                      <!--<div *ngIf="properties.environment === 'development'">
+                        Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}}  out of
+                        {{countSelectedFilters()}}</div>-->
+                      <iframe
+                          *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
+                          [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
+                          class="uk-width-1-1 uk-blend-multiply" allowfullscreen="true" mozallowfullscreen="true"
+                          [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
+                      <div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
+                        <img class="uk-width-1-1 uk-blend-multiply"
+                          [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
+                          src="assets/chart-placeholder.png">
+                      </div>
+                      <img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
+                           [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
+                           class="uk-width-1-1 uk-blend-multiply"
+                           [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
+                    </div>
+                    <div *ngIf="indicator.description || indicator.additionalDescription"
+                         class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom">
+                      <a class="uk-display-inline-block uk-button uk-button-text"
+                         (click)="toggleDescriptionOverlay($event, j)">
+                        <span class="uk-flex uk-flex-middle">
+                          <icon name="analytics" type="outlined" [flex]="true"></icon>
+                          <span class="uk-margin-small-left">Description</span>
+                        </span>
+                      </a>
+                    </div>
+                    <div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
+                         class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
+                      <div class="inner uk-padding-small" click-outside-or-esc
+                           (clickOutside)="closeDescriptionOverlay($event, j)">
+                        <div class="uk-flex uk-flex-right">
+                          <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
+                            <icon name="close" ratio="1"></icon>
+                          </button>
+                        </div>
+                        <div class="uk-padding-small uk-padding-remove-horizontal">
+                          <p *ngIf="indicator.description">
+                            {{indicator.description}}
+                          </p>
+                          <p *ngIf="indicator.additionalDescription">
+                            {{indicator.additionalDescription}}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
+                <div class="printGap uk-hidden"></div>
               </ng-template>
             </div>
           </ng-container>
-          <ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
-              <div *ngIf="countIndicatorsToShow(chart.indicators) > 0"
-									class="uk-grid uk-grid-column-medium uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
-									uk-height-match="target: .uk-card">
-                <h5 *ngIf="chart.title" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
-                <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
-                  <div *ngIf="isPublicOrIsMember(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
-										[ngClass]="getChartClassBySize(indicator.width)">
-                    <div class="uk-card uk-card-default uk-position-relative"
-											[class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
-                      <div class="uk-card-body uk-text-center uk-margin-small-bottom">
-                        <h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
-                          <div>{{indicator.name + " "}}</div>
-                        </h4>
-                        <div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
-                          <button *ngFor="let indicatorPath of indicator.indicatorPaths;"
-                                  class="uk-button"
-                                  (click)="setActiveChart(i, j, indicatorPath.type)"
-                                  [class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
-                            {{indicatorPath.type}}
-                          </button>
-                        </div>
-                        <!--<div *ngIf="properties.environment === 'development'">
-                          Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}}  out of
-                          {{countSelectedFilters()}}</div>-->
-                        <iframe
-                            *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
-                            [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
-                            class="uk-width-1-1 uk-blend-multiply" allowfullscreen="true" mozallowfullscreen="true"
-                            [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
-                        <div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
-                          <img class="uk-width-1-1 uk-blend-multiply"
-														[ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
-														src="assets/chart-placeholder.png">
-                        </div>
-                        <img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
-                             [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
-                             class="uk-width-1-1 uk-blend-multiply"
-                             [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
-                      </div>
-                      <div *ngIf="indicator.description || indicator.additionalDescription"
-                           class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom">
-                        <a class="uk-display-inline-block uk-button uk-button-text"
-                           (click)="toggleDescriptionOverlay($event, j)">
-                          <span class="uk-flex uk-flex-middle">
-                            <icon name="analytics" type="outlined" [flex]="true"></icon>
-                            <span class="uk-margin-small-left">Description</span>
-                          </span>
-                        </a>
-                      </div>
-                      <div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
-                           class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
-                        <div class="inner uk-padding-small" click-outside-or-esc
-                             (clickOutside)="closeDescriptionOverlay($event, j)">
-                          <div class="uk-flex uk-flex-right">
-                            <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
-                              <icon name="close" ratio="1"></icon>
-                            </button>
-                          </div>
-                          <div class="uk-padding-small uk-padding-remove-horizontal">
-                            <p *ngIf="indicator.description">
-                              {{indicator.description}}
-                            </p>
-                            <p *ngIf="indicator.additionalDescription">
-                              {{indicator.additionalDescription}}
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="printGap uk-hidden"></div>
-                </ng-template>
-              </div>
-            </ng-container>
-          <div class="uk-margin-medium-top uk-text-small uk-flex hideInfo">
-            <!-- Last Stats Date-->
-            <div class="uk-width-2-3@m uk-width-1-2">
-              <icon name="graph" customClass="text-graph"></icon>
-              <span class="uk-margin-small-left uk-text-baseline uk-text-meta">Powered by </span>
-              <a href="https://graph.openaire.eu" class="text-graph">OpenAIRE Research Graph</a>
-              <span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-meta">
-                . Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
-              </span>
-            </div>
-            <!--Feedback-->
-            <div class="uk-width-expand uk-text-right">
-              <span class="uk-text-meta">Send us your </span>
-              <a class="uk-link" [href]="feedback" target="_self">feedback</a>
-              <span class="uk-text-meta">.</span>
-            </div>
+        <div class="uk-margin-medium-top uk-text-small uk-flex hideInfo">
+          <!-- Last Stats Date-->
+          <div class="uk-width-2-3@m uk-width-1-2">
+            <icon name="graph" customClass="text-graph"></icon>
+            <span class="uk-margin-small-left uk-text-baseline uk-text-meta">Powered by </span>
+            <a href="https://graph.openaire.eu" class="text-graph">OpenAIRE Research Graph</a>
+            <span *ngIf="statsUpdateDate" class="uk-text-baseline uk-text-meta">
+              . Last update of statistics in OpenAIRE: {{statsUpdateDate | date: 'MMM dd, yyyy'}}
+            </span>
           </div>
-        </ng-template>
-      </div>
+          <!--Feedback-->
+          <div class="uk-width-expand uk-text-right">
+            <span class="uk-text-meta">Send us your </span>
+            <a class="uk-link" [href]="feedback" target="_self">feedback</a>
+            <span class="uk-text-meta">.</span>
+          </div>
+        </div>
+      </ng-template>
     </div>
   </div>
 </div>
diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary
index fd9794e..6a7559a 160000
--- a/src/app/openaireLibrary
+++ b/src/app/openaireLibrary
@@ -1 +1 @@
-Subproject commit fd9794ec3aa5fd031a3642febf4c2a4d20425cd7
+Subproject commit 6a7559a3ad226e25eeea9c39cb62fa960438d6ef
diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
index e087cd1..dcf1d3d 100644
--- a/src/app/topic/topic.component.html
+++ b/src/app/topic/topic.component.html
@@ -142,17 +142,17 @@
 <div *ngIf="stakeholder && filters" page-content>
   <div header>
     <div *ngIf="stakeholder.topics.length > 0 && stakeholder.topics[topicIndex]">
-      <div class="uk-flex uk-margin-top uk-flex-middle info">
+      <div class="uk-flex uk-margin-medium-top uk-flex-middle info">
         <img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
         <div>
-          <div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage Indicators</div>
-          <h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
+          <div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Indicators</div>
+          <h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
         </div>
       </div>
     </div>
   </div>
   <div actions>
-    <div class="uk-margin-top uk-margin-bottom">
+    <div class="uk-margin-medium-top uk-margin-bottom">
       <ul *ngIf="stakeholder.topics[topicIndex]" #categories transition-group class="uk-tab">
         <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
           <li class="uk-visible-toggle uk-flex" [class.uk-active]="categoryIndex === i" transition-group-item>
diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html
index 73aaf4f..8f67c8f 100644
--- a/src/app/users/users.component.html
+++ b/src/app/users/users.component.html
@@ -5,14 +5,14 @@
 </div>
 <role-users *ngIf="!loading && stakeholder" [id]="stakeholder.alias" [type]="stakeholder.type" [name]="stakeholder.name" [link]="link" [role]="tab" [message]="messages.get(tab)"
             [emailComposer]="emailComposer" [notificationFn]="notificationFn">
-	<div class="uk-flex uk-flex-middle uk-margin-top info">
+	<div class="uk-flex uk-flex-middle uk-margin-medium-top info">
 		<img [src]="stakeholder | logoUrl" class="uk-margin-right uk-blend-multiply">
 		<div>
-			<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">Admin Dashboard - Manage {{users}}</div>
-			<h1 class="uk-h4 uk-margin-remove">{{stakeholder.name}}</h1>
+			<div class="uk-text-background uk-text-bold uk-text-small">Admin Dashboard - Manage Users</div>
+			<h1 class="uk-h6 uk-margin-remove">{{stakeholder.name}}</h1>
 		</div>
 	</div>
-	<ul class="uk-tab">
+	<ul class="uk-tab uk-margin-remove-bottom uk-margin-medium-top">
 		<li [class.uk-active]="tab === 'manager'"><a routerLink="../manager">Managers</a></li>
 		<li [class.uk-active]="tab === 'member'"><a routerLink="../member">Members</a></li>
 	</ul>
diff --git a/src/assets/common-assets b/src/assets/common-assets
index c645362..adf1b6d 160000
--- a/src/assets/common-assets
+++ b/src/assets/common-assets
@@ -1 +1 @@
-Subproject commit c645362896b10ae00563f38337aa0011c640cb20
+Subproject commit adf1b6d5f5e8fb1568615b0fc596a0f39beab3e6
diff --git a/src/assets/monitor-dashboard-custom.less b/src/assets/monitor-dashboard-custom.less
index bef5a29..7ac91eb 100644
--- a/src/assets/monitor-dashboard-custom.less
+++ b/src/assets/monitor-dashboard-custom.less
@@ -32,6 +32,7 @@
   @list-primary-color: @monitor-color;
 
   /* Navbar */
+  @inverse-navbar-background: @monitor-color;
   @inverse-navbar-background-image: url("banner.jpg");
 
   /** Text */
diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme
index ee5eeb0..eb5739a 160000
--- a/src/assets/openaire-theme
+++ b/src/assets/openaire-theme
@@ -1 +1 @@
-Subproject commit ee5eeb0ccc7e8a1b7086730fbce597faa9b25b13
+Subproject commit eb5739ab8271aa71c8e58998ab88c61878f8788d