Files

Deploy Staging (terry-wallet-login) / deploy (push) Failing after 33s

Details

feat(wallet): swap CTA glyph to Figma 4414-12829 filled wallet icon

The 链接钱包 CTA was using the lucide outline Wallet icon. Replace it
with a local WalletIcon component built from the exact Figma path
(filled body, currentColor fill) so the icon paints in dark on the
yellow CTA, matching Figma's #08070C fill via the button's text-black
utility.

2026-06-03 21:59:38 +08:00

1.7 KiB

Raw Blame History

title, type, date

title	type	date
Wallet CTA — swap lucide outline for Figma filled glyph	quick-fix	2026-06-03

Wallet CTA — swap lucide outline for Figma filled glyph

Bug

The 链接钱包 CTA in the mobile drawer (and in the header on desktop while logged out) was using the Wallet outline icon from lucide-react, which doesn't match the filled wallet glyph in Figma 4414:12829.

Root Cause

WalletButton imported lucide-react's outline Wallet and rendered it with strokeWidth={2.5}. Figma's wallet glyph is a solid filled shape with a dot, not an outline.

Fix

Created a local WalletIcon component from the exact Figma 24x24 path. The path uses fill="currentColor" so callers control the paint via Tailwind text-… utilities (currently text-black on the yellow CTA, matching Figma's #08070C fill).

Files Modified

src/components/icons/WalletIcon.tsx (new) — Figma 4414:12829 path as a React SVG component.
src/wallet/WalletButton.tsx — drop the Wallet import from lucide-react, import WalletIcon, render it at h-[18px] w-[18px] to match the Figma 18x18 inner glyph size inside the 24x24 icon slot.

Verification

npx tsc --noEmit — clean.
npm run format then npm run format:check — clean.
npm test — 49/49 passing.
Expected visual: yellow 链接钱包 CTA now shows the filled Figma wallet glyph in dark (text-black resolves currentColor), matching the design.

Notes

currentColor keeps the icon themable. If a future surface needs the wallet glyph in gold or white, the caller just changes the parent text-… utility.
The lucide Wallet import was removed from WalletButton.tsx; Heart stays because the wallet dropdown still uses it for the favorites entry.

1.7 KiB Raw Blame History