From 4a2e6eaddf758bba659a050eb18c10fad77d0784 Mon Sep 17 00:00:00 2001
From: Angela Gilhotra <angelagilhotra@gmail.com>
Date: Tue, 16 Jun 2026 12:11:52 -0400
Subject: [PATCH] fix: inline AddToMetaMask styles so the button renders on
 static deploy

Vocs dev injects component CSS imports as live <style> tags, but the
production build does not reliably extract CSS imported from a component
used only inside MDX. The button therefore showed in `vocs dev` but
rendered unstyled (transparent fill) on docs.stable.xyz.

Move all styling inline (still referencing Vocs theme vars so light/dark
tracking is preserved); drop the now-unused AddToMetaMask.css.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/components/AddToMetaMask.css | 61 -----------------------------
 docs/components/AddToMetaMask.tsx | 65 ++++++++++++++++++++++++++++---
 2 files changed, 59 insertions(+), 67 deletions(-)
 delete mode 100644 docs/components/AddToMetaMask.css

diff --git a/docs/components/AddToMetaMask.css b/docs/components/AddToMetaMask.css
deleted file mode 100644
index 37e4ac1..0000000
--- a/docs/components/AddToMetaMask.css
+++ /dev/null
@@ -1,61 +0,0 @@
-/* Styling for the one-click "Add to MetaMask" buttons.
-   Uses only Vocs theme variables so it tracks the light/dark toggle and the
-   sharp-corner design language (borderRadius zeroed in vocs.config.ts). */
-
-.a2mm {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin: 1rem 0;
-}
-
-.a2mm__item {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.a2mm__btn {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.55rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1;
-  color: var(--vocs-color_backgroundAccentText);
-  background: var(--vocs-color_backgroundAccent);
-  border: 1px solid var(--vocs-color_backgroundAccent);
-  border-radius: var(--vocs-borderRadius_8);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.a2mm__btn:hover {
-  background: var(--vocs-color_backgroundAccentHover);
-  border-color: var(--vocs-color_backgroundAccentHover);
-}
-
-.a2mm__btn:disabled {
-  opacity: 0.6;
-  cursor: progress;
-}
-
-.a2mm__status {
-  font-size: 0.8125rem;
-  color: var(--vocs-color_text3);
-}
-
-.a2mm__status--success {
-  color: var(--vocs-color_successText);
-}
-
-.a2mm__status--error,
-.a2mm__status--no-wallet {
-  color: var(--vocs-color_dangerText);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .a2mm__btn {
-    transition: none;
-  }
-}
diff --git a/docs/components/AddToMetaMask.tsx b/docs/components/AddToMetaMask.tsx
index 660966a..41fc401 100644
--- a/docs/components/AddToMetaMask.tsx
+++ b/docs/components/AddToMetaMask.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import './AddToMetaMask.css'
 
 /* One-click "Add Stable to MetaMask" button.
 
@@ -8,6 +7,13 @@ import './AddToMetaMask.css'
    added, MetaMask shows the native USDT0 balance automatically (no
    `wallet_watchAsset` for a separate ERC-20 is required).
 
+   Styling is inline (not a separate .css import) on purpose: Vocs's production
+   build does not reliably extract CSS imported from a component used only
+   inside MDX, so an imported stylesheet renders in `vocs dev` but vanishes on
+   the static deploy. Inline styles ship with the hydrated component in every
+   environment. Values reference Vocs theme variables so the button still tracks
+   the light/dark toggle.
+
    Network params mirror reference/connect.mdx — keep them in sync. */
 
 type NetworkKey = 'mainnet' | 'testnet'
@@ -57,9 +63,54 @@ function statusText(status: Status): string {
   }
 }
 
+const wrapStyle: React.CSSProperties = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '0.75rem',
+  margin: '1rem 0',
+}
+
+const itemStyle: React.CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '0.5rem',
+}
+
+function buttonStyle(hover: boolean, disabled: boolean): React.CSSProperties {
+  return {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '0.55rem 1rem',
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    lineHeight: 1,
+    color: 'var(--vocs-color_backgroundAccentText)',
+    background: hover
+      ? 'var(--vocs-color_backgroundAccentHover)'
+      : 'var(--vocs-color_backgroundAccent)',
+    border: '1px solid var(--vocs-color_backgroundAccent)',
+    borderRadius: 'var(--vocs-borderRadius_8)',
+    cursor: disabled ? 'progress' : 'pointer',
+    opacity: disabled ? 0.6 : 1,
+    transition: 'background-color 0.15s ease',
+  }
+}
+
+function statusStyle(status: Status): React.CSSProperties {
+  const color =
+    status === 'success'
+      ? 'var(--vocs-color_successText)'
+      : status === 'error' || status === 'no-wallet'
+        ? 'var(--vocs-color_dangerText)'
+        : 'var(--vocs-color_text3)'
+  return { fontSize: '0.8125rem', color }
+}
+
 function AddButton({ network }: { network: NetworkKey }) {
   const [status, setStatus] = useState<Status>('idle')
+  const [hover, setHover] = useState(false)
   const params = NETWORKS[network]
+  const disabled = status === 'pending'
 
   async function add() {
     // `ethereum` is injected by MetaMask (and most EVM wallets) on the client.
@@ -90,18 +141,20 @@ function AddButton({ network }: { network: NetworkKey }) {
   }
 
   return (
-    <span className="a2mm__item">
+    <span style={itemStyle}>
       <button
         type="button"
-        className="a2mm__btn"
+        style={buttonStyle(hover && !disabled, disabled)}
         onClick={add}
-        disabled={status === 'pending'}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        disabled={disabled}
         aria-label={`Add Stable ${params.label} to MetaMask`}
       >
         Add Stable {params.label}
       </button>
       {status !== 'idle' && (
-        <span className={`a2mm__status a2mm__status--${status}`} role="status">
+        <span style={statusStyle(status)} role="status">
           {statusText(status)}
         </span>
       )}
@@ -111,7 +164,7 @@ function AddButton({ network }: { network: NetworkKey }) {
 
 export function AddToMetaMask() {
   return (
-    <div className="a2mm">
+    <div style={wrapStyle}>
       <AddButton network="mainnet" />
       <AddButton network="testnet" />
     </div>