From db58e5c3e8fb6b76d5faeb5c6d4b0d10b2989a2f Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 14 Feb 2022 18:02:00 +0200
Subject: [PATCH 1/5] Change search page base on new mocks for portal results

---
 .../advancedSearchForm.component.html         |  7 +--
 .../searchUtils/newSearchPage.component.html  | 25 +++++-----
 .../searchUtils/newSearchPage.component.ts    |  2 +-
 .../portal-search-result.component.html       | 46 ++++++++++---------
 .../portal-search-result.component.ts         |  2 +-
 .../portal-search-result.module.ts            | 16 +++----
 utils/breadcrumbs/breadcrumbs.component.ts    |  2 +-
 utils/icons/icons.component.ts                |  2 +-
 8 files changed, 50 insertions(+), 52 deletions(-)

diff --git a/searchPages/searchUtils/advancedSearchForm.component.html b/searchPages/searchUtils/advancedSearchForm.component.html
index c16c60c4..a973591a 100644
--- a/searchPages/searchUtils/advancedSearchForm.component.html
+++ b/searchPages/searchUtils/advancedSearchForm.component.html
@@ -140,11 +140,8 @@
                             (selectionChange)=" simpleEntityChanged($event)"
                             [onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
       </div>
-      <div *ngIf="selectedFields[0]" class="uk-inline">
-        <!--<a *ngIf="selectedFields[0].value.length > 0" class="uk-form-icon uk-form-icon-flip"
-           (click)="selectedFields[0].value = ''"
-           uk-icon="icon: close"></a>-->
-        <a class="uk-form-icon uk-form-icon-flip"
+      <div *ngIf="selectedFields[0]" class="uk-inline uk-link">
+        <a class="uk-form-icon uk-form-icon-flip uk-link-reset"
            (click)="simpleKeywordChanged(null)" type="submit">
           <icon name="search" flex="true"></icon>
         </a>
diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index c99117d5..bea1ce7a 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -4,7 +4,7 @@
     refineFields.indexOf(customFilter.queryFieldName) ==
     -1) ||customFilter.isHiddenFilter)">
         <span class="uk-width-auto">
-          <span class="uk-label uk-flex uk-flex-middle">
+          <span class="filter-tag uk-flex uk-flex-middle">
               <span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
           </span>
         </span>
@@ -14,9 +14,9 @@
         <ng-container *ngIf="type.selected">
           <span class="uk-width-auto">
             <a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disabled">
-              <span class="uk-label uk-flex uk-flex-middle">
+              <span class="filter-tag uk-flex uk-flex-middle">
                   <span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
-                  <icon name="close" ratio="0.5" flex="true"></icon>
+                  <icon name="close" flex="true" ratio="0.7"></icon>
               </span>
             </a>
           </span>
@@ -29,9 +29,9 @@
           <span class="uk-width-auto">
             <a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
                [class.uk-disabled]="disabled">
-              <span class="uk-label uk-flex uk-flex-middle">
+              <span class="filter-taguk-flex uk-flex-middle">
                   <span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
-                  <icon name="close" ratio="0.5" flex="true"></icon>
+                  <icon name="close" flex="true" ratio="0.7"></icon>
               </span>
             </a>
           </span>
@@ -43,9 +43,9 @@
         <ng-container *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; ">
               <span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)" class="uk-width-auto">
                 <a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disabled">
-                  <span class="uk-label uk-flex uk-flex-middle">
+                  <span class="filter-tag uk-flex uk-flex-middle">
                       <span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
-                      <icon name="close" ratio="0.5" flex="true"></icon>
+                      <icon name="close" flex="true" ratio="0.7"></icon>
                   </span>
                 </a>
               </span>
@@ -73,7 +73,7 @@
       <span *ngIf="searchUtils.refineStatus == errorCodes.NONE">No filters available</span>
       <span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
     </div>
-    <ul *ngIf="!showUnknownFilters" class="uk-list uk-list-large">
+    <ul *ngIf="!showUnknownFilters" class="uk-list uk-list-xlarge">
       <li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
         <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
                        [isDisabled]="disabled"
@@ -110,19 +110,18 @@
      [attr.uk-sticky]="(stickyForm?'{animation:false;offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
      (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
     '  uk-position-relative ' :(' uk-section '  ))+'}':null)">
-  <div style="box-sizing: border-box;  "
-       [class]="' uk-background-norepeat  uk-background-bottom-center   uk-padding-remove-bottom  uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
+  <div [class]="' uk-background-norepeat  uk-background-bottom-center   uk-padding-remove-bottom  uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
               + (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') && !dashboard ?
               ' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section' : '')
               +(simpleView?'':' advancedSearchFormBackground ')">
 <!-- TODO - Kostis until here-->
     <div class="uk-width-1-1">
       <div class="uk-container uk-container-large">
-        <div class="uk-padding-small">
+        <div class="uk-padding-small uk-padding-remove-bottom">
           <breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs>
         </div>
       </div>
-      <div class="uk-position-relative uk-margin-medium-bottom">
+      <div class="uk-position-relative">
         <div class="uk-container uk-container-large uk-section" id="searchForm">
           <advanced-search-form
             [entityType]="entityType"
@@ -147,7 +146,7 @@
 </div>
 <schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
                [searchAction]=false [description]="metaDescription" ></schema2jsonld>
-<div id="tm-main" class="   tm-middle" [class.uk-margin-top]="stickyForm">
+<div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
   <div uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
       <div class="uk-container uk-container-large">
diff --git a/searchPages/searchUtils/newSearchPage.component.ts b/searchPages/searchUtils/newSearchPage.component.ts
index e82b7f66..f960c800 100644
--- a/searchPages/searchUtils/newSearchPage.component.ts
+++ b/searchPages/searchUtils/newSearchPage.component.ts
@@ -58,7 +58,7 @@ export class NewSearchPageComponent {
   @Input() customFilter: SearchCustomFilter;
   @Input() sort: boolean = true;
   @Input() sortedByChanged: string = "";
-  @Input() searchFormClass: string = "searchForm";
+  @Input() searchFormClass: string = "uk-background-muted";
   //From simple:
   @Input() rangeFilters: RangeFilter[] = [];
   @Input() rangeFields: string[][] = [];
diff --git a/searchPages/searchUtils/portal-search-result.component.html b/searchPages/searchUtils/portal-search-result.component.html
index bdf7ea2c..c78489a2 100644
--- a/searchPages/searchUtils/portal-search-result.component.html
+++ b/searchPages/searchUtils/portal-search-result.component.html
@@ -8,19 +8,19 @@
           <span>Subscribed</span>
         </div>
         <div *ngIf="type === 'community' && result.status === 'manager'"
-             class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
-          <icon [name]="visibilityIcon.get('RESTRICTED')"></icon>
-          <span class="space uk-text-small uk-text-capitalize">restricted</span>
+             class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
+          <icon [name]="visibilityIcon.get('RESTRICTED')" ratio="1.5" class="uk-display-block"></icon>
+          <span class="uk-text-small uk-text-capitalize">restricted</span>
         </div>
         <div *ngIf="type === 'community' && result.status === 'hidden'"
-             class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
-          <icon [name]="visibilityIcon.get('PRIVATE')"></icon>
-          <span class="space uk-text-small uk-text-capitalize">private</span>
+             class="uk-position-top-right uk-margin-top uk-margin-right  uk-text-center">
+          <icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.5" class="uk-display-block"></icon>
+          <span class="uk-text-small uk-text-capitalize">private</span>
         </div>
         <div *ngIf="result.visibility && result.visibility !== 'PUBLIC'"
-             class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
-          <icon [name]="visibilityIcon.get(result.visibility)"></icon>
-          <span class="space uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
+             class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
+          <icon [name]="visibilityIcon.get(result.visibility)" ratio="1.5" class="uk-display-block"></icon>
+          <span class="uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
         </div>
       </div>
       <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
@@ -64,18 +64,22 @@
               {{result.description}}
             </p>
           </div>
-          <div class="uk-text-small uk-flex uk-flex-middle">
-            <span class="uk-text-muted" *ngIf="result.date || result.creationDate">Creation Date: </span>
-            <span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
-            <span class="uk-margin-small-left" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
-            <span *ngIf="type === 'community' && showType && result.type" class="uk-margin-left">
-              <span class="uk-text-muted">Type:</span>
-              <span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
-            </span>
-            <span *ngIf="type === 'stakeholder' && result.type" class="uk-margin-left">
-              <span class="uk-text-muted">Type:</span>
-              <span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
-            </span>
+          <div class="uk-text-small">
+            <div *ngIf="result.date || result.creationDate" class="uk-flex uk-flex-middle uk-margin-small-bottom">
+              <span class="uk-text-muted">Creation Date: </span>
+              <span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
+              <span class="uk-margin-small-left" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
+            </div>
+            <div class="uk-flex uk-flex-middle">
+              <span *ngIf="type === 'community' && showType && result.type">
+                <span class="uk-text-muted">Type:</span>
+                <span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
+              </span>
+              <span *ngIf="type === 'stakeholder' && result.type">
+                <span class="uk-text-muted">Type:</span>
+                <span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
+              </span>
+            </div>
           </div>
         </div>
       </div>
diff --git a/searchPages/searchUtils/portal-search-result.component.ts b/searchPages/searchUtils/portal-search-result.component.ts
index 96d9ef0c..7d44fd1e 100644
--- a/searchPages/searchUtils/portal-search-result.component.ts
+++ b/searchPages/searchUtils/portal-search-result.component.ts
@@ -22,7 +22,7 @@ export class PortalSearchResultComponent implements OnInit{
   @Input() properties: EnvProperties;
   @ViewChild('AlertModal') modal;
   visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
-    ["PRIVATE", 'lock'],
+    ["PRIVATE", 'visibility_off'],
     ["RESTRICTED", 'group']
   ]);
   public urlParam: string;
diff --git a/searchPages/searchUtils/portal-search-result.module.ts b/searchPages/searchUtils/portal-search-result.module.ts
index f78e95c0..004e7f41 100644
--- a/searchPages/searchUtils/portal-search-result.module.ts
+++ b/searchPages/searchUtils/portal-search-result.module.ts
@@ -1,18 +1,16 @@
-import { NgModule}              from '@angular/core';
-import { CommonModule }         from '@angular/common';
-import { FormsModule }          from '@angular/forms';
-import { RouterModule }         from '@angular/router';
-import {ErrorMessagesModule}    from '../../utils/errorMessages.module';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {ErrorMessagesModule} from '../../utils/errorMessages.module';
 import {PortalSearchResultComponent} from "./portal-search-result.component";
 import {AlertModalModule} from "../../utils/modal/alertModal.module";
 import {ManageModule} from "../../utils/manage/manage.module";
 import {IconsModule} from "../../utils/icons/icons.module";
 import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module";
 import {IconsService} from "../../utils/icons/icons.service";
-import {group, lock} from "../../utils/icons/icons";
+import {lock} from "../../utils/icons/icons";
 import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
-// import {IconsService} from "../../utils/icons/icons.service";
-// import {group, lock} from "../../utils/icons/icons";
 
 @NgModule({
   imports: [
@@ -31,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
 })
 export class PortalSearchResultModule {
   constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([group, lock])
+    this.iconsService.registerIcons([lock])
   }
 }
diff --git a/utils/breadcrumbs/breadcrumbs.component.ts b/utils/breadcrumbs/breadcrumbs.component.ts
index 1fe16bbc..ad3bcd43 100644
--- a/utils/breadcrumbs/breadcrumbs.component.ts
+++ b/utils/breadcrumbs/breadcrumbs.component.ts
@@ -8,7 +8,7 @@ export interface Breadcrumb {
 @Component({
   selector: 'breadcrumbs',
   template: `
-    <ul class="uk-breadcrumb" [ngClass]="addClass" [class.uk-light]="light">
+    <ul class="uk-breadcrumb uk-margin-remove-bottom" [ngClass]="addClass" [class.uk-light]="light">
       <li *ngFor="let breadcrumb of breadcrumbs">
         <a class="uk-text-capitalize" *ngIf="breadcrumb.route" [routerLink]="breadcrumb.route">{{breadcrumb.name}}</a>
         <span class="uk-text-capitalize" *ngIf="!breadcrumb.route">{{breadcrumb.name}}</span>
diff --git a/utils/icons/icons.component.ts b/utils/icons/icons.component.ts
index 98956135..9568766f 100644
--- a/utils/icons/icons.component.ts
+++ b/utils/icons/icons.component.ts
@@ -22,7 +22,7 @@ import {IconsService} from "./icons.service";
   selector: 'icon',
   template: `
     <span #icon *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
-    <span  [class.uk-flex]="flex" [ngClass]="customClass">
+    <span  [class.uk-flex]="flex" [ngClass]="customClass" [class.uk-display-inline-block]="!flex">
       <span *ngIf="!svg && iconName" class="material-icons" [ngClass]="type" [ngStyle]="style">{{iconName}}</span>
     </span>
     <span *ngIf="visuallyHidden" class="visually-hidden">{{visuallyHidden}}</span>

From f0086e479767a7be989494d63a372dc2e6a7ef53 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Tue, 15 Feb 2022 14:49:33 +0200
Subject: [PATCH 2/5] remove uk-text-muted from how component

---
 monitor/how/how.component.ts | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/monitor/how/how.component.ts b/monitor/how/how.component.ts
index 1c8e44d8..174044e5 100644
--- a/monitor/how/how.component.ts
+++ b/monitor/how/how.component.ts
@@ -3,22 +3,22 @@ import {Component} from "@angular/core";
 @Component({
   selector: 'how',
   template: `
-    <div class="how uk-h6">
+    <div class="how">
       <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-3@s first uk-text-muted">
+        <div class="uk-width-1-3@s first">
           <div>
             <img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
           </div>
           <div class="uk-text-center">
-            <span class="uk-text-bold uk-text-uppercase">Starting</span> from existing<br>research-related data sources
+            <span class="uk-text-uppercase uk-text-bold">Starting</span> from existing<br>research-related data sources
           </div>
         </div>
-        <div class="uk-width-1-3@s second uk-text-muted">
+        <div class="uk-width-1-3@s second">
           <div>
             <img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy">
           </div>
         </div>
-        <div class="uk-width-1-3@s third uk-text-muted">
+        <div class="uk-width-1-3@s third">
           <div>
             <img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
           </div>
@@ -28,37 +28,37 @@ import {Component} from "@angular/core";
         </div>
       </div>
       <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-3@s fourth uk-flex-last@s uk-text-muted">
+        <div class="uk-width-1-3@s fourth uk-flex-last@s">
           <div>
             <img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy">
           </div>
           <div class="uk-text-center">
-            we perform <span class="uk-text-bold uk-text-uppercase">Statistical Analysis</span> and produce
-            <span class="portal-color">Open Science Indicators</span>
+            we perform <span class="uk-text-uppercase uk-text-bold">Statistical <br> Analysis</span> and produce <br>
+            <span class="uk-text-primary">Open Science Indicators</span>
           </div>
         </div>
-        <div class="uk-width-1-3@s fifth uk-text-muted">
+        <div class="uk-width-1-3@s fifth">
           <div>
             <img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy">
           </div>
           <div class="uk-text-center">
-            furthermore <span class="uk-text-bold uk-text-uppercase">Network<br>Analysis</span> producing
-            <span class="portal-color">Collaboration Indicators</span>
+            furthermore <span class="uk-text-uppercase uk-text-bold">Network<br>Analysis</span> producing <br>
+            <span class="uk-text-primary">Collaboration Indicators</span>
           </div>
         </div>
-        <div class="uk-width-1-3@s sixth uk-flex-first@s uk-text-muted">
+        <div class="uk-width-1-3@s sixth uk-flex-first@s">
           <div>
             <img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy">
           </div>
           <div class="uk-text-center">
-            Often combine with external data
+            Often combine with external data <br>
             (patents, social, company) and
-            perform <span class="uk-text-bold uk-text-uppercase">Impact Analysis</span> to
-            produce <span class="portal-color">Innovation Indicators</span>
+            perform <br><span class="uk-text-uppercase uk-text-bold">Impact Analysis</span> to
+            produce <br><span class="uk-text-primary">Innovation Indicators</span>
           </div>
         </div>
       </div>
-      <div class="final uk-text-muted">
+      <div class="final">
         <div>
           <img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy">
         </div>

From 4e49e7f4895797731cc82a039987db0b0448f5b0 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 15 Feb 2022 16:25:46 +0200
Subject: [PATCH 3/5] Add new text-as-svg pipe. Add gradient fucntionallity on
 icons

---
 .../searchUtils/newSearchPage.component.html  |  2 +-
 .../portal-search-result.component.html       | 42 ++++++------
 .../portal-search-result.module.ts            |  4 +-
 utils/icons/icons.component.ts                | 64 +++++++++++++++++--
 utils/pipes/text-as-svg.module.ts             |  8 +++
 utils/pipes/text-as-svg.pipe.ts               | 11 ++++
 6 files changed, 102 insertions(+), 29 deletions(-)
 create mode 100644 utils/pipes/text-as-svg.module.ts
 create mode 100644 utils/pipes/text-as-svg.pipe.ts

diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index bea1ce7a..22e3360c 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -308,7 +308,7 @@
                     [results]="results"
                     [status]="searchUtils.status"
                     [type]="entityType"
-                    [showType]="false"
+                    [showType]="entityType == 'stakeholder'"
                     [showLoading]="true" [properties]=properties>
                 </portal-search-result>
               </div>
diff --git a/searchPages/searchUtils/portal-search-result.component.html b/searchPages/searchUtils/portal-search-result.component.html
index c78489a2..0b4f9297 100644
--- a/searchPages/searchUtils/portal-search-result.component.html
+++ b/searchPages/searchUtils/portal-search-result.component.html
@@ -1,7 +1,10 @@
-<ul class="uk-list uk-list-large" [class]="'uk-list uk-margin ' + custom_class" uk-height-match="target: .uk-card-default; row: false">
+<ul class="uk-list uk-list-large" [class]="'uk-list uk-margin ' + custom_class"
+    uk-height-match="target: .uk-card-default; row: false">
   <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
   <li *ngFor="let result of results" class="uk-animation-fade">
-    <div class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center" [class.uk-disabled]="!hasPermission(result)">
+    <div
+        class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center"
+        [class.uk-disabled]="!hasPermission(result)">
       <div>
         <div *ngIf="type === 'community' && result.isSubscribed"
              class="uk-alert-primary uk-padding-small uk-position-top-left uk-text-center">
@@ -24,7 +27,8 @@
         </div>
       </div>
       <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
-        <a *ngIf="directLink && hasPermission(result)" [href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)"
+        <a *ngIf="directLink && hasPermission(result)"
+           [href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)"
            target="_blank" class="uk-width-1-5@s">
           <ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
         </a>
@@ -38,21 +42,25 @@
         </div>
         <div class="uk-width-expand">
           <div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-margin-bottom">
-            <a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" class="uk-h5 uk-link-heading" target="_blank">
+            <a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)"
+               class="uk-h5 uk-link-heading" target="_blank">
               {{(result.title) ? result.title : result.shortTitle}}
             </a>
-            <a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-heading">
+            <a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)"
+               class="uk-h5 uk-link-heading">
               {{(result.title) ? result.title : result.shortTitle}}
             </a>
-						<h5 *ngIf="!hasPermission(result)">
+            <h5 *ngIf="!hasPermission(result)">
               {{(result.title) ? result.title : result.shortTitle}}
             </h5>
           </div>
           <div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-margin-bottom">
-            <a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" class="uk-h5 uk-link-heading" target="_blank">
+            <a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)"
+               class="uk-h5 uk-link-heading" target="_blank">
               {{(result.name) ? result.name : result.index_shortName}}
             </a>
-            <a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-heading">
+            <a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)"
+               class="uk-h5 uk-link-heading">
               {{(result.name) ? result.name : result.index_shortName}}
             </a>
             <h5 *ngIf="!hasPermission(result)">
@@ -68,17 +76,12 @@
             <div *ngIf="result.date || result.creationDate" class="uk-flex uk-flex-middle uk-margin-small-bottom">
               <span class="uk-text-muted">Creation Date: </span>
               <span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
-              <span class="uk-margin-small-left" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
+              <span class="uk-margin-small-left"
+                    *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
             </div>
-            <div class="uk-flex uk-flex-middle">
-              <span *ngIf="type === 'community' && showType && result.type">
-                <span class="uk-text-muted">Type:</span>
-                <span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
-              </span>
-              <span *ngIf="type === 'stakeholder' && result.type">
-                <span class="uk-text-muted">Type:</span>
-                <span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
-              </span>
+            <div *ngIf="showType && result.type" class="uk-flex uk-flex-middle">
+              <span class="uk-text-muted">Type:</span>
+              <span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
             </div>
           </div>
         </div>
@@ -96,6 +99,7 @@
 </modal-alert>
 <ng-template #resultPreview let-result="result">
   <div class="uk-flex uk-flex-center">
-    <img *ngIf="result.logoUrl" [src]="result | logoUrl" [alt]="((result.title)?result.title:result.shortTitle) + ' logo'" loading="lazy">
+    <img *ngIf="result.logoUrl" [src]="result | logoUrl"
+         [alt]="((result.title)?result.title:result.shortTitle) + ' logo'" loading="lazy">
   </div>
 </ng-template>
diff --git a/searchPages/searchUtils/portal-search-result.module.ts b/searchPages/searchUtils/portal-search-result.module.ts
index 004e7f41..e2bcf485 100644
--- a/searchPages/searchUtils/portal-search-result.module.ts
+++ b/searchPages/searchUtils/portal-search-result.module.ts
@@ -9,7 +9,7 @@ import {ManageModule} from "../../utils/manage/manage.module";
 import {IconsModule} from "../../utils/icons/icons.module";
 import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module";
 import {IconsService} from "../../utils/icons/icons.service";
-import {lock} from "../../utils/icons/icons";
+import {group, lock} from "../../utils/icons/icons";
 import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
 
 @NgModule({
@@ -29,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
 })
 export class PortalSearchResultModule {
   constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([lock])
+    this.iconsService.registerIcons([group, lock])
   }
 }
diff --git a/utils/icons/icons.component.ts b/utils/icons/icons.component.ts
index 9568766f..f25265d8 100644
--- a/utils/icons/icons.component.ts
+++ b/utils/icons/icons.component.ts
@@ -1,6 +1,11 @@
 import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild} from "@angular/core";
 import {IconsService} from "./icons.service";
 
+export interface StopRule {
+  class: string,
+  offset: number
+}
+
 /**
  * By default this component uses Material Icons Library to render an icon with
  * a specific @name. For custom icons you should:
@@ -21,7 +26,7 @@ import {IconsService} from "./icons.service";
 @Component({
   selector: 'icon',
   template: `
-    <span #icon *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
+    <span #icon *ngIf="svg" class="uk-icon" [class.uk-preserve]="gradient" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
     <span  [class.uk-flex]="flex" [ngClass]="customClass" [class.uk-display-inline-block]="!flex">
       <span *ngIf="!svg && iconName" class="material-icons" [ngClass]="type" [ngStyle]="style">{{iconName}}</span>
     </span>
@@ -78,10 +83,22 @@ export class IconsComponent implements AfterViewInit {
     this.svg = this.iconsService.getIcon(iconName);
   }
   /**
-   *
+   * Set visually hidden name for accessibility
    * */
   @Input()
   public visuallyHidden: string = null;
+  /**
+   *  Gradient rules
+   *  Available only for SVG!
+   *
+   * Set your css rules for stop-colors
+   * */
+  @Input()
+  public gradient: string = null;
+  @Input()
+  public degrees: number = 0;
+  @Input()
+  public stopRules: StopRule[]= [{class: 'start', offset: 0}, {class: 'end', offset: 100}];
   @ViewChild("icon")
   public icon: ElementRef;
   
@@ -90,13 +107,17 @@ export class IconsComponent implements AfterViewInit {
   
   ngAfterViewInit() {
     if(this.svg) {
-      let svg = this.icon.nativeElement.getElementsByTagName('svg').item(0);
+      let svg: Element = this.icon.nativeElement.getElementsByTagName('svg').item(0);
       svg.setAttribute("width", (this.ratio*IconsComponent.DEFAULT_ICON_SIZE).toString());
       svg.setAttribute("height", (this.ratio*IconsComponent.DEFAULT_ICON_SIZE).toString());
-      this.style = {
-        fill: this.fill,
-        stroke: this.stroke
-      };
+      if(this.gradient) {
+        this.addGradient(svg);
+      } else {
+        this.style = {
+          fill: this.fill,
+          stroke: this.stroke
+        };
+      }
     } else {
       this.style = {
         "font-size.px": this.ratio*IconsComponent.DEFAULT_ICON_SIZE
@@ -104,4 +125,33 @@ export class IconsComponent implements AfterViewInit {
     }
     this.cdr.detectChanges();
   }
+  
+  addGradient(svg: Element) {
+    if(svg.children.length > 0) {
+      let gradientDefinition = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
+      gradientDefinition.setAttribute('id', this.gradient);
+      if(this.degrees !== 0) {
+        let angle = (this.degrees) * (Math.PI / 180);
+        gradientDefinition.setAttribute('x1', Math.round(50 + Math.sin(angle) * 50) + '%');
+        gradientDefinition.setAttribute('y1', Math.round(50 + Math.cos(angle) * 50) + '%');
+        gradientDefinition.setAttribute('x2', Math.round(50 + Math.sin(angle + Math.PI) * 50) + '%');
+        gradientDefinition.setAttribute('y2', Math.round(50 + Math.cos(angle + Math.PI) * 50) + '%');
+      }
+      for(let rule of this.stopRules) {
+        let item = document.createElementNS('http://www.w3.org/2000/svg','stop');
+        item.setAttribute('class', rule.class);
+        item.setAttribute('offset', rule.offset + '%');
+        gradientDefinition.appendChild(item);
+      }
+      let defs = document.createElementNS('http://www.w3.org/2000/svg','defs');
+      defs.appendChild(gradientDefinition);
+      for(let  i = 0; i < svg.children.length; i++) {
+        let item = svg.children.item(i);
+        if(!item.hasAttribute('fill')) {
+          item.setAttribute('fill', "url('#" + this.gradient + "')");
+        }
+      }
+      svg.insertBefore(defs, svg.childNodes[0]);
+    }
+  }
 }
diff --git a/utils/pipes/text-as-svg.module.ts b/utils/pipes/text-as-svg.module.ts
new file mode 100644
index 00000000..625e97a1
--- /dev/null
+++ b/utils/pipes/text-as-svg.module.ts
@@ -0,0 +1,8 @@
+import {NgModule} from "@angular/core";
+import {TextAsSvgPipe} from "./text-as-svg.pipe";
+
+@NgModule({
+  declarations: [TextAsSvgPipe],
+  exports: [TextAsSvgPipe]
+})
+export class TextAsSvgModule {}
diff --git a/utils/pipes/text-as-svg.pipe.ts b/utils/pipes/text-as-svg.pipe.ts
new file mode 100644
index 00000000..707317ad
--- /dev/null
+++ b/utils/pipes/text-as-svg.pipe.ts
@@ -0,0 +1,11 @@
+import {Pipe, PipeTransform} from "@angular/core";
+import {DomSanitizer, SafeUrl} from "@angular/platform-browser";
+import {StringUtils} from "../string-utils.class";
+
+@Pipe({name: 'textAsSvg'})
+export class TextAsSvgPipe implements PipeTransform  {
+  
+  transform(value: string): string {
+    return '<svg height="20" viewBox="0 0 ' + value.length*20 + ' 20" width="80" xmlns="http://www.w3.org/2000/svg"><text x="50%" y="85%" text-anchor="middle" dy=".4m" class="uk-text-bold" font-size="20">' + value + '</text></svg>';
+  }
+}

From 4e9981f24f2f9bc7ac0f49897e987a26528b82f8 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 16 Feb 2022 12:01:41 +0200
Subject: [PATCH 4/5] Add default size usage in icons. Some changes in portal
 search results. Delete text-as-svg (no need)

---
 .../portal-search-result.component.html       | 17 +++++-----
 .../portal-search-result.module.ts            |  2 +-
 utils/HelperFunctions.class.ts                |  7 ++--
 utils/icons/icons.component.ts                | 33 ++++++++++++++-----
 utils/pipes/text-as-svg.module.ts             |  8 -----
 utils/pipes/text-as-svg.pipe.ts               | 11 -------
 .../section-scroll.component.ts               |  6 ++--
 7 files changed, 39 insertions(+), 45 deletions(-)
 delete mode 100644 utils/pipes/text-as-svg.module.ts
 delete mode 100644 utils/pipes/text-as-svg.pipe.ts

diff --git a/searchPages/searchUtils/portal-search-result.component.html b/searchPages/searchUtils/portal-search-result.component.html
index 0b4f9297..42e99bc3 100644
--- a/searchPages/searchUtils/portal-search-result.component.html
+++ b/searchPages/searchUtils/portal-search-result.component.html
@@ -1,9 +1,8 @@
-<ul class="uk-list uk-list-large" [class]="'uk-list uk-margin ' + custom_class"
+<ul class="uk-list uk-list-xlarge" [class]="'uk-list uk-margin ' + custom_class"
     uk-height-match="target: .uk-card-default; row: false">
   <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
   <li *ngFor="let result of results" class="uk-animation-fade">
-    <div
-        class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center"
+    <div class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center"
         [class.uk-disabled]="!hasPermission(result)">
       <div>
         <div *ngIf="type === 'community' && result.isSubscribed"
@@ -11,18 +10,18 @@
           <span>Subscribed</span>
         </div>
         <div *ngIf="type === 'community' && result.status === 'manager'"
-             class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
-          <icon [name]="visibilityIcon.get('RESTRICTED')" ratio="1.5" class="uk-display-block"></icon>
+             class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
+          <icon [name]="visibilityIcon.get('RESTRICTED')" ratio="1.5" [flex]="true"></icon>
           <span class="uk-text-small uk-text-capitalize">restricted</span>
         </div>
         <div *ngIf="type === 'community' && result.status === 'hidden'"
-             class="uk-position-top-right uk-margin-top uk-margin-right  uk-text-center">
-          <icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.5" class="uk-display-block"></icon>
+             class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
+          <icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.5" [flex]="true"></icon>
           <span class="uk-text-small uk-text-capitalize">private</span>
         </div>
         <div *ngIf="result.visibility && result.visibility !== 'PUBLIC'"
-             class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
-          <icon [name]="visibilityIcon.get(result.visibility)" ratio="1.5" class="uk-display-block"></icon>
+             class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-column uk-flex-middle">
+          <icon [name]="visibilityIcon.get(result.visibility)" ratio="1.5" [flex]="true"></icon>
           <span class="uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
         </div>
       </div>
diff --git a/searchPages/searchUtils/portal-search-result.module.ts b/searchPages/searchUtils/portal-search-result.module.ts
index e2bcf485..5fe4c508 100644
--- a/searchPages/searchUtils/portal-search-result.module.ts
+++ b/searchPages/searchUtils/portal-search-result.module.ts
@@ -29,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
 })
 export class PortalSearchResultModule {
   constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([group, lock])
+    this.iconsService.registerIcons([lock])
   }
 }
diff --git a/utils/HelperFunctions.class.ts b/utils/HelperFunctions.class.ts
index fc2c1cb2..f7434446 100644
--- a/utils/HelperFunctions.class.ts
+++ b/utils/HelperFunctions.class.ts
@@ -11,13 +11,10 @@ export class HelperFunctions {
 
   public static scrollToId(elementId:string) {
     if (typeof document !== 'undefined' && document.getElementById(elementId)) {
-      document.getElementById(elementId).scrollIntoView();
+      document.getElementById(elementId).scrollIntoView({behavior: "smooth"});
     }
   }
-  public static isTiny(url: string) {
-    return (url.indexOf('tinyurl.com') !== -1);
-  }
-
+  
   public static copy(obj: any): any {
     let copy;
 
diff --git a/utils/icons/icons.component.ts b/utils/icons/icons.component.ts
index f25265d8..7ff57455 100644
--- a/utils/icons/icons.component.ts
+++ b/utils/icons/icons.component.ts
@@ -22,6 +22,17 @@ export interface StopRule {
  *
  *  - Custom SVG Icon. Define a variable in your component with an SVG and give it as Input @svg.
  *
+ *  In case of SVGs, there is an opportunity to add gradient color by define at least a start and end stop-color rules
+ *  and an id to support them. This option is enabled by giving id as input in @gradient (Optional @degrees for gradient direction)
+ *
+ *  e.g #gradient .start {
+ *    stop-color: red;
+ *  }
+ *
+ *  e.g #gradient .end {
+ *    stop-color: orange;
+ *  }
+ *
  * */
 @Component({
   selector: 'icon',
@@ -42,6 +53,8 @@ export class IconsComponent implements AfterViewInit {
    */
   @Input()
   public svg;
+  @Input()
+  public defaultSize = false;
   /**
    * True if this icon should have display flex (Optional, Default: false)
    *
@@ -66,6 +79,8 @@ export class IconsComponent implements AfterViewInit {
   public stroke;
   /**
    * Size of icon (Default: 1)
+   *
+   * Disabled if defaultSize = true
    * */
   @Input()
   public ratio = 1;
@@ -91,7 +106,7 @@ export class IconsComponent implements AfterViewInit {
    *  Gradient rules
    *  Available only for SVG!
    *
-   * Set your css rules for stop-colors
+   * Define your css rules for stop-colors
    * */
   @Input()
   public gradient: string = null;
@@ -108,8 +123,10 @@ export class IconsComponent implements AfterViewInit {
   ngAfterViewInit() {
     if(this.svg) {
       let svg: Element = this.icon.nativeElement.getElementsByTagName('svg').item(0);
-      svg.setAttribute("width", (this.ratio*IconsComponent.DEFAULT_ICON_SIZE).toString());
-      svg.setAttribute("height", (this.ratio*IconsComponent.DEFAULT_ICON_SIZE).toString());
+      if(!this.defaultSize) {
+        svg.setAttribute("width", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
+        svg.setAttribute("height", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
+      }
       if(this.gradient) {
         this.addGradient(svg);
       } else {
@@ -127,15 +144,15 @@ export class IconsComponent implements AfterViewInit {
   }
   
   addGradient(svg: Element) {
-    if(svg.children.length > 0) {
+    if(svg.children.length > 0 && typeof document !== "undefined") {
       let gradientDefinition = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
       gradientDefinition.setAttribute('id', this.gradient);
       if(this.degrees !== 0) {
         let angle = (this.degrees) * (Math.PI / 180);
-        gradientDefinition.setAttribute('x1', Math.round(50 + Math.sin(angle) * 50) + '%');
-        gradientDefinition.setAttribute('y1', Math.round(50 + Math.cos(angle) * 50) + '%');
-        gradientDefinition.setAttribute('x2', Math.round(50 + Math.sin(angle + Math.PI) * 50) + '%');
-        gradientDefinition.setAttribute('y2', Math.round(50 + Math.cos(angle + Math.PI) * 50) + '%');
+        gradientDefinition.setAttribute('x1', Math.round(50 + Math.sin(angle + Math.PI) * 50) + '%');
+        gradientDefinition.setAttribute('y1', Math.round(50 + Math.cos(angle + Math.PI) * 50) + '%');
+        gradientDefinition.setAttribute('x2', Math.round(50 + Math.sin(angle) * 50) + '%');
+        gradientDefinition.setAttribute('y2', Math.round(50 + Math.cos(angle) * 50) + '%');
       }
       for(let rule of this.stopRules) {
         let item = document.createElementNS('http://www.w3.org/2000/svg','stop');
diff --git a/utils/pipes/text-as-svg.module.ts b/utils/pipes/text-as-svg.module.ts
deleted file mode 100644
index 625e97a1..00000000
--- a/utils/pipes/text-as-svg.module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {NgModule} from "@angular/core";
-import {TextAsSvgPipe} from "./text-as-svg.pipe";
-
-@NgModule({
-  declarations: [TextAsSvgPipe],
-  exports: [TextAsSvgPipe]
-})
-export class TextAsSvgModule {}
diff --git a/utils/pipes/text-as-svg.pipe.ts b/utils/pipes/text-as-svg.pipe.ts
deleted file mode 100644
index 707317ad..00000000
--- a/utils/pipes/text-as-svg.pipe.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Pipe, PipeTransform} from "@angular/core";
-import {DomSanitizer, SafeUrl} from "@angular/platform-browser";
-import {StringUtils} from "../string-utils.class";
-
-@Pipe({name: 'textAsSvg'})
-export class TextAsSvgPipe implements PipeTransform  {
-  
-  transform(value: string): string {
-    return '<svg height="20" viewBox="0 0 ' + value.length*20 + ' 20" width="80" xmlns="http://www.w3.org/2000/svg"><text x="50%" y="85%" text-anchor="middle" dy=".4m" class="uk-text-bold" font-size="20">' + value + '</text></svg>';
-  }
-}
diff --git a/utils/section-scroll/section-scroll.component.ts b/utils/section-scroll/section-scroll.component.ts
index ddfcbc26..64d40d9a 100644
--- a/utils/section-scroll/section-scroll.component.ts
+++ b/utils/section-scroll/section-scroll.component.ts
@@ -13,10 +13,10 @@ import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angula
 @Component({
   selector: 'section-scroll',
   template: `
-    <div class="section" [ngClass]="customClass">
+    <div [ngClass]="customClass">
       <ng-content select="[top]"></ng-content>
-      <div class="content"  [ngClass]="childrenCustomClass">
-        <div class="uk-grid">
+      <div [ngClass]="childrenCustomClass">
+        <div class="uk-grid" uk-grid>
           <ng-content select="[left]"></ng-content>
           <ng-content select="[scroll]"></ng-content>
         </div>

From cf6ab4a03b4aea7a5c14f6c086e531642f5f1a27 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 16 Feb 2022 18:18:12 +0200
Subject: [PATCH 5/5] Fix filter on disable bug. Add new private icon in
 portal-search-results. Add method to convert a stakeholder into
 StakeholderInfo

---
 monitor/entities/stakeholder.ts                          | 9 +++++++++
 monitor/services/stakeholder.service.ts                  | 2 +-
 searchPages/searchUtils/newSearchPage.component.html     | 6 +++---
 .../searchUtils/portal-search-result.component.ts        | 4 ++--
 searchPages/searchUtils/portal-search-result.module.ts   | 4 ++--
 searchPages/searchUtils/searchFilter.component.html      | 2 +-
 utils/icons/icons.ts                                     | 5 +++++
 7 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/monitor/entities/stakeholder.ts b/monitor/entities/stakeholder.ts
index 60a52bdb..ccc2b812 100644
--- a/monitor/entities/stakeholder.ts
+++ b/monitor/entities/stakeholder.ts
@@ -1,5 +1,6 @@
 import {SafeResourceUrl} from "@angular/platform-browser";
 import {properties} from "../../../../environments/environment";
+import {Session, User} from "../../login/utils/helper.class";
 
 export const ChartHelper = {
   prefix: "((__",
@@ -49,6 +50,14 @@ export class Stakeholder {
 export class StakeholderInfo extends Stakeholder {
   isManager: boolean = false;
   isMember: boolean = false;
+  
+  public static toStakeholderInfo(stakeholders: (Stakeholder & StakeholderInfo)[], user: User): StakeholderInfo[] {
+    return stakeholders.map(stakeholder => {
+      stakeholder.isManager = Session.isPortalAdministrator(user) || Session.isMonitorCurator(user) || Session.isManager(stakeholder.type, stakeholder.alias, user);
+      stakeholder.isMember = Session.isMember(stakeholder.type, stakeholder.alias, user);
+      return stakeholder;
+    })
+  }
 }
 
 export class Topic {
diff --git a/monitor/services/stakeholder.service.ts b/monitor/services/stakeholder.service.ts
index f8cfc260..4cd082ff 100644
--- a/monitor/services/stakeholder.service.ts
+++ b/monitor/services/stakeholder.service.ts
@@ -79,7 +79,7 @@ export class StakeholderService {
     }));
   }
   
-  getMyStakeholders(url: string, type: string = null): Observable<Stakeholder[]> {
+  getMyStakeholders(url: string, type: string = null): Observable<(Stakeholder & StakeholderInfo)[]> {
     return this.http.get<Stakeholder[]>(url + '/my-stakeholder' + ((type) ? ('?type=' + type) : ''), CustomOptions.registryOptions()).pipe(map(stakeholders => {
       return this.formalize(this.checkIsUpload(stakeholders));
     }));
diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index 22e3360c..6413b4c3 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -29,7 +29,7 @@
           <span class="uk-width-auto">
             <a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
                [class.uk-disabled]="disabled">
-              <span class="filter-taguk-flex uk-flex-middle">
+              <span class="filter-tag uk-flex uk-flex-middle">
                   <span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
                   <icon name="close" flex="true" ratio="0.7"></icon>
               </span>
@@ -234,7 +234,7 @@
                     target="_blank"> OpenAIRE - Explore</a>.
               </div>
               <!-- Total results, number of pages -->
-              <h5 class="uk-margin-bottom">
+              <h6 class="uk-margin-bottom">
                 <ng-container *ngIf="results && searchUtils.totalResults > 0">
                   <span>{{searchUtils.totalResults|number}}</span>
                   <span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
@@ -247,7 +247,7 @@
                   <span>{{searchUtils.page | number}}</span>
                   <span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
                 </ng-container>
-              </h5>
+              </h6>
               <!-- TODO Download results position-->
               <div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
                 <search-download
diff --git a/searchPages/searchUtils/portal-search-result.component.ts b/searchPages/searchUtils/portal-search-result.component.ts
index 7d44fd1e..e6993534 100644
--- a/searchPages/searchUtils/portal-search-result.component.ts
+++ b/searchPages/searchUtils/portal-search-result.component.ts
@@ -22,7 +22,7 @@ export class PortalSearchResultComponent implements OnInit{
   @Input() properties: EnvProperties;
   @ViewChild('AlertModal') modal;
   visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
-    ["PRIVATE", 'visibility_off'],
+    ["PRIVATE", 'incognito'],
     ["RESTRICTED", 'group']
   ]);
   public urlParam: string;
@@ -64,7 +64,7 @@ export class PortalSearchResultComponent implements OnInit{
       return result.status === "all" || (result.status === "manager" && result.isManager);
     } else if(this.type === "stakeholder") {
       return result.visibility === "PUBLIC" || (result.visibility === "RESTRICTED" && (result.isManager || result.isMember)) ||
-        (result.visibility === "PRIVATE" || result.isManager);
+        (result.visibility === "PRIVATE" && result.isManager);
     }
   }
   
diff --git a/searchPages/searchUtils/portal-search-result.module.ts b/searchPages/searchUtils/portal-search-result.module.ts
index 5fe4c508..05cc15c2 100644
--- a/searchPages/searchUtils/portal-search-result.module.ts
+++ b/searchPages/searchUtils/portal-search-result.module.ts
@@ -9,7 +9,7 @@ import {ManageModule} from "../../utils/manage/manage.module";
 import {IconsModule} from "../../utils/icons/icons.module";
 import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module";
 import {IconsService} from "../../utils/icons/icons.service";
-import {group, lock} from "../../utils/icons/icons";
+import {incognito} from "../../utils/icons/icons";
 import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
 
 @NgModule({
@@ -29,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
 })
 export class PortalSearchResultModule {
   constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([lock])
+    this.iconsService.registerIcons([incognito])
   }
 }
diff --git a/searchPages/searchUtils/searchFilter.component.html b/searchPages/searchUtils/searchFilter.component.html
index 73b3f769..b9ff8773 100644
--- a/searchPages/searchUtils/searchFilter.component.html
+++ b/searchPages/searchUtils/searchFilter.component.html
@@ -86,7 +86,7 @@
 </ng-template>
 <ng-template #input_label_wrapper let-filter="filter" let-value="value">
   <a *ngIf="actionRoute" [routerLink]="getRoute()"
-     [queryParams]="getParams(filter,value)" class="uk-link-muted"
+     [queryParams]="getParams(filter,value)" class="uk-link-muted uk-display-inline-block"
      [class.uk-disabled]="disabled(value.number)" [class.uk-link-text]="!disabled(value.number)">
     <ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
   </a>
diff --git a/utils/icons/icons.ts b/utils/icons/icons.ts
index 617b0d80..68b434fa 100644
--- a/utils/icons/icons.ts
+++ b/utils/icons/icons.ts
@@ -148,3 +148,8 @@ export const print = {
 }
 
 /** Add new icon under this line to be sure that it will be added on preview */
+
+export const incognito = {
+  name: 'incognito',
+  data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24.51 19.525"><g id="Group_13376" data-name="Group 13376" transform="translate(-428.81 -3863.018)"><path id="Path_104500" data-name="Path 104500" d="M44.68,105.185H43.024a23.507,23.507,0,0,0-9.194-.158V106a3.909,3.909,0,0,1,1.264,1.668c.455,1.119.2,3.05,4.148,3.289s4-4.041,4.034-4.438.577-.372.577-.372.541-.021.579.372.09,4.673,4.034,4.438,3.693-2.17,4.146-3.289A3.9,3.9,0,0,1,53.879,106v-.969A23.686,23.686,0,0,0,44.68,105.185Z" transform="translate(397.218 3771.582)" fill="#2c2c2c"/><path id="Path_104501" data-name="Path 104501" d="M41.867,35.784H40.326s-1.95-6.217-2.207-6.735a2.8,2.8,0,0,0-2.591-2.061c-1.92-.266-2.138,1.225-3.544,1.268-1.406-.049-1.617-1.546-3.542-1.268a2.817,2.817,0,0,0-2.592,2.061c-.246.518-2.205,6.735-2.205,6.735H22.1a2.31,2.31,0,0,0-2.371,2.245H44.24A2.311,2.311,0,0,0,41.867,35.784Z" transform="translate(409.08 3836.064)" fill="#2c2c2c"/></g></svg>'
+}