diff --git a/src/components/provider-logo.tsx b/src/components/provider-logo.tsx index 0f4c4d6e..be5d683d 100644 --- a/src/components/provider-logo.tsx +++ b/src/components/provider-logo.tsx @@ -32,11 +32,27 @@ export function ProviderLogo({ return ; } - // A handful of brand marks are dark-on-transparent and disappear on the - // dark-mode page background. Force a white coaster + thin ring for those - // specific slugs so they stay legible without altering the look of every - // other (already-colored) logo. - const needsLightChip = NEEDS_LIGHT_CHIP.has(slug.toLowerCase()); + // Brand marks come in two failure modes against our page background: + // • dark-on-transparent → invisible on dark-mode page → light chip + // • white-on-transparent → invisible on white light-mode page → dark chip + // Each problematic slug is opted in to ONE of the two sets below. Logos + // with proper colored fills (Helius orange, GeckoTerminal purple, …) + // need neither and ride the default transparent paper background. + const lc = slug.toLowerCase(); + const needsLightChip = NEEDS_LIGHT_CHIP.has(lc); + const needsDarkChip = NEEDS_DARK_CHIP.has(lc); + let background: string; + let boxShadow: string | undefined; + if (needsDarkChip) { + background = "#0f172a"; + boxShadow = "0 0 0 1px rgba(15, 23, 42, 0.18)"; + } else if (needsLightChip) { + background = "#ffffff"; + boxShadow = "0 0 0 1px rgba(15, 23, 42, 0.08)"; + } else { + background = "var(--color-paper)"; + boxShadow = undefined; + } return ( // eslint-disable-next-line @next/next/no-img-element @@ -53,13 +69,15 @@ export function ProviderLogo({ width: size, height: size, borderRadius: "50%", - background: needsLightChip ? "#ffffff" : "var(--color-paper)", - boxShadow: needsLightChip ? "0 0 0 1px rgba(15, 23, 42, 0.08)" : undefined, + background, + boxShadow, }} /> ); } +// Dark-tone (or dark-on-transparent) logos — get a WHITE chip with a +// hairline shadow so they pop on both light and dark page backgrounds. const NEEDS_LIGHT_CHIP = new Set([ "mobula", "lighter", @@ -68,22 +86,25 @@ const NEEDS_LIGHT_CHIP = new Set([ "relay", "debridge", "tonapi", - // Dark/single-tone logos that need a white chip to read on the page bg: "1rpc", "blocknative", "lava", "tenderly", - "jito", - "astralane", - "dydx", - "sky", - // Dark-tone logos that vanish on the dark-mode page bg (the white chip - // gives them a visible surface in both light and dark modes): "merkle", "moralis", "nodies", ]); +// White-on-transparent logos — invisible on a white chip. They get a +// near-black chip so the white artwork pops. Verified via SVG fill audit +// (fill="white" present in the brand mark). +const NEEDS_DARK_CHIP = new Set([ + "jito", + "astralane", + "sky", + "dydx", +]); + function Chip({ slug, name,