From c5934683b0b03ddf80e2a47dbdeb85cfcafe407f Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Wed, 16 Feb 2022 11:23:52 +0200
Subject: [PATCH] change for gradient color in text

---
 src/app/home/home.component.html | 30 +++++++++++++++---------------
 src/assets/monitor-custom.css    |  5 +++++
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 8d6da50..50855c6 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -70,12 +70,12 @@
 			<div class="uk-width-3-4@m uk-flex uk-flex-center uk-flex-middle grid-gap uk-child-width-1-5@m uk-child-width-1-2">
 				<div *ngIf="publicationsSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
 					<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
-						<icon gradient="monitor-gradient" degrees="110" ratio="3" [svg]="((publicationsSize.number|number) + publicationsSize.size) | textAsSvg"></icon>
+						<icon gradient="monitor-gradient" degrees="110" ratio="2.5" [svg]="((publicationsSize.number|number) + publicationsSize.size) | textAsSvg"></icon>
 					</a>
 					<div class="uk-margin-small uk-text-large">Publications</div>
 				</div>
 				<div *ngIf="datasetsSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
-					<h3 class="uk-margin-remove uk-text-primary uk-h1">
+					<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
 						<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
 							<span class="uk-text-bold number">{{datasetsSize.number|number}}</span>{{datasetsSize.size}}
 						</a>
@@ -83,23 +83,23 @@
 					<div class="uk-margin-small uk-text-large">Datasets</div>
 				</div>
 				<div *ngIf="softwareSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
-					<h3 class="uk-margin-remove uk-text-primary uk-h1">
+					<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
 						<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
 							<span class="uk-text-bold number">{{softwareSize.number|number}}</span>{{softwareSize.size}}
 						</a>
 					</h3>
 					<div class="uk-margin-small uk-text-large">Software</div>
 				</div>
-				<!-- <div *ngIf="otherSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
-					<h3 class="uk-margin-remove uk-text-primary uk-h1">
+				<div *ngIf="otherSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
+					<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
 						<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
 							<span class="uk-text-bold number">{{otherSize.number|number}}</span>{{otherSize.size}}
 						</a>
 					</h3>
 					<div class="uk-margin-small uk-text-large">Other</div>
-				</div> -->
+				</div>
 				<div *ngIf="fundersSize" class="uk-card uk-card-default uk-padding uk-margin-medium-bottom uk-text-center">
-					<h3 class="uk-margin-remove uk-text-primary uk-h1">
+					<h3 class="uk-margin-remove uk-h1 custom-gradient-text">
 						<a class="uk-link-reset" href="https://explore.openaire.eu/search/find/research-outcomes?type=publications" target=_blank>
 							<span class="uk-text-bold number">{{fundersSize.number|number}}</span>{{fundersSize.size}}
 						</a>
@@ -123,8 +123,8 @@
 			</div>
 			<div class="uk-width-2-3 uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
 				<div class="">
-					<div class="uk-text-primary uk-h2">
-						Tick
+					<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
+						<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
 					</div>
 					<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
 						Global outlook
@@ -134,8 +134,8 @@
 					</div>
 				</div>
 				<div class="">
-					<div class="uk-text-primary uk-h2">
-						Tick
+					<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
+						<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
 					</div>
 					<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
 						Minimum effort to join
@@ -145,8 +145,8 @@
 					</div>
 				</div>
 				<div class="">
-					<div class="uk-text-primary uk-h2">
-						Tick
+					<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
+						<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
 					</div>
 					<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
 						Transparent methodology
@@ -156,8 +156,8 @@
 					</div>
 				</div>
 				<div class="">
-					<div class="uk-text-primary uk-h2">
-						Tick
+					<div class="uk-icon-bg-shadow uk-margin-bottom custom-gradient-text">
+						<icon name="done" [flex]="true" ratio="1.5" gradient="monitor-gradient" degrees="140"></icon>
 					</div>
 					<div class="uk-text-lead uk-text-bold uk-margin-small-bottom">
 						Customised to your needs
diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css
index aed6d27..1848115 100644
--- a/src/assets/monitor-custom.css
+++ b/src/assets/monitor-custom.css
@@ -85,3 +85,8 @@ main {
   stop-color: var(--monitor-gradient-end);
 }
 
+.custom-gradient-text {
+	background: linear-gradient(110deg, var(--monitor-gradient-start), var(--monitor-gradient-end));
+	-webkit-text-fill-color: transparent;
+	-webkit-background-clip: text;
+}
\ No newline at end of file