From c17125cba801fb6e85293cc9a8de998d2802fbae Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Fri, 8 Sep 2023 08:37:33 +0300
Subject: [PATCH] Use  generalizable tokens for the color

---
 src/pages/LandingPage/LandingPage.tsx                   | 2 +-
 src/pages/ValidatorOnboarding/Activation/Activation.tsx | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
index 73432231..b05a3ab8 100644
--- a/src/pages/LandingPage/LandingPage.tsx
+++ b/src/pages/LandingPage/LandingPage.tsx
@@ -6,7 +6,7 @@ import { NodeIcon } from '@status-im/icons'
 import { Button as StatusButton, Text } from '@status-im/components'
 import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
 import { useNavigate } from 'react-router'
-
+import { themes } from '../../../themes'
 const LandingPage = () => {
   const navigate = useNavigate()
 
diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
index 07678c79..ccb2c26b 100644
--- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx
+++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
@@ -4,6 +4,7 @@ import { Text } from '@status-im/components'
 import Confetti from 'react-confetti'
 import ActivationCard from './ActivationCard'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
+import { themes } from '../../../../themes'
 
 const styles = {
   confettiContainer: {
@@ -33,7 +34,7 @@ const Activation = () => {
       clearTimeout(timer)
     }
   }, [])
-
+  console.log(themes.light.blue.key)
   return (
     <Stack style={styles.confettiContainer} width={'100%'}>
       {showConfetti && <Confetti style={styles.confettiCanvas} />}
@@ -54,14 +55,14 @@ const Activation = () => {
               <ActivationCard
                 text="Execution Sync Status"
                 isGaugeIncluded={true}
-                gaugeColor={'#2a4af5'}
+                gaugeColor={themes.light.blue.val}
                 gaugeSynced={123.524}
                 gaugeTotal={172.503}
               />
               <ActivationCard
                 text="Execution Sync Status"
                 isGaugeIncluded={true}
-                gaugeColor={'#EB5757'}
+                gaugeColor={themes.light.red.val}
                 gaugeSynced={123.524}
                 gaugeTotal={172.503}
               />