feat(wallet): swap CTA glyph to Figma 4414-12829 filled wallet icon
Some checks failed
Deploy Staging (terry-wallet-login) / deploy (push) Failing after 33s
Some checks failed
Deploy Staging (terry-wallet-login) / deploy (push) Failing after 33s
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.
This commit is contained in:
30
.unipi/docs/fix/2026-06-03-wallet-icon-figma-fix.md
Normal file
30
.unipi/docs/fix/2026-06-03-wallet-icon-figma-fix.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
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.
|
||||
Reference in New Issue
Block a user