feat(home): refresh home screen chrome - #2936
Open
CassioMG wants to merge 18 commits into
Open
Conversation
…e screen Hand-added the new "Add collectible", "Add token", "Show hidden", "View history", and helper-copy translation keys to en/pt directly -- yarn build:extension:translations is broken on master (I18nextWebpackPlugin is not a constructor). Also drops autoFocus from the collection-address field: with it focused on mount, the first click anywhere else blurs it and Formik's validation error shifts the layout down between mousedown and mouseup, so a first click on the new Show hidden button (or any control in that area) can land under the wrong element. Confirmed by instrumenting the click in a throwaway e2e run: the handler never fired with a real (non-forced) click until autoFocus was removed.
--update-snapshots=all only regenerated add-collectible-page-chromium- darwin.png; the project has a `name` field so Playwright never writes the plain -darwin.png variant. Both are the same chromium/darwin capture, so the plain file is synced to match byte-for-byte after visually confirming the regenerated PNG. Both were inspected: X close icon, Show hidden link, and helper text render correctly with no other regressions. Also noticed the prior checked-in snapshot was already stale on master (old "Collectible address" placeholder copy and a paste-icon affordance neither exists in current source) -- unrelated pre-existing drift that this regeneration incidentally corrects.
Task 7's full e2e pass caught a real click-interception bug: accountHistory.test.ts "Orders failed transactions..." clicks the USDC row after returning to the Tokens tab, and with only two balances the last row sits where the absolutely-positioned FloatingAddButton is pinned, so the pill silently ate the click (Playwright reported the row's own click as intercepted by the pill's subtree). Reserving bottom padding on the sliding pane so real content never renders underneath the pill fixes it for both the Tokens and Collectibles panes without touching accountHistory.test.ts.
Contributor
|
PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-07d8a15ec9a17bc64134 (SDF collaborators only — install instructions in the release description) |
Brings the Home screen chrome to parity with the Figma design (node 9567:17044), plus the empty-state and list frames (9569:38124, 9569:37947). Styling: - Top nav: all three icon buttons now render 16px white icons. They were inconsistent because the size override keyed off `AccountHeader__dropdown`, which the history button isn't wrapped in, leaving it at the SDS NavButton default of 20px while its neighbours sat at 12px. Styling now hangs off the shared `__icon-btn__left` row. - Account row: 16px avatar on gray-03 with no border (was 24px bordered), 12px gray-09 chevron, 6px gap. - Action tiles: fill the row, no border, 78px tall, 24px lilac-11 icons. Three separate rules were keeping them from stretching -- the NavLink grid item, the tile inside it, and `__account-info__details`, which is content-sized under `justify-content: space-around`. Swap glyph switched to RefreshCw02 to match the design. - Dropped the divider under the tab row. - Action labels are 12px per Figma's Text/XS/500 (were 14px). - Added a hover highlight on the action tiles (gray-03 -> gray-04), matching the convention already used by `AccountHeader__options__item`. Spacing, all measured in a 360x600 render against the Figma node geometry: - Nav buttons -> account row: 24px -> 48px. - Tab strip -> panes: `AccountTabs` had 12px of bottom padding that double-counted against each pane's own top offset, pushing all four panes 12px low. Removing it corrects the token list, collectibles list and both empty states at once. Both empty states also needed their own trims and now land at the same offset, so switching tabs no longer shifts them. - Floating pill: 16px -> 24px from the bottom. The floating pill also needed a positioning fix. It was `position: absolute` inside the scrolling inset, so it rode along with the list. Home has no inner scroll container at all -- `.View--scrollable` resolves to `height: auto` against an unsized body, so `.View` grows and the document scrolls -- which means re-parenting alone wasn't enough. It is now rendered outside `View.Content` and pinned with `position: fixed`. Verified: window scrolled 500px, pill unmoved. Weights use `--sds-fw-*`; the `--font-weight-*` custom properties these files previously referenced are undefined and silently resolved to inherit. The repo-wide cleanup is #2946. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…tible - Tiles -> tab strip is 28px where Figma (9567:17044) has 24px: the Balance frame closes with 24px and the tab strip adds nothing, but we were stacking `__actions` padding-bottom (16px) on `AccountTabs` padding-top (12px). `AccountTabs` is now flush and the 24px is owned solely by the tiles, which also matches how the 24px below the strip is owned by the panes. Measured with the MobileAppBanner dismissed, since Figma has no banner. - The floating pill's "+" rendered at 1.33px, not the 2px Figma draws. SDS icons carry a 24x24 viewBox, so a 16px box scales strokes by 2/3 and the authored `stroke-width: 2` shrinks. Authoring 3 renders as 2px. (Computed style reports the authored value, so this is invisible unless you account for the viewBox.) - Added a hover highlight to the floating pill, matching the action tiles. - Add Collectible: autofocus the Collection address input on open, and give the content inset the existing `hasTopInput` variant instead of `hasNoTopPadding` so the input's 4px focus ring isn't clipped by the zero-padding inset. - "Show hidden" now renders at its intended 500 weight. It asked for `--font-weight-medium`, which is undefined and silently resolved to inherit; the same applied to the helper text below it. See #2946 for the repo-wide sweep -- these two sites aren't on that branch. Verified in a 360x600 render: tiles -> tabs 24px, tabs -> first row box 12px, pill 24px off the bottom and its glyph stroke rendering at exactly 2px, pill hover transitioning, address input holding focus on mount, its focus ring clearing the inset by 4px, and "Show hidden" computing to 500 / lilac-11. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The previous commit set `stroke-width: 3` on the floating pill's svg to get Figma's 2px stroke out of a 24x24 viewBox rendered at 16px. It had no effect. SDS ships icons through SVGR, so the rendered DOM is the raw file and the `<path>` keeps its own `stroke-width="2"` presentation attribute. Presentation attributes lose to any CSS rule that matches the element, but they beat a value inherited from an ancestor -- so a rule on the `<svg>` never reaches the path. Targeting `svg path` fixes it: computed stroke-width on the painted element goes from 2 to 3, which at the 2/3 viewBox scale renders as 2px. Worth noting the earlier verification missed this because it read `getComputedStyle(svg)`, the ancestor, which reported the value that was being set and ignored. Reading the path shows the value actually painted. Also converts the action tiles' `stroke-width: 2` to target the path. That one was dead for the same reason, but harmlessly so -- the path's own attribute is already 2, and at a 24px box that is the 2px Figma draws -- so this is a no-op that stops the declaration from looking load-bearing. `stroke` (colour) is unaffected throughout: the paths carry no `stroke` attribute of their own, so they inherit it from the svg as intended. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
…ate CTA The Freighter Mobile banner carried `margin-left: -16px`, `margin-right: 32px` and `width: calc(100% + 32px)`, which pushed it 16px past the content column on both sides -- visibly wider than the action tiles, tab strip and token rows above and below it. Those offsets predate `AccountHeader__account-info__details` gaining `width: 100%`. Back when that box was content-sized under `justify-content: space-around`, the negative margin was compensating for its inset; now it just overhangs. Dropping all three lets the banner stretch to its parent. Measured at 360x600, the banner now spans left 24 / right 336, matching the token rows exactly and the tiles to within the sub-pixel rounding of their `1fr` grid. Also on the unfunded Tokens empty state: - "Add XLM" goes from the SDS Button default of semi-bold (600) to medium (500). - "Add XLM" goes from size md to lg. Verified against a real unfunded render: the empty-state badge sits 24px below the tab strip per Figma -- the one spacing target from the previous commits that had not been confirmed on an actual unfunded account, only derived -- and the button computes to font-weight 500. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Reverts the medium (500) weight from the previous commit; the empty-state CTA reads better at semi-bold (600). Kept as an explicit declaration rather than deleting the rule so the intended weight stays stated at the call site. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Autofocusing the first field meant that tapping "Show hidden" blurred it, which marked it touched and surfaced "Collection address is required" -- so reaching hidden collectibles always went via a validation error the user had not caused. The `hasTopInput` padding on View.Content stays: the focus ring still needs the clearance once the field is focused by hand. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Refreshes the Home screen chrome and relocates hidden-collectible management.
Changes:
- Reworks header actions, history placement, and tabs.
- Adds contextual floating token/collectible actions.
- Moves hidden collectibles to the Add Collectible screen.
Reviewed changes
Copilot reviewed 18 out of 20 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
extension/src/popup/views/AddCollectibles/styles.scss |
Styles helper text and hidden-items action. |
extension/src/popup/views/AddCollectibles/index.tsx |
Adds hidden-collectibles access and revised header. |
extension/src/popup/views/Account/styles.scss |
Reserves space for the floating action. |
extension/src/popup/views/Account/index.tsx |
Renders the contextual add button. |
extension/src/popup/locales/pt/translation.json |
Adds Portuguese translations. |
extension/src/popup/locales/en/translation.json |
Adds English translation keys. |
extension/src/popup/components/account/NotFundedMessage/styles.scss |
Updates empty-state spacing and typography. |
extension/src/popup/components/account/NotFundedMessage/index.tsx |
Enlarges the funding action. |
extension/src/popup/components/account/MobileAppBanner/styles.scss |
Aligns the banner with the refreshed layout. |
extension/src/popup/components/account/FloatingAddButton/styles.scss |
Styles the floating add pill. |
extension/src/popup/components/account/FloatingAddButton/index.tsx |
Routes contextual token or collectible actions. |
extension/src/popup/components/account/AccountTabs/styles.scss |
Implements the simplified tab appearance. |
extension/src/popup/components/account/AccountTabs/index.tsx |
Removes the asset-management dropdown. |
extension/src/popup/components/account/AccountHeader/styles.scss |
Refreshes header, balance, and action-row styling. |
extension/src/popup/components/account/AccountHeader/index.tsx |
Moves history and reduces actions to three columns. |
extension/src/popup/components/account/AccountCollectibles/styles.scss |
Adjusts collectible empty-state spacing. |
extension/e2e-tests/hideCollectible.test.ts |
Updates hidden-collectible navigation tests. |
extension/e2e-tests/addCollectible.test.ts |
Updates collectible-add navigation coverage. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
…dd pill Addresses both Copilot review comments on #2936. Show hidden was a bare `div` with only an `onClick`: not focusable, no button semantics, and inert to Enter/Space, so hidden collectibles were unreachable without a pointer. It is now a `<button type="button">` with the native chrome stripped, following the reset already used by `AccountCollectibles__header`. `font: inherit` is ordered before the type-specific declarations so those still win, and `display: block` preserves the div's layout -- the button default of inline-block would add baseline leading beneath it. Verified by keyboard: the control is reachable with Tab and Enter opens the panel. Worth noting eslint could not have caught this. `eslint-plugin-jsx-a11y` is registered in eslint.config.js but no preset is spread and no rule is enabled, so none of its checks actually run. The Tokens tab's floating add pill also had no e2e coverage -- `add-token-btn` appeared nowhere under e2e-tests, while the collectibles branch of the same component was covered. `addAsset.test.ts` reaches asset search through the options menu, so a broken pill would not have failed anything. Adds two tests: the pill renders on a funded Tokens tab and routes to asset search, and it is absent for an unfunded account, where the empty state carries its own "Add XLM" action instead. 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 |
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. This is the Home screen's chrome — header, action row, tab row, and the new floating "+ Add token/collectible" buttons.
What changed
Per Figma frames
9567-17044(Home) and9673-19461(Add Collectible):…button and the network globe. The order is now options → history → network.Sliders01manage button and its whole dropdown are deleted.Xheader icon.home-chrome-720p.mov
Analytics
Unchanged.
history.full_history_openedmoved position but kept its event name andsource: "account_header"verbatim — still accurate, since both the old and new positions are in the header.Note "Manage tokens" is not orphaned by deleting the tab dropdown: the
…menu already routes toROUTES.manageAssets.Also removed a genuinely dead
isIncludingIconsprop fromTabButtons— its JSDoc claimed it was "used in Send flow", but a grep acrosssrcande2e-testsfinds no consumer.Verification
yarn test:ci— 1520/1571 tests, identical to baselineyarn build:extension— cleanaccountHistory(11 passed, unedited),addCollectible,hideCollectible,loadAccount,addAsset— all greenadd-collectible-pagesnapshots regenerated and visually inspected🤖 Generated with Claude Code