Add AddButton component and integrate it into Chain and CCIP landing pages; include add icon SVG and update theme styles for consistency

Author: markshenouda

public/assets/icons/add.svg

@@ -0,0 +1,42 @@
+---
+export interface Props {
+  href: string
+  text: string
+}
+
+const { href, text } = Astro.props
+---
+
+<a class="add-button" href={href}>
+  <img src="/assets/icons/add.svg" alt="Add" class="add-button-icon" />
+  {text}
+</a>
+
+<style>
+  .add-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: var(--space-2x) var(--space-4x);
+    border: 1px solid var(--tertiary-border);
+    border-radius: 4px;
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    color: var(--tertiary-foreground);
+    text-decoration: none;
+    background-color: transparent;
+    transition: all 0.2s ease;
+  }
+
+  .add-button:hover {
+    background-color: var(--gray-100);
+    border-color: var(--gray-400);
+  }
+
+  .add-button-icon {
+    width: 12px;
+    height: 12px;
+  }
+</style>

src/components/CCIP/AddButton/AddButton.astro

@@ -17,6 +17,7 @@ import ChainTokenGrid from "./ChainTokenGrid"
 import { generateChainStructuredData } from "~/utils/ccipStructuredData"
 import StructuredData from "~/components/StructuredData.astro"
 import { DOCS_BASE_URL } from "~/utils/structuredData"
+import AddButton from "~/components/CCIP/AddButton/AddButton.astro"
 
 interface Props {
   environment: Environment
@@ -128,14 +129,7 @@ const chainStructuredData = generateChainStructuredData(
         <h2>Tokens <span>({allTokens.length})</span></h2>
         {
           network.chainType !== "solana" && network.chainType !== "aptos" && (
-            <a class="button secondary" href="/ccip/tutorials/evm/token-manager#verifying-your-token">
-              <img
-                src="/assets/icons/plus.svg"
-                alt="Add"
-                style={{ width: "1em", height: "1em", marginRight: "0.5em", verticalAlign: "middle" }}
-              />
-              Add my token
-            </a>
+            <AddButton href="/ccip/tutorials/evm/token-manager#verifying-your-token" text="Add my token" />
           )
         }
       </div>

src/components/CCIP/Chain/Chain.astro

@@ -18,6 +18,7 @@ import LazyVerifierGrid from "../VerifierGrid/LazyVerifierGrid"
 import StructuredData from "~/components/StructuredData.astro"
 import { generateDirectoryStructuredData } from "~/utils/ccipStructuredData"
 import { DOCS_BASE_URL } from "~/utils/structuredData"
+import AddButton from "~/components/CCIP/AddButton/AddButton.astro"
 
 export type Props = {
   environment: Environment
@@ -82,7 +83,7 @@ const directoryStructuredData = generateDirectoryStructuredData(environment, net
     <div>
       <div class="ccip-heading">
         <h2>Tokens <span>({allTokens.length})</span></h2>
-        <a class="button secondary" href="/ccip/tutorials/evm/token-manager#verifying-your-token">Add my token</a>
+        <AddButton href="/ccip/tutorials/evm/token-manager#verifying-your-token" text="Add my token" />
       </div>
       <LazyTokenGrid tokens={allTokens} environment={environment} client:visible />
     </div>
@@ -139,7 +140,7 @@ const directoryStructuredData = generateDirectoryStructuredData(environment, net
       --doc-padding: var(--space-10x);
       padding-top: var(--doc-padding);
       padding-bottom: var(--doc-padding);
-      gap: var(--space-24x);
+      gap: var(--space-10x);
     }
   }
 </style>

src/components/CCIP/Landing/ccip-landing.astro

@@ -44,6 +44,10 @@
   --color-gray-90: var(--color-base-gray), 90%;
   --color-gray-95: var(--color-base-gray), 95%;
 
+  /* Tertiary color aliases (matches design system) */
+  --tertiary-border: #d1d6de;
+  --tertiary-foreground: #0e1119;
+
   --color-blue: var(--color-base-blue), 61%;
   --color-blue-dark: var(--color-base-blue-dark), 39%;
   --color-green: var(--color-base-green), 42%;