[master]: Add colors in five monitors cards and align engagement tags with mocks

src/app/resources/engagement/engagement.component.ts

@@ -20,24 +20,24 @@ import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service
           <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
               <div>
                   <div class="uk-card uk-card-default uk-padding-small">
-                      <span class="uk-label webinar uk-padding-xsmall">Webinar</span>
+                      <span class="uk-label uk-label-small webinar uk-padding-xsmall">Webinar</span>
-                      <div class="uk-text-large uk-text-bold uk-margin-xsmall-top">1st Stakeholder Webinar</div>
+                      <div class="uk-text-large uk-text-bold uk-margin-small-top">1st Stakeholder Webinar</div>
                       <a href="https://zenodo.org/records/8370579" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
                   </div>
               </div>
               <div>
                   <div class="uk-card uk-card-default uk-padding-small">
-                      <span class="uk-label training uk-padding-xsmall">Training</span>
+                      <span class="uk-label uk-label-small training uk-padding-xsmall">Training</span>
-                      <span class="uk-label funder uk-padding-xsmall uk-margin-xsmall-left">RFO</span>
+                      <span class="uk-label uk-label-small funder uk-padding-xsmall uk-margin-xsmall-left">RFO</span>
-                      <div class="uk-text-large uk-text-bold uk-margin-xsmall-top">RFO Training</div>
+                      <div class="uk-text-large uk-text-bold uk-margin-small-top">RFO Training</div>
                       <a href="https://zenodo.org/records/10202641" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
                   </div>
               </div>
               <div>
                   <div class="uk-card uk-card-default uk-padding-small">
-                      <span class="uk-label training uk-padding-xsmall">Training</span>
+                      <span class="uk-label uk-label-small training uk-padding-xsmall">Training</span>
-                      <span class="uk-label organization uk-padding-xsmall uk-margin-xsmall-left">RPO</span>
+                      <span class="uk-label uk-label-small organization uk-padding-xsmall uk-margin-xsmall-left">RPO</span>
-                      <div class="uk-text-large uk-text-bold uk-margin-xsmall-top">RPO Training</div>
+                      <div class="uk-text-large uk-text-bold uk-margin-small-top">RPO Training</div>
                       <a href="https://zenodo.org/records/10143613" target="_blank" class="uk-button uk-button-text uk-margin-medium-top">Learn more</a>
                   </div>
               </div>

src/app/resources/how-it-works/the-five-monitors.component.html

@@ -11,21 +11,21 @@
       </div>
     </div>
     <div class="uk-container uk-container-large uk-position-relative">
-      <div class="uk-flex uk-flex-middle uk-flex-center uk-child-width-1-5 uk-text-center five-boxes" uk-height-match=".uk-card">
+      <div class="uk-flex uk-flex-middle uk-flex-center uk-child-width-1-5 uk-text-center five-boxes">
-        <div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
+        <div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle country uk-height-small">
-          National Monitor
+          {{entities.country}} {{entities.stakeholder}}
         </div>
-        <div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
+        <div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle organization uk-height-small">
-          Research Performing Organisation (RPO)
+          Research Performing Organisation ({{entities.organization}})
         </div>
-        <div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
+        <div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle funder uk-height-small">
-          Research Funding Organisation (RFO)
+          Research Funding Organisation ({{entities.funder}})
         </div>
-        <div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
+        <div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle researcher uk-height-small">
           Researcher
         </div>
-        <div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-center uk-flex-middle">
+        <div class="uk-card uk-border-rounded uk-card-body uk-flex uk-flex-center uk-flex-middle datasource uk-height-small">
-          Repository
+          {{entities.datasource}}
         </div>
       </div>
     </div>

src/app/resources/how-it-works/the-five-monitors.component.less

@@ -1,3 +1,5 @@
+@import (reference) "~src/assets/extend-theme/less/_import-variables";
+
 .custom-translate-bottom-left {
   transform: translate(-20%, 20%);
 }
@@ -6,3 +8,28 @@
   grid-gap: 20px;
   transform: translateY(-50%);
 }
+
+.country {
+  background-color: @country-color;
+  color: @global-inverse-color;
+}
+
+.funder {
+  background: @funder-color;
+  color: @global-inverse-color;
+}
+
+.organization {
+  background-color: @organization-color;
+  color: @global-inverse-color;
+}
+
+.researcher {
+  background-color: @researcher-color;
+  color: @global-inverse-color;
+}
+
+.datasource {
+  background-color: @datasource-color;
+  color: @global-inverse-color;
+}

src/app/resources/how-it-works/the-five-monitors.component.ts

@@ -1,22 +1,20 @@
 import {ChangeDetectorRef, Component} from "@angular/core";
-import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
 import {ActivatedRoute, Router} from "@angular/router";
 import {PiwikService} from "src/app/openaireLibrary/utils/piwik/piwik.service";
 import {Meta, Title} from "@angular/platform-browser";
 import {SEOService} from "src/app/openaireLibrary/sharedComponents/SEO/SEO.service";
-import {StakeholderEntities} from "../../openaireLibrary/monitor/entities/stakeholder";
+import {StakeholderBaseComponent} from "../../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
 
 @Component({
   selector: 'the-five-monitors',
   templateUrl: 'the-five-monitors.component.html',
   styleUrls: ['the-five-monitors.component.less']
 })
-export class TheFiveMonitorsComponent extends BaseComponent{
+export class TheFiveMonitorsComponent extends StakeholderBaseComponent{
   title = 'The 5 Monitors';
   description = 'The 5 Monitors';
   public sections: string[] = ['RPOs', 'RFOs', 'Researchers', 'Repositories'];
   public offset: number;
-  public stakeholderEntities = StakeholderEntities;
   public shouldSticky: boolean = true;
 
   constructor(protected _route: ActivatedRoute,

src/app/resources/how-it-works/you-we.component.ts

@@ -1,5 +1,6 @@
 import {
-  AfterContentChecked, AfterViewInit,
+  AfterContentChecked,
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
@@ -7,7 +8,6 @@ import {
   OnDestroy,
   ViewChild
 } from "@angular/core";
-import {StakeholderEntities} from "../../openaireLibrary/monitor/entities/stakeholder";
 
 declare var UIkit;
 
@@ -57,7 +57,7 @@ declare var UIkit;
 })
 export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDestroy {
   @Input()
-  public type: StakeholderEntities.FUNDER | StakeholderEntities.RI | StakeholderEntities.ORGANIZATION = StakeholderEntities.FUNDER;
+  public type: string;
   @Input()
   public id;
   @ViewChild('sticky') sticky: ElementRef;