Onboarding: tighten Figma fidelity across the flow - #3068
Merged
Conversation
Row cards (co-insured, pet ID): row title to 14sp label, secondary line to translucent secondary, drop the shadow the design does not have. Add-info-later helpers: 14sp label + translucent (were 12sp finePrint). Theme: option subtitle and bottom caption to translucent secondary. Bundle: 8dp vertical row padding so pillow-to-pillow spacing matches the design without breaking the equal-height/wrap layout; subtitle translucent. Invite: card corner 24dp, card width 62%, en dash on the incentive. Payment: footnote to translucent secondary.
Co-insured step: rows now summarise their people instead of the exposure name. Widen the Onboarding query to fetch coInsured/coOwner firstName, carry per-contract counts and names through OnboardingData and CoInsuredRow, and render a count while info is still missing, switching to the names once the row is complete (matching the two design states). The shared contract card's secondary slot is renamed secondaryText; pet ID keeps passing the pet name. Connect-payment: bank card to 24dp corners, serif "Bank" label, and a dashed border (new local dashedBorder modifier), matching the design. The "N co-insured"/"N co-owners" count is hardcoded English with a Lokalise TODO, since no count string exists yet.
'1 co-owner' instead of '1 co-owners' in the hardcoded count fallback. The Lokalise plural string (still a TODO) will supersede this.
Replace the hardcoded English count fallback with the ONBOARDING_NUMBER_OF_COINSURED / ONBOARDING_NUMBER_OF_COOWNERS plurals (correct singular/plural per language), and the hardcoded "Bank" with ONBOARDING_CONNECT_PAYMENT_BANK_LABEL.
StylianosGakis
marked this pull request as ready for review
August 20, 2026 07:53
panasetskaya
approved these changes
Aug 20, 2026
Lokalise switched the ONBOARDING_NUMBER_OF_COINSURED / _COOWNERS plural
placeholder from %s to %d (needed for iOS). Works on Android too: the count is
passed as an Int to pluralStringResource, so %d formats it correctly. Verified
live ("1 co-owner").
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.
What
Tightens the onboarding flow's fidelity to the updated Figma ("App P2 2026"), after a screen-by-screen comparison. Mostly typography, spacing, and token corrections, plus two content/behaviour changes on the co-insured and connect-payment steps.
Changes
Shared step card (
OnboardingContractCard, used by co-insured + pet ID)label), secondary line →textSecondaryTranslucent, and dropped the shadow the design doesn't have.exposureNameparam tosecondaryText.Co-insured step
Onboardingquery withcoInsured/coOwners.firstName(no backend change) and carrying counts + names throughOnboardingData→ repository →CoInsuredRow.ONBOARDING_NUMBER_OF_COINSURED/ONBOARDING_NUMBER_OF_COOWNERSplurals (correct singular/plural per language).Connect payment
dashedBordermodifier), and the "Bank" label in the serif face viaONBOARDING_CONNECT_PAYMENT_BANK_LABEL.Other steps
textSecondaryTranslucent, helper sizefinePrint→label.Deliberately NOT changed (iOS-only styling, accepted by design)
Verification
:feature-onboardingunit tests green.Notes
dashedBorderis local to the payment file; can be promoted to the design system if reused.