diff --git a/src/components/CCIP/ChainHero/ChainHero.css b/src/components/CCIP/ChainHero/ChainHero.css index 34c38f7ae17..cf0f3fe1364 100644 --- a/src/components/CCIP/ChainHero/ChainHero.css +++ b/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 { diff --git a/src/components/CCIP/ChainHero/ChainHero.tsx b/src/components/CCIP/ChainHero/ChainHero.tsx index 6d49ef92b17..07bd086223b 100644 --- a/src/components/CCIP/ChainHero/ChainHero.tsx +++ b/src/components/CCIP/ChainHero/ChainHero.tsx @@ -127,17 +127,9 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain currentTarget.src = fallbackTokenIconUrl }} /> -

- {network?.name || token?.id} - {token?.name} +

+ {network?.name || token?.name} + {token?.id} {chainTooltipConfig && ( Token address Token pool type Token pool address + Pool version + Custom + Min Blocks required @@ -125,7 +128,7 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) {
{tokenPoolDisplay(network.tokenPoolType)} @@ -136,9 +139,12 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) { network.chainType )(network.tokenPoolAddress)} address={network.tokenPoolAddress} - endLength={6} + endLength={4} /> + TBC + TBC + TBC ) })} diff --git a/src/components/CCIP/Token/Token.astro b/src/components/CCIP/Token/Token.astro index 58071e03c39..5188955f9be 100644 --- a/src/components/CCIP/Token/Token.astro +++ b/src/components/CCIP/Token/Token.astro @@ -171,9 +171,8 @@ const tokenStructuredData = generateTokenStructuredData(token, environment, chai