Conversation
dschom
force-pushed
the
FXA-14234
branch
4 times, most recently
from
August 1, 2026 01:44
e9640ad to
f0a176b
Compare
dschom
commented
Aug 3, 2026
dschom
commented
Aug 3, 2026
dschom
commented
Aug 3, 2026
dschom
commented
Aug 3, 2026
dschom
commented
Aug 3, 2026
Because: - After scanning the pairing QR code on their computer, users on mobile need a screen that tells them the sign-in still has to be approved on the computer, and that shows the requesting device's details so they can confirm the request is really theirs before pairing completes. This commit: - Adds `packages/fxa-settings/src/pages/Pair2/Supplicant/ApproveSignIn/index.tsx`, a presentational card rendering the Firefox brand logo, a desktop/mobile sync illustration, the heading and instruction copy, the device info block, and a Cancel action. It supplies its own card surface rather than using `AppLayout`, per the Pair2 mobile designs. `onCancel` is a required prop so that routing the card cannot leave its only action inert; the flow logic lands with the route. - Adds `device-info-lines.ts`, which selects the Fluent message for each line of the device info block as a pure function so the device-name/OS fallback and the five geo-resolution permutations are unit tested without rendering. The location and IP lines reuse the shipped `device-info-block-*` messages, so only the browser-on-device string is new. - Adds `en.ftl` with the new strings, `index.stories.tsx` with four stories covering the device-name, OS-fallback, unknown-location, and long-device-name cases, and tests for the component and the message selection. The component suite asserts wiring and runs `testAllL10n` against the bundle to catch drift between fallback text and the Fluent messages; the permutations live in the pure-function suite. - Exports `firefox-brand-logo.svg` and `sync-devices.svg` from Figma. The sync illustration is cropped to its visible bounds so it centres correctly, and the browser-tab favicon it embedded at 1046x1081 for a ~3px render is downscaled, taking the asset from 946KB to 58KB. Closes #FXA-14234
bcolsson
approved these changes
Aug 3, 2026
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
2 participants
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.
Because
This pull request
packages/fxa-settings/src/pages/Pair2/Supplicant/ApproveSignIn/index.tsx.Issue that this pull request solves
Closes: FXA-14234
Checklist
Put an
xin the boxes that applyHow to review (Optional)
Check out the storybook output here. Compare against figma designs (linked in ticket). Check out code for AI slop and over all adherence to patterns set forth in FxA.
Note, that this is just UI work, wiring up functionality comes later.
Screenshots (Optional)
See story books.
Other information (Optional)
This is the initial PR. Other PRs will be based on it, so any nits or gripes should be addressed here, so that other PRs can take them into consideration.