From e177918b5d5ed48fa9a9f0665cf5081e4df9c510 Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Mon, 11 Mar 2024 13:27:26 +0200
Subject: [PATCH] [plugins-functionality | WIP]

---
 .../plugin-gateway-information.component.html | 304 +++++++++---------
 .../plugin-openaire-products.component.ts     |   2 +-
 .../plugin-search-deposit-link.component.html |  12 +-
 .../plugin-search-deposit-link.component.less |   4 +
 4 files changed, 167 insertions(+), 155 deletions(-)

diff --git a/dashboard/plugins/components/gateway-information/plugin-gateway-information.component.html b/dashboard/plugins/components/gateway-information/plugin-gateway-information.component.html
index 9a9e8d97..b6a2b4de 100644
--- a/dashboard/plugins/components/gateway-information/plugin-gateway-information.component.html
+++ b/dashboard/plugins/components/gateway-information/plugin-gateway-information.component.html
@@ -1,90 +1,95 @@
 <div *ngIf="!community " class="uk-text-muted uk-text-center">
   No community info available
 </div>
-<div class="uk-grid uk-child-width-1-2@m uk-child-width-1-1@s">
-  <div *ngIf="portal && community" class=""> <!-- this div will have the
-    customized color or image -->
-    <div class="uk-container uk-container-large uk-flex uk-flex-center">
-      <div class="uk-margin-large-top uk-margin-large-bottom">
-        <h1 *ngIf="pluginObject.showShortTitle" class="uk-text-center uk-h2 uk-margin-remove">
-          {{community.shortTitle}}
-        </h1>
-        <div *ngIf="pluginObject.showTitle"
-             class="uk-text-center uk-margin-top">
-          {{community.title}}
-        </div>
-        <div  *ngIf="pluginObject.description" [innerHTML]="community.description"></div>
-        <div  *ngIf="pluginObject.searchbar && isRouteEnabled(searchLinkToResults)" [class.uk-invisible]="disableSelect" class="uk-margin-medium-top">
-          <advanced-search-input #advanced (searchEmitter)="goTo(true)">
-            <entities-selection class="uk-width-1-3" [simpleView]="true" currentEntity="result"
-                                [selectedEntity]="selectedEntity"
-                                (selectionChange)="entityChanged($event);advanced.focusNext(input, $event)"
-                                (disableSelectEmitter)="disableSelectChange($event)"
-                                [onChangeNavigate]="false"></entities-selection>
-            <div input #input class="uk-width-expand" placeholder="Scholary works" [searchable]="true"
-                 [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
-          </advanced-search-input>
-          <div *ngIf="selectedEntity === 'result' && input.focused"
-               (click)="$event.stopPropagation();advanced.focusNext(input, $event)"
-               class="uk-dropdown uk-display-block uk-margin-small-top uk-width-auto" uk-dropdown="mode: click">
-            <div class="uk-padding-small">
-              <quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
-            </div>
+<div class="uk-section uk-container ">
+  <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-1@s ">
+
+    <div *ngIf="portal && community" class="">
+      <div *ngIf="pluginObject.showShortTitle"
+           class="uk-text-primary">
+        {{community.shortTitle}}
+      </div>
+      <h1 *ngIf="pluginObject.showTitle" class=" uk-h2 uk-margin-remove">
+        {{community.title}}
+      </h1>
+
+      <div *ngIf="pluginObject.description" [innerHTML]="community.description"></div>
+      <div *ngIf="pluginObject.searchbar && isRouteEnabled(searchLinkToResults)" [class.uk-invisible]="disableSelect"
+           class="uk-margin-medium-top">
+        <advanced-search-input #advanced (searchEmitter)="goTo(true)">
+          <entities-selection class="uk-width-1-3" [simpleView]="true" currentEntity="result"
+                              [selectedEntity]="selectedEntity"
+                              (selectionChange)="entityChanged($event);advanced.focusNext(input, $event)"
+                              (disableSelectEmitter)="disableSelectChange($event)"
+                              [onChangeNavigate]="false"></entities-selection>
+          <div input #input class="uk-width-expand" placeholder="Scholary works" [searchable]="true"
+               [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
+        </advanced-search-input>
+        <div *ngIf="selectedEntity === 'result' && input.focused"
+             (click)="$event.stopPropagation();advanced.focusNext(input, $event)"
+             class="uk-dropdown uk-display-block uk-margin-small-top uk-width-auto" uk-dropdown="mode: click">
+          <div class="uk-padding-small">
+            <quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
           </div>
         </div>
-        <div  *ngIf="(pluginObject.fos && isRouteEnabled('/fields-of-science')) || (pluginObject.sdgs  && isRouteEnabled('/sdgs'))" class="uk-padding-small uk-margin-small-top">
-          <div class="uk-text-meta">
-            Try browsing by:
-          </div>
-          <div class="link-actions uk-flex uk-flex-column uk-flex-top uk-margin-small-top">
-            <a *ngIf="pluginObject.sdgs && isRouteEnabled('/sdgs')" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-small-bottom"
-               routerLinkActive="router-link-active" routerLink="/sdgs">
+      </div>
+      <div
+          *ngIf="(pluginObject.fos && isRouteEnabled('/fields-of-science')) || (pluginObject.sdgs  && isRouteEnabled('/sdgs'))"
+          class="uk-padding-small uk-margin-small-top">
+        <div class="uk-text-meta">
+          Try browsing by:
+        </div>
+        <div class="link-actions uk-flex uk-flex-column uk-flex-top uk-margin-small-top">
+          <a *ngIf="pluginObject.sdgs && isRouteEnabled('/sdgs')"
+             class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-small-bottom"
+             routerLinkActive="router-link-active" routerLink="/sdgs">
 								<span class="uk-flex uk-flex-middle">
-									<img src="assets/common-assets/sdg/sdg-dot-img.svg" alt="SDGs logo" loading="lazy" width="17px" height="17px">
+									<img src="assets/common-assets/sdg/sdg-dot-img.svg" alt="SDGs logo" loading="lazy" width="17px"
+                       height="17px">
 									<span class="uk-margin-small-left">Sustainable Development Goals (SDG<span
                       class="uk-text-lowercase">s</span>)</span>
 								</span>
-            </a>
-            <a *ngIf="pluginObject.fos&& isRouteEnabled('/fields-of-science') " class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
-               routerLinkActive="router-link-active" routerLink="/fields-of-science">
+          </a>
+          <a *ngIf="pluginObject.fos&& isRouteEnabled('/fields-of-science') "
+             class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
+             routerLinkActive="router-link-active" routerLink="/fields-of-science">
 								<span class="uk-flex uk-flex-middle">
-									<img src="assets/common-assets/fos/fos-icon.svg" alt="FOS logo" loading="lazy" width="17px" height="8px">
+									<img src="assets/common-assets/fos/fos-icon.svg" alt="FOS logo" loading="lazy" width="17px"
+                       height="8px">
 									<span class="uk-margin-small-left">Fields of Science (FoS)</span>
 								</span>
-            </a>
-          </div>
+          </a>
         </div>
-
       </div>
-    </div>
-  </div>
-  <div>
-    <div class="plugin-gateway-information uk-border-rounded uk-padding uk-margin-medium-bottom">
-      <img class="plugin-background" src="assets/common-assets/connect_image_faded.png">
-      <div class="plugin-content">
-        <div class="uk-text-lead uk-text-large uk-text-bold uk-margin-bottom">
-          {{  pluginObject.title}}
-        </div>
 
-        <ng-container *ngIf="community">
-          <div *ngIf="isRouteEnabled('/curators') && isVisible('curators')"
-               class="uk-text-small uk-margin-xsmall-bottom">
-            <curators [longView]="false"></curators>
+    </div>
+    <div>
+      <div class="heroBackground generalSearchForm  uk-border-rounded uk-padding uk-margin-medium-bottom">
+        <!--      <img class="plugin-background" src="assets/common-assets/connect_image_faded.png">-->
+        <div class="plugin-content">
+          <div class="uk-text-lead uk-text-large uk-text-bold uk-margin-bottom">
+            {{  pluginObject.title}}
           </div>
-          <div *ngIf="community.date && isVisible('date')" class="uk-text-small">
-            <span>Created: </span> {{community.date | date:'dd-MMM-yyyy'}}
-          </div>
-          <div class="uk-grid uk-grid-large uk-grid-stack uk-margin-top" uk-grid uk-height-match=".info-number">
-            <div>
-              <div *ngIf="projectTotal  && projectTotal > 0 && isEntityEnabled('project')
+
+          <ng-container *ngIf="community">
+            <div *ngIf="isRouteEnabled('/curators') && isVisible('curators')"
+                 class="uk-text-small uk-margin-xsmall-bottom">
+              <curators [longView]="false"></curators>
+            </div>
+            <div *ngIf="community.date && isVisible('date')" class="uk-text-small">
+              <span>Created: </span> {{community.date | date:'dd-MMM-yyyy'}}
+            </div>
+            <div class="uk-grid uk-grid-large uk-grid-stack uk-margin-top" uk-grid uk-height-match=".info-number">
+              <div>
+                <div *ngIf="projectTotal  && projectTotal > 0 && isEntityEnabled('project')
          && isRouteEnabled(searchLinkToProjects) && isVisible('projects')"
-                   class="uk-flex uk-flex-column uk-margin-bottom info-number">
-                <a class="uk-h5 uk-margin-remove" [queryParams]=params
-                   routerLinkActive="router-link-active"
-                   [routerLink]="searchLinkToProjects">
-                  {{projectTotal|number}}
-                </a>
-                <span class="uk-flex uk-flex-middle uk-text-small">
+                     class="uk-flex uk-flex-column uk-margin-bottom info-number">
+                  <a class="uk-h5 uk-margin-remove" [queryParams]=params
+                     routerLinkActive="router-link-active"
+                     [routerLink]="searchLinkToProjects">
+                    {{projectTotal|number}}
+                  </a>
+                  <span class="uk-flex uk-flex-middle uk-text-small">
             Projects
             <a *ngIf="projectsCalculated && (projectTotal  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects))"
                [title]="buildProjectsTooltip()"
@@ -94,16 +99,16 @@
                     [customClass]="'uk-text-muted'"></icon>
             </a>
           </span>
-              </div>
-              <div *ngIf="contentProviderTotal  && contentProviderTotal > 0 && isEntityEnabled('datasource') &&
+                </div>
+                <div *ngIf="contentProviderTotal  && contentProviderTotal > 0 && isEntityEnabled('datasource') &&
         isRouteEnabled(searchLinkToDataProviders) && isVisible('datasources')"
-                   class="uk-flex uk-flex-column info-number">
-                <a class="uk-h5 uk-margin-remove" [queryParams]=params
-                   routerLinkActive="router-link-active"
-                   [routerLink]="searchLinkToDataProviders">
-                  {{contentProviderTotal|number}}
-                </a>
-                <span class="uk-flex uk-flex-middle uk-text-small">
+                     class="uk-flex uk-flex-column info-number">
+                  <a class="uk-h5 uk-margin-remove" [queryParams]=params
+                     routerLinkActive="router-link-active"
+                     [routerLink]="searchLinkToDataProviders">
+                    {{contentProviderTotal|number}}
+                  </a>
+                  <span class="uk-flex uk-flex-middle uk-text-small">
             Content Providers
             <a *ngIf="contentProvidersCalculated && (contentProviderTotal  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders))"
                [title]="buildContentProvidersTooltip()"
@@ -113,17 +118,17 @@
                     [customClass]="'uk-text-muted'"></icon>
             </a>
           </span>
+                </div>
               </div>
-            </div>
-            <div>
-              <div *ngIf="(zenodoCommunityIdS.length + ((masterZenodoCommunity) ? 1 : 0) > 0) && isRouteEnabled(shareInZenodoPage)
+              <div>
+                <div *ngIf="(zenodoCommunityIdS.length + ((masterZenodoCommunity) ? 1 : 0) > 0) && isRouteEnabled(shareInZenodoPage)
 && isVisible('communities')"
-                   class="uk-flex uk-flex-column uk-margin-bottom info-number">
-                <a class="uk-h5 uk-margin-remove" [queryParams]=params
-                   routerLinkActive="router-link-active" [routerLink]="shareInZenodoPage">
-                  {{zenodoCommunityIdS.length + ((masterZenodoCommunity) ? 1 : 0)}}
-                </a>
-                <span class="uk-flex uk-flex-middle uk-text-small">
+                     class="uk-flex uk-flex-column uk-margin-bottom info-number">
+                  <a class="uk-h5 uk-margin-remove" [queryParams]=params
+                     routerLinkActive="router-link-active" [routerLink]="shareInZenodoPage">
+                    {{zenodoCommunityIdS.length + ((masterZenodoCommunity) ? 1 : 0)}}
+                  </a>
+                  <span class="uk-flex uk-flex-middle uk-text-small">
             Linked Zenodo Communities
             <a [title]="buildZenodoCommunitiesTooltip()"
                [attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
@@ -132,95 +137,98 @@
                     [customClass]="'uk-text-muted'"></icon>
             </a>
           </span>
-              </div>
-              <div
-                  *ngIf="isRouteEnabled('/subjects') && displayedAllSubjects && displayedAllSubjects.length > 0 && isVisible('subjects')"
-                  class="uk-flex uk-flex-column uk-margin-bottom info-number">
-                <a class="uk-h5 uk-margin-remove"
-                   routerLinkActive="router-link-active" [routerLink]="'/subjects'">
-                  {{displayedAllSubjects.length}}
-                </a>
-                <span class="uk-text-small">
+                </div>
+                <div
+                    *ngIf="isRouteEnabled('/subjects') && displayedAllSubjects && displayedAllSubjects.length > 0 && isVisible('subjects')"
+                    class="uk-flex uk-flex-column uk-margin-bottom info-number">
+                  <a class="uk-h5 uk-margin-remove"
+                     routerLinkActive="router-link-active" [routerLink]="'/subjects'">
+                    {{displayedAllSubjects.length}}
+                  </a>
+                  <span class="uk-text-small">
             Subjects
           </span>
+                </div>
               </div>
             </div>
-          </div>
-        </ng-container>
-      </div>
+          </ng-container>
+        </div>
 
-    </div>
-    <div *ngIf="community" class="plugin2 uk-flex uk-flex-middle uk-flex-wrap" style="grid-gap: 30px;">
-      <div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.publications > 0 && isEntityEnabled('publication')
+      </div>
+      <div *ngIf="community" class="plugin2 uk-flex uk-flex-middle uk-flex-wrap" style="grid-gap: 30px;">
+        <div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.publications > 0 && isEntityEnabled('publication')
          && isRouteEnabled(searchLinkToResults) &&
           isVisible('publications')">
-        <icon [name]="'description'" [type]="'outlined'" [ratio]="2" [flex]="true"
-              [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
-        <a [queryParams]="getParamsForSearchLink('publications')" [routerLink]="properties.searchLinkToAdvancedResults"
-           class="uk-link-reset uk-flex uk-flex-column">
+          <icon [name]="'description'" [type]="'outlined'" [ratio]="2" [flex]="true"
+                [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
+          <a [queryParams]="getParamsForSearchLink('publications')"
+             [routerLink]="properties.searchLinkToAdvancedResults"
+             class="uk-link-reset uk-flex uk-flex-column">
       <span class="uk-text-xsmall">
         {{openaireEntities.PUBLICATIONS}}
       </span>
-          <span *ngIf="resultCounts" class="uk-h6 uk-margin-remove"
-                [innerHTML]="resultCounts.publications | numberRound: 1:1">
+            <span *ngIf="resultCounts" class="uk-h6 uk-margin-remove"
+                  [innerHTML]="resultCounts.publications | numberRound: 1:1">
       </span>
-        </a>
-      </div>
-      <div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.datasets > 0 && isEntityEnabled('dataset')
+          </a>
+        </div>
+        <div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.datasets > 0 && isEntityEnabled('dataset')
          && isRouteEnabled(searchLinkToResults) &&
           isVisible('datasets')">
-        <icon [name]="'database'" [type]="'outlined'" [ratio]="2" [flex]="true"
-              [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
-        <a [queryParams]="getParamsForSearchLink('datasets')" [routerLink]="properties.searchLinkToAdvancedResults"
-           class="uk-link-reset uk-flex uk-flex-column">
+          <icon [name]="'database'" [type]="'outlined'" [ratio]="2" [flex]="true"
+                [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
+          <a [queryParams]="getParamsForSearchLink('datasets')" [routerLink]="properties.searchLinkToAdvancedResults"
+             class="uk-link-reset uk-flex uk-flex-column">
       <span class="uk-text-xsmall">
         {{openaireEntities.DATASETS}}
       </span>
-          <span *ngIf="resultCounts" class="uk-h6 uk-margin-remove"
-                [innerHTML]="resultCounts.datasets | numberRound: 1:1">
+            <span *ngIf="resultCounts" class="uk-h6 uk-margin-remove"
+                  [innerHTML]="resultCounts.datasets | numberRound: 1:1">
       </span>
-        </a>
-      </div>
-      <!--<div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.datasets > 0 && isEntityEnabled('dataset')
-             && isRouteEnabled(searchLinkToResults) &&
-              isVisible('datasets')">
-        <icon [name]="'database'" [type]="'outlined'" [ratio]="2" [flex]="true" [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
-        <a [queryParams]="getParamsForSearchLink('datasets')" [routerLink]="properties.searchLinkToAdvancedResults" class="uk-link-reset uk-flex uk-flex-column">
-      <span class="uk-text-xsmall">
-        {{openaireEntities.DATASETS}}
-      </span>
-          <span *ngIf="resultCounts" class="uk-h6 uk-margin-remove" [innerHTML]="resultCounts.datasets | numberRound: 1:1">
-      </span>
-        </a>
-      </div>-->
-      <div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.software > 0 && isEntityEnabled('software')
+          </a>
+        </div>
+        <!--<div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.datasets > 0 && isEntityEnabled('dataset')
+               && isRouteEnabled(searchLinkToResults) &&
+                isVisible('datasets')">
+          <icon [name]="'database'" [type]="'outlined'" [ratio]="2" [flex]="true" [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
+          <a [queryParams]="getParamsForSearchLink('datasets')" [routerLink]="properties.searchLinkToAdvancedResults" class="uk-link-reset uk-flex uk-flex-column">
+        <span class="uk-text-xsmall">
+          {{openaireEntities.DATASETS}}
+        </span>
+            <span *ngIf="resultCounts" class="uk-h6 uk-margin-remove" [innerHTML]="resultCounts.datasets | numberRound: 1:1">
+        </span>
+          </a>
+        </div>-->
+        <div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.software > 0 && isEntityEnabled('software')
          && isRouteEnabled(searchLinkToResults) &&
           isVisible('software')">
-        <icon [name]="'integration_instructions'" [type]="'outlined'" [ratio]="2" [flex]="true"
-              [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
-        <a [queryParams]="getParamsForSearchLink('software')" [routerLink]="properties.searchLinkToAdvancedResults"
-           class="uk-link-reset uk-flex uk-flex-column">
+          <icon [name]="'integration_instructions'" [type]="'outlined'" [ratio]="2" [flex]="true"
+                [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
+          <a [queryParams]="getParamsForSearchLink('software')" [routerLink]="properties.searchLinkToAdvancedResults"
+             class="uk-link-reset uk-flex uk-flex-column">
   <span class="uk-text-xsmall">
     {{openaireEntities.SOFTWARE}}
   </span>
-          <span *ngIf="resultCounts" class="uk-h6 uk-margin-remove"
-                [innerHTML]="resultCounts.software | numberRound: 1:1">
+            <span *ngIf="resultCounts" class="uk-h6 uk-margin-remove"
+                  [innerHTML]="resultCounts.software | numberRound: 1:1">
   </span>
-        </a>
-      </div>
-      <div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.other > 0 && isEntityEnabled('orp')
+          </a>
+        </div>
+        <div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.other > 0 && isEntityEnabled('orp')
          && isRouteEnabled(searchLinkToResults) &&
          isVisible('other')">
-        <icon [name]="'integration_instructions'" [type]="'outlined'" [ratio]="2" [flex]="true"
-              [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
-        <a [queryParams]="getParamsForSearchLink('other')" [routerLink]="properties.searchLinkToAdvancedResults"
-           class="uk-link-reset uk-flex uk-flex-column">
+          <icon [name]="'integration_instructions'" [type]="'outlined'" [ratio]="2" [flex]="true"
+                [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
+          <a [queryParams]="getParamsForSearchLink('other')" [routerLink]="properties.searchLinkToAdvancedResults"
+             class="uk-link-reset uk-flex uk-flex-column">
   <span class="uk-text-xsmall">
     {{openaireEntities.OTHER}}
   </span>
-          <span *ngIf="resultCounts" class="uk-h6 uk-margin-remove" [innerHTML]="resultCounts.other | numberRound: 1:1">
+            <span *ngIf="resultCounts" class="uk-h6 uk-margin-remove"
+                  [innerHTML]="resultCounts.other | numberRound: 1:1">
   </span>
-        </a>
+          </a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/dashboard/plugins/components/openaireProducts/plugin-openaire-products.component.ts b/dashboard/plugins/components/openaireProducts/plugin-openaire-products.component.ts
index c523bf99..1c389e7c 100644
--- a/dashboard/plugins/components/openaireProducts/plugin-openaire-products.component.ts
+++ b/dashboard/plugins/components/openaireProducts/plugin-openaire-products.component.ts
@@ -12,7 +12,7 @@ export class PluginOpenAIREProducts extends  PluginBaseInfo{
 @Component({
   selector: 'plugin-openaire-products',
   template: `
-    <div *ngIf="pluginObject">
+    <div *ngIf="pluginObject" class="uk-container uk-section">
         <h3>{{pluginObject.title}} </h3>
 
       <div *ngIf="services" uk-slider class="uk-slider">
diff --git a/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html b/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html
index 580412f8..48ec6083 100644
--- a/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html
+++ b/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html
@@ -1,7 +1,7 @@
-<div *ngIf="pluginObject" #parent class="uk-section  ">
-  <div class="uk-container uk-container-large uk-margin-large-bottom">
+<div *ngIf="pluginObject" #parent class="heroBackground generalSearchForm  ">
+  <div class="uk-section uk-container  ">
     <div class="uk-width-1-1 uk-margin-medium-bottom">
-      <h2 class="uk-margin-remove-top ">
+      <h2 class="uk-margin-remove-top uk-text-center ">
        {{pluginObject.title}}<span class="uk-text-primary">.</span>
       </h2>
     </div>
@@ -12,10 +12,10 @@
           <ng-container *ngIf="card.show">
             <slider-nav-item [start]="i">
               <div class="uk-text-primary">{{card.tag}}</div>
-              <h5 class="uk-margin-remove">
+              <div class="uk-margin-remove uk-text-large uk-text-bold">
                 {{card.title}}
-              </h5>
-              <div>{{card.description}}</div>
+              </div>
+              <div class="uk-text-small">{{card.description}}</div>
             </slider-nav-item>
           </ng-container>
         </ng-container>
diff --git a/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.less b/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.less
index 77723ecb..d64f48be 100644
--- a/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.less
+++ b/dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.less
@@ -1,3 +1,7 @@
 //slider-column slider-nav-item .uk-active{
 //  border-left: solid 2px @primary-color;
 //}
+
+
+@slider-nav-item-background-active: white;
+@slider-nav-item-action-background: rgba(255, 255, 255, 0.50);