From 8b2b46cac131aa8e48c0c0c1c26548288d41128a Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Thu, 29 Oct 2020 20:01:38 +0000
Subject: [PATCH] [Monitor | Trunk]: Home: change pills on hover, add gradient
 on contact us. About: Change how section from h5 to h6

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor@59722 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/home/home.component.css            |  3 +++
 src/app/home/home.component.html           | 17 ++++++++++-------
 src/app/learn-how/learn-how.component.html | 16 ++++++++--------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
index 84e6d15..47957cb 100644
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -60,6 +60,9 @@
 }
 
 .stakeholder-section .uk-subnav-pill > li:hover > a {
+  border-color: var(--portal-main-color);
+  color: var(--portal-main-color);
+  background-color: var(--portal-main-contrast);
   opacity: 1;
 }
 
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 29d2559..856ac13 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -188,7 +188,8 @@
       <!--<li uk-filter-control="[data-type='project']"><a (click)="type = 'project'">Projects</a></li>-->
       <li uk-filter-control="[data-type='organization']"><a (click)="type = 'organization'">Organizations</a></li>
     </ul>
-    <div class="stakeholders uk-margin-large-top uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-grid uk-flex-top uk-flex-wrap-top"
+    <div
+        class="stakeholders uk-margin-large-top uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-grid uk-flex-top uk-flex-wrap-top"
         uk-grid="masonry: true" uk-height-match="target: .uk-card; row: false;">
       <div *ngFor="let stakeholder of stakeholders" [attr.data-type]="stakeholder.type">
         <a *ngIf="directLink" [href]="getStakeholderPageUrl(stakeholder)" target="_blank">
@@ -211,13 +212,15 @@
     </div>
   </div>
 </div>
-<div class="uk-section uk-container uk-text-center uk-margin-large-bottom">
-  <div class="uk-padding-small">
-    <h3>Contact us to help you.</h3>
-    <div class="uk-text-muted uk-margin-medium">
-      Are you looking for more? Get in touch with our team and let us help you.
+<div style="background: linear-gradient(0deg, #FFFFFF 0%, #EFF3F8 0%, #FAFAFA 100%);">
+  <div class="uk-section uk-container uk-text-center uk-margin-large-bottom">
+    <div class="uk-padding-small">
+      <h3>Contact us to help you.</h3>
+      <div class="uk-text-muted uk-margin-medium">
+        Are you looking for more? Get in touch with our team and let us help you.
+      </div>
+      <a class="uk-button portal-button" routerLink="/contact-us">CONTACT US</a>
     </div>
-    <a class="uk-button portal-button" routerLink="/contact-us">CONTACT US</a>
   </div>
 </div>
 <div class="uk-section-muted"
diff --git a/src/app/learn-how/learn-how.component.html b/src/app/learn-how/learn-how.component.html
index 6f2d413..a8977ef 100644
--- a/src/app/learn-how/learn-how.component.html
+++ b/src/app/learn-how/learn-how.component.html
@@ -91,9 +91,9 @@
         Simplify research tracking & monitoring
       </h6>
     </div>
-    <div class="how uk-margin-large-top">
+    <div class="how uk-margin-large-top uk-h6">
       <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-3@s first uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s first uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/1.png">
           </div>
@@ -101,12 +101,12 @@
             <span class="uk-text-bold uk-text-uppercase">Starting</span> from existing<br>research-related data sources
           </div>
         </div>
-        <div class="uk-width-1-3@s second uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s second uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/2.png">
           </div>
         </div>
-        <div class="uk-width-1-3@s third uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s third uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/3.png">
           </div>
@@ -116,7 +116,7 @@
         </div>
       </div>
       <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-3@s fourth uk-flex-last@s uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s fourth uk-flex-last@s uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/4.png">
           </div>
@@ -125,7 +125,7 @@
             <span class="portal-color">Open Science Indicators</span>
           </div>
         </div>
-        <div class="uk-width-1-3@s fifth uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s fifth uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/5.png">
           </div>
@@ -134,7 +134,7 @@
             <span class="portal-color">Collaboration Indicators</span>
           </div>
         </div>
-        <div class="uk-width-1-3@s sixth uk-flex-first@s uk-h5 uk-margin-remove-vertical uk-text-muted">
+        <div class="uk-width-1-3@s sixth uk-flex-first@s uk-text-muted">
           <div>
             <img src="../../assets/monitor-assets/about/how/6.png">
           </div>
@@ -146,7 +146,7 @@
           </div>
         </div>
       </div>
-      <div class="final uk-text-muted uk-h5 uk-margin-remove-vertical">
+      <div class="final uk-text-muted">
         <div>
           <img src="../../assets/monitor-assets/about/how/7.png">
         </div>