Repository navigation
Conversation
The wallet logo is a white PNG drawn for the dark theme, so it vanished on the light background. Invert it under .sds-theme-light, and use the standard gray-06 border token instead of gray-01, which was nearly invisible in light mode. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01R8cp43FyfJUF4nMEeZJBEJ
Replace the white ledger-logo.png and the light-theme invert() filter with Ledger's official wordmark as an inline SVG (fill=currentColor), colored with --sds-clr-gray-12 so it follows the theme. walletAssets logos are now SVG React components, and the integration guide says so. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01R8cp43FyfJUF4nMEeZJBEJ
Contributor
|
PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-2ba456b8843f007bc832 |
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
An active accessibility issue remains because the inline SVG label bypasses i18n and requires translated English and Portuguese keys.
1 open issue
What changed in this PR
Updates the hardware-wallet selection UI so the Ledger logo remains visible in both light and dark themes, while documenting the new inline SVG integration pattern.
Changes:
- Replaces the white PNG with a theme-aware inline SVG Ledger wordmark.
- Updates wallet asset typing and selector rendering to use SVG React components.
- Improves option border styling and documents
?reactSVG imports for integrators.
| File | Description |
|---|---|
| extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss | Applies theme-aware logo color, SVG sizing, and a more visible border. |
| extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/index.tsx | Renders the wallet logo as an accessible inline SVG component. |
| extension/src/popup/helpers/hardwareConnect.ts | Imports the Ledger SVG component and updates the wallet asset type. |
| extension/src/popup/assets/ledger-logo.svg | Adds the single-color Ledger wordmark using currentColor. |
| extension/INTEGRATING_HARDWARE_WALLET.MD | Documents theme-aware SVG logo requirements and ?react imports for hardware-wallet integrations. |
Review effort: Lite
Address review feedback: the inline SVG's aria-label was a hard-coded English string. Get it through t() with interpolation and add the English and Portuguese keys. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01R8cp43FyfJUF4nMEeZJBEJ
At 80px wide the logo was 26.77px tall, so its edges sat between pixels and the bottom brackets antialiased to look thinner than the top ones. Pad the viewBox symmetrically to exactly 3:1 and size the logo to 84x28px so opposite strokes land on the pixel grid the same way. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01R8cp43FyfJUF4nMEeZJBEJ
JakeUrban
marked this pull request as ready for review
November 11, 2026 21:31
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
The reviewed changes address theme-aware Ledger logo visibility and localized accessibility labeling across the asset, rendering, styles, translations, and integration documentation, with no active issues identified.
No open issues 🎉
Review effort: Lite
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The Ledger button on "Connect a hardware wallet" now shows its logo in light mode and in dark mode.
Why
The old logo was a white PNG on a transparent background, made for the dark theme. Varial is light-first, so in light mode the button showed white on white. The button looked empty.
Screenshots / video
The new wordmark looks different from the old PNG. The new wordmark is "LEDGER" in capital letters between corner brackets. The old PNG was a block icon and the word "Ledger". The new wordmark is Ledger's official mark. Design can make the final decision.
Generated by Claude Code