Add searchForm with light background in all search pages. Add uk-nav in topics list in indicatos pages. Fix some links that should not be undelines in hover

src/app/develop/develop.component.ts

@@ -25,7 +25,7 @@ import {StakeholderUtils} from "../utils/indicator-utils";
 							<div class="uk-margin-bottom">
 								For research outcomes (publications, datasets, software and other research data) you can use the Selective Access APIs by adding the funder parameter.
 							</div>
-							<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
+							<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
 									href="https://graph.openaire.eu/develop/api.html" target="_blank">
 								<span class="uk-flex uk-flex-middle">
 									<span>Selective Access APIs</span>
@@ -43,14 +43,14 @@ import {StakeholderUtils} from "../utils/indicator-utils";
 							<div class="uk-margin-bottom">
 								For projects you can use the Selective Access APIs and the Bulk Access APIs.
 							</div>
-							<div class="uk-flex uk-flex-column uk-flex-center uk-flex-middle">\
+							<div class="uk-flex uk-flex-column uk-flex-center uk-flex-middle">
-								<a class="uk-display-inline-block uk-text-uppercase uk-button-text uk-margin-bottom"
+								<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-bottom"
 									href="https://graph.openaire.eu/develop/api.html" target="_blank">
 									<span class="uk-flex uk-flex-middle">
 										<span>Selective Access APIs</span>
 									</span>
 								</a>
-								<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
+								<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
 									href="https://graph.openaire.eu/develop/bulk-projects.html" target="_blank">
 									<span class="uk-flex uk-flex-middle">
 										<span>Bulk Access APIs</span>

src/app/manageStakeholders/manageStakeholders.component.html

@@ -90,7 +90,7 @@
           </ul>
         </div>
       </div>
-      <a class="uk-display-block uk-text-center" [routerLink]="'/admin/' + stakeholder.alias">
+      <a class="uk-display-block uk-text-center uk-link-reset" [routerLink]="'/admin/' + stakeholder.alias">
         <div class="titleContainer uk-h6 uk-margin-remove-bottom uk-margin-top multi-line-ellipsis lines-2">
 					<p *ngIf="stakeholder.name" class="uk-margin-remove">
 						{{stakeholder.name}}

src/app/monitor/monitor.component.html

@@ -181,7 +181,7 @@
                     </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-text-uppercase uk-button-text"
+											<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
 												(click)="toggleDescriptionOverlay($event, j)">
 												<span class="uk-flex uk-flex-middle">
 													<icon name="analytics" type="outlined" [flex]="true"></icon>
@@ -193,7 +193,7 @@
 											class="custom-description-overlay 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">
-													<a class="uk-display-inline-block uk-link-reset" (click)="toggleDescriptionOverlay($event, j)">
+													<a class="uk-display-inline-block uk-close" (click)="toggleDescriptionOverlay($event, j)">
 														<icon name="close" ratio="1"></icon>
 													</a>
 												</div>

src/app/monitor/monitor.module.ts

@@ -23,7 +23,7 @@ import {SearchFilterModule} from "../openaireLibrary/searchPages/searchUtils/sea
 import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
 import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
-import {filters, incognito} from "../openaireLibrary/utils/icons/icons";
+import {filters, graph, incognito} from "../openaireLibrary/utils/icons/icons";
 import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
 
 @NgModule({
@@ -47,6 +47,6 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
 })
 export class MonitorModule {
 	constructor(private iconsService: IconsService) {
-		this.iconsService.registerIcons([incognito, filters]);
+		this.iconsService.registerIcons([incognito, filters, graph]);
 	}
 }

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit aa210384bc1df7b11595243096fd9fd5c8e01ae8
+Subproject commit d17f9b4d5c548a8f5f36cc7049f1b27ac23874d3

src/app/search/searchPages/advanced/searchDataproviders.component.ts

@@ -1,20 +1,22 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {SearchCustomFilter} from "../../../openaireLibrary/searchPages/searchUtils/searchUtils.class";
 import {ActivatedRoute, Router} from "@angular/router";
 import {StakeholderService} from "../../../openaireLibrary/monitor/services/stakeholder.service";
 import {Subscriber} from "rxjs";
 import {ConfigurationService} from "../../../openaireLibrary/utils/configuration/configuration.service";
+import {SearchForm} from "../../../openaireLibrary/searchPages/searchUtils/newSearchPage.component";
 
 @Component({
   selector: 'monitor-advanced-search-dataproviders',
   template: `
       <search-dataproviders *ngIf="initialized" [simpleView]="false"
-                            [customFilter]=customFilter [hasPrefix]="false"
+                            [customFilter]=customFilter [hasPrefix]="false" [searchForm]="searchForm"
                             [includeOnlyResultsAndFilter]="false" [showSwitchSearchLink]="showSwitchSearchLink"  [piwikSiteId]="piwikSiteId">
       </search-dataproviders>
   `
 })
 export class MonitorAdvancedSearchDataprovidersComponent {
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: false};
   customFilter: SearchCustomFilter = null;
   initialized: boolean = false;
   showSwitchSearchLink:boolean = false;

src/app/search/searchPages/advanced/searchOrganizations.component.ts

@@ -1,19 +1,21 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {StakeholderService} from "../../../openaireLibrary/monitor/services/stakeholder.service";
 import {SearchCustomFilter} from "../../../openaireLibrary/searchPages/searchUtils/searchUtils.class";
 import {Subscriber} from "rxjs";
 import {ConfigurationService} from "../../../openaireLibrary/utils/configuration/configuration.service";
+import {SearchForm} from "../../../openaireLibrary/searchPages/searchUtils/newSearchPage.component";
 
 @Component({
   selector: 'monitor-advanced-search-organizations',
   template: `
       <search-organizations *ngIf="initialized" [simpleView]="false" [showSwitchSearchLink]="false" [customFilter]="customFilter"
-      [piwikSiteId]="piwikSiteId">
+      [piwikSiteId]="piwikSiteId" [searchForm]="searchForm">
       </search-organizations>
   `
 })
 export class MonitorAdvancedSearchOrganizationsComponent {
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: false};
   initialized: boolean = false;
   customFilter: SearchCustomFilter = null;
   piwikSiteId;

src/app/search/searchPages/advanced/searchProjects.component.ts

@@ -1,10 +1,11 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {SearchCustomFilter} from "../../../openaireLibrary/searchPages/searchUtils/searchUtils.class";
 import {ActivatedRoute, Router} from "@angular/router";
 import {StakeholderService} from "../../../openaireLibrary/monitor/services/stakeholder.service";
 import {Subscriber} from "rxjs";
 import {properties} from "../../../../environments/environment";
 import {ConfigurationService} from "../../../openaireLibrary/utils/configuration/configuration.service";
+import {SearchForm} from "../../../openaireLibrary/searchPages/searchUtils/newSearchPage.component";
 
 @Component({
   selector: 'monitor-advanced-search-projects',
@@ -13,13 +14,14 @@ import {ConfigurationService} from "../../../openaireLibrary/utils/configuration
                        [customFilter]=customFilter [hasPrefix]="false"
                        [includeOnlyResultsAndFilter]="false" [showSwitchSearchLink]="showSwitchSearchLink"
                        [openaireLink]="'https://'+(properties.environment != 'production'?'beta.':'')+'explore.openaire.eu/search/simple/projects'"
-                       [piwikSiteId]="piwikSiteId"
+                       [piwikSiteId]="piwikSiteId" [searchForm]="searchForm"
       >
       </search-projects>
   `
   
 })
 export class MonitorAdvancedSearchProjectsComponent {
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: false};
   customFilter: SearchCustomFilter = null;
   initialized: boolean = false;
   showSwitchSearchLink:boolean = false;

src/app/search/searchPages/advanced/searchResearchResults.component.ts

@@ -1,10 +1,11 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {SearchCustomFilter} from "../../../openaireLibrary/searchPages/searchUtils/searchUtils.class";
 import {ActivatedRoute, Router} from "@angular/router";
 import {StakeholderService} from "../../../openaireLibrary/monitor/services/stakeholder.service";
 import {Subscriber} from "rxjs";
 import {properties} from "../../../../environments/environment";
 import {ConfigurationService} from "../../../openaireLibrary/utils/configuration/configuration.service";
+import {SearchForm} from "../../../openaireLibrary/searchPages/searchUtils/newSearchPage.component";
 
 @Component({
   selector: 'monitor-advanced-search-results',
@@ -21,6 +22,7 @@ import {ConfigurationService} from "../../../openaireLibrary/utils/configuration
 export class MonitorAdvancedSearchResearchResultsComponent {
   customFilter: SearchCustomFilter = null;
   initialized: boolean = false;
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: true};
   properties;
   piwikSiteId;
   constructor(private route: ActivatedRoute,

src/app/search/searchPages/simple/searchDataproviders.component.ts

@@ -1,20 +1,22 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {SearchCustomFilter} from "../../../openaireLibrary/searchPages/searchUtils/searchUtils.class";
 import {ActivatedRoute, Router} from "@angular/router";
 import {StakeholderService} from "../../../openaireLibrary/monitor/services/stakeholder.service";
 import {Subscriber} from "rxjs";
 import {ConfigurationService} from "../../../openaireLibrary/utils/configuration/configuration.service";
+import {SearchForm} from "../../../openaireLibrary/searchPages/searchUtils/newSearchPage.component";
 
 @Component({
   selector: 'monitor-search-dataproviders',
   template: `
       <search-dataproviders *ngIf="initialized"
-                            [customFilter]=customFilter [hasPrefix]="false"
+                            [customFilter]=customFilter [hasPrefix]="false" [searchForm]="searchForm"
                             [includeOnlyResultsAndFilter]="false" [showSwitchSearchLink]="showSwitchSearchLink" [piwikSiteId]="piwikSiteId">
       </search-dataproviders>
   `
 })
 export class MonitorSearchDataprovidersComponent {
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: false};
   customFilter: SearchCustomFilter = null;
   initialized: boolean = false;
   showSwitchSearchLink:boolean = false;

src/app/search/searchPages/simple/searchOrganizations.component.ts

@@ -1,17 +1,19 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {StakeholderService} from "../../../openaireLibrary/monitor/services/stakeholder.service";
 import {Subscriber} from "rxjs";
 import {ConfigurationService} from "../../../openaireLibrary/utils/configuration/configuration.service";
+import {SearchForm} from "../../../openaireLibrary/searchPages/searchUtils/newSearchPage.component";
 
 @Component({
   selector: 'monitor-search-organizations',
   template: `
-      <search-organizations *ngIf="initialized" [piwikSiteId]="piwikSiteId">
+      <search-organizations *ngIf="initialized" [searchForm]="searchForm" [piwikSiteId]="piwikSiteId">
       </search-organizations>
   `
 })
 export class MonitorSearchOrganizationsComponent {
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: false};
   initialized: boolean = false;
   piwikSiteId;
   constructor(private route: ActivatedRoute,

src/app/search/searchPages/simple/searchProjects.component.ts

@@ -1,10 +1,11 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {SearchCustomFilter} from "../../../openaireLibrary/searchPages/searchUtils/searchUtils.class";
 import {ActivatedRoute, Router} from "@angular/router";
 import {StakeholderService} from "../../../openaireLibrary/monitor/services/stakeholder.service";
 import {Subscriber} from "rxjs";
 import {properties} from "../../../../environments/environment";
 import {ConfigurationService} from "../../../openaireLibrary/utils/configuration/configuration.service";
+import {SearchForm} from "../../../openaireLibrary/searchPages/searchUtils/newSearchPage.component";
 
 @Component({
   selector: 'monitor-search-projects',
@@ -13,12 +14,13 @@ import {ConfigurationService} from "../../../openaireLibrary/utils/configuration
                        [customFilter]=customFilter [hasPrefix]="false"
                        [includeOnlyResultsAndFilter]="false" 
                        [openaireLink]="'https://'+(properties.environment != 'production'?'beta.':'')+'explore.openaire.eu/search/simple/projects'"
-                       [piwikSiteId]="piwikSiteId">
+                       [piwikSiteId]="piwikSiteId" [searchForm]="searchForm">
       </search-projects>
   `
   
 })
 export class MonitorSearchProjectsComponent {
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: false};
   customFilter: SearchCustomFilter = null;
   initialized: boolean = false;
   properties;

src/app/search/searchPages/simple/searchResearchResults.component.ts

@@ -1,10 +1,11 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {SearchCustomFilter} from "../../../openaireLibrary/searchPages/searchUtils/searchUtils.class";
 import {ActivatedRoute, Router} from "@angular/router";
 import {StakeholderService} from "../../../openaireLibrary/monitor/services/stakeholder.service";
 import {Subscriber} from "rxjs";
 import {properties} from "../../../../environments/environment";
 import {ConfigurationService} from "../../../openaireLibrary/utils/configuration/configuration.service";
+import {SearchForm} from "../../../openaireLibrary/searchPages/searchUtils/newSearchPage.component";
 
 @Component({
   selector: 'monitor-search-results',
@@ -13,12 +14,14 @@ import {ConfigurationService} from "../../../openaireLibrary/utils/configuration
                                [customFilter]=customFilter [hasPrefix]="false"
                                [includeOnlyResultsAndFilter]="false"
                                [showSwitchSearchLink]="true"
+                               [searchForm]="searchForm"
                                [openaireLink]="'https://'+(properties.environment != 'production'?'beta.':'')+'explore.openaire.eu/search/find/research-outcomes'"
                                [piwikSiteId]="piwikSiteId"
       ></search-research-results>
   `,
 })
 export class MonitorSearchResearchResultsComponent {
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: false};
   customFilter: SearchCustomFilter = null;
   initialized: boolean = false;
   properties;

src/app/topic/topic.component.html

@@ -1,7 +1,7 @@
 <aside id="sidebar_main">
   <div id="sidebar_content">
     <div class="menu_section uk-margin-top">
-      <ul class="uk-list">
+      <ul class="uk-list uk-nav-parent-icon uk-nav" uk-nav>
         <li>
           <a [routerLink]="'/admin/' + stakeholder.alias">
             <div class="uk-flex uk-flex-middle uk-flex-center">
@@ -16,7 +16,7 @@
     </div>
     <div class="menu_section uk-margin-large-top">
       <div *ngIf="stakeholder.topics[topicIndex]" class="active" [style]="'--index: ' + topicIndex + '; --size: ' + (stakeholder.topics[topicIndex].icon?'40px':0)"></div>
-      <ul class="uk-list">
+      <ul class="uk-list uk-nav-parent-icon uk-nav" uk-nav>
         <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
           <li class="uk-visible-toggle" [class.uk-active]="topicIndex == i">
             <a [routerLink]="'/admin/'+stakeholder.alias + '/indicators/' + topic.alias"
@@ -81,9 +81,9 @@
     </div>
     <div *ngIf="stakeholder && stakeholder.topics.length > 0" class="uk-position-bottom uk-margin-bottom">
       <div class="uk-flex uk-flex-center">
-        <a class="uk-icon-button uk-button-primary" uk-tooltip="Preview">
+        <button class="uk-icon-button uk-button-primary" uk-tooltip="Preview">
           <icon name="visibility" [flex]="true"></icon>
-        </a>
+        </button>
         <div #element uk-dropdown="mode: click; pos: top-left; offset: 5; delay-hide: 0; flip: false"
              class="uk-padding-remove-horizontal">
           <ul class="uk-nav uk-dropdown-nav">

src/assets/common-assets

@@ -1 +1 @@
-Subproject commit fbbae0418315e06d6ce5a0d193fd08c8ea617b6b
+Subproject commit cc2719364d8d553a8ea6585ff651b3858fc1d6a0

src/assets/monitor-dashboard-custom.css

@@ -40,7 +40,10 @@
   --list-disc-color: var(--monitor-color);
 
   /* Pills */
-  --pill-alt-background-active-image: linear-gradient(122deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);;
+  --pill-alt-background-active-image: linear-gradient(122deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
+
+  /* Search */
+  --search-form-background: var(--structure-page-content-background-color);
 }
 
 .stakeholderPage #filters_icon .start {

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit 63c2b02974b3e893cafd08881e966601ca7c3f81
+Subproject commit 0690007b7b3eb567b09b09c6f2968d5abc700cc9