fix: refactor ChainHero heading styles for improved layout and alignment

Author: markshenouda

src/components/CCIP/ChainHero/ChainHero.css

@@ -17,6 +17,12 @@
   margin: 0;
   font-size: 28px;
   font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  overflow: visible;
+  line-height: var(--space-6x);
 }
 
 .ccip-chain-hero__heading img {
@@ -121,7 +127,8 @@
 .ccip-chain-hero__token-logo__symbol {
   font-weight: 500;
   font-size: 18px;
-  color: var(--gray-700);
+  color: var(--Page-Foreground-Muted, #6c7585);
+  align-self: self-end;
 }
 
 .ccip-chain-hero__feeTokens__list {

src/components/CCIP/ChainHero/ChainHero.tsx

@@ -127,15 +127,7 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
               currentTarget.src = fallbackTokenIconUrl
             }}
           />
-          <h1
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
-              position: "relative",
-              overflow: "visible",
-            }}
-          >
+          <h1>
             {network?.name || token?.name}
             <span className="ccip-chain-hero__token-logo__symbol">{token?.id}</span>