31 lines
1.7 KiB
Markdown
31 lines
1.7 KiB
Markdown
|
---
|
||
|
|
title: "Wallet CTA — swap lucide outline for Figma filled glyph"
|
||
|
|
type: quick-fix
|
||
|
|
date: 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.
|