feat(add-funds): refresh the add funds screen - #2932
Open
CassioMG wants to merge 7 commits into
Open
Conversation
Contributor
|
PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-8a5966ac86786cec1946 (SDF collaborators only — install instructions in the release description) |
Align the Add funds option cards with the refreshed design:
- Drop the View content top padding so the first card sits 40px below
the screen title instead of 64px.
- Space the card icon 12px from the title. The previous margin-top was
dead code: SDS ships `div.Text{margin:0}`, whose element+class
specificity outranks a lone class selector, so use flex `gap` on the
card and a wrapper for the title/subtitle pair instead.
- Set the title to Medium (was semi-bold) and the subtitle to xs (12px,
was 14px).
- Shrink the QR glyph to 16px and center it in a 24px lilac circle with
a lilac border.
Regenerate the buyWithOnramp e2e snapshots for the new layout.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Refreshes the Add Funds screen as part of the broader Home redesign.
Changes:
- Restyles funding option cards and header.
- Updates Coinbase and transfer copy while preserving XLM-specific text.
- Adds locale keys and regenerates visual snapshots.
Reviewed changes
Copilot reviewed 4 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
AddFunds/index.tsx |
Updates layout, header icon, and copy. |
AddFunds/styles.scss |
Applies refreshed card styling. |
locales/en/translation.json |
Adds English copy keys. |
locales/pt/translation.json |
Adds Portuguese locale entries. |
add-xlm-page-darwin.png |
Updates XLM visual baseline. |
add-xlm-page-chromium-darwin.png |
Updates Chromium XLM baseline. |
buy-with-coinbase-darwin.png |
Updates Add Funds visual baseline. |
buy-with-coinbase-chromium-darwin.png |
Updates Chromium Add Funds baseline. |
Suppressed comments (1)
extension/src/popup/locales/pt/translation.json:726
- This Portuguese-locale entry is still English, so the refreshed Coinbase card remains partially untranslated for
ptusers. Add the Portuguese value required for every new user-facing string.
"Transfer from Coinbase & other options": "Transfer from Coinbase & other options",
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
The card subtitle was added as an English placeholder and was rendering untranslated in pt. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
Author
Code reviewNo issues found. Checked for bugs and CLAUDE.md compliance. 🤖 Generated with Claude Code - If this code review was useful, please react with 👍. Otherwise, react with 👎. |
The restructured option cards no longer render the header subtitle, the footnote, or the old "send funds" copy, so these keys are unreferenced: - "* payment methods may vary based on your location" - "Choose your method" - "Send funds to this account address" - "Transfer from Coinbase, buy with debit and credit cards or bank transfer *" Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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.
Part of the Home refresh project.
What changed
The Add funds screen, per Figma frame
9593-26775:Xclose icon, and the "Choose your method" subtitle is removed.* payment methods may vary based on your locationfootnote is removed — and so is the*in the Coinbase description that referenced it. Leaving an orphaned asterisk with no footnote would have been worse than either state.Both
?isAddXlm=trueand default modes keep their distinct copy.🤖 Generated with Claude Code