From e1b7d789dfe78f28f3a6b217710632c4e9c7a36f Mon Sep 17 00:00:00 2001
From: "Mark S. Shenouda" <mark@thisdot.co>
Date: Mon, 21 Oct 2024 13:37:21 +0300
Subject: [PATCH] Fix: spacing address row

---
 src/components/CCIP/ChainHero/ChainHero.css | 14 +++++++++++---
 src/components/CCIP/ChainHero/ChainHero.tsx |  3 ++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/CCIP/ChainHero/ChainHero.css b/src/components/CCIP/ChainHero/ChainHero.css
index 08074cdd49b..aa5ba347c7e 100644
--- a/src/components/CCIP/ChainHero/ChainHero.css
+++ b/src/components/CCIP/ChainHero/ChainHero.css
@@ -92,14 +92,22 @@
 .ccip-chain-hero__feeTokens__list {
   display: flex;
   align-items: center;
-  gap: var(--space-12x);
+  gap: var(--space-20x);
 }
 
 .ccip-chain-hero__feeTokens__item {
   display: flex;
   align-items: center;
-  gap: var(--space-1x);
-  color: #151a23;
+  gap: var(--space-2x);
+  color: var(--gray-900);
+}
+
+.ccip-chain-hero__feeTokens__native-gas-token {
+  font-style: normal;
+  font-weight: var(--font-weight-normal);
+  font-size: var(--space-4x);
+  line-height: var(--space-6x);
+  color: var(--gray-600);
 }
 
 .ccip-chain-hero__feeTokens__item a {
diff --git a/src/components/CCIP/ChainHero/ChainHero.tsx b/src/components/CCIP/ChainHero/ChainHero.tsx
index 686d9aad3f3..28d3a77648f 100644
--- a/src/components/CCIP/ChainHero/ChainHero.tsx
+++ b/src/components/CCIP/ChainHero/ChainHero.tsx
@@ -287,7 +287,8 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
                     }}
                     className="ccip-chain-hero__feeTokens__item__logo"
                   />
-                  <div>{nativeCurrency.name}</div>
+                  <div>{nativeCurrency.name} </div>
+                  <span className="ccip-chain-hero__feeTokens__native-gas-token">(native gas token)</span>
                 </div>
               )}
             </div>