Skip to content

fix: align onboarding slides layout with ios#904

Open
jvsena42 wants to merge 5 commits intomasterfrom
fix/slides-polish
Open

fix: align onboarding slides layout with ios#904
jvsena42 wants to merge 5 commits intomasterfrom
fix/slides-polish

Conversation

@jvsena42
Copy link
Copy Markdown
Member

@jvsena42 jvsena42 commented Apr 23, 2026

This PR polishes the onboarding slides and Create Wallet screen to match the bitkit-ios layout.

Description

  1. Caps the slide and Create Wallet image at 311x311 (was filling the full width), centered horizontally to match iOS
  2. Replaces the Box + hardcoded padding(top = 125.dp) layout with a Column using a top weighted Spacer so the image is bottom-weighted like iOS
  3. Sets the gap between image and title to 48dp (matching iOS padding(.top, 48)) and the title-to-body gap to 14dp (was 8dp)
  4. Reserves a 255dp minimum height for the text block on each slide so there is breathing room above the page dots, matching iOS minHeight: 255
  5. Styles the disclaimer with White32 and a 4dp top gap, matching iOS CaptionText
  6. Removes the hardcoded 16dp bottom padding / 16dp height container around the dots so they sit at the bottom of the safe area like iOS
  7. Keeps the existing active/inactive dot size animation (10dp vs 7dp) and the last-page fade-out transition

Preview

android.webm
ios.mp4

QA Notes

  1. Launch a fresh onboarding flow and advance through slides 0, 1, 2
    • Verify each image is capped at 311x311dp and centered (not stretched full width)
    • Verify there is clear breathing room between the body text and the page dots at the bottom
    • Verify the title-to-body gap looks slightly larger than before
  2. On Slide 1, confirm the disclaimer text (when geo-blocked) renders in White32 with a small gap below the body text
  3. Verify the page dots
    • Active dot animates to ~10dp, inactive dots ~7dp
    • Dots sit at the bottom safe-area and are no longer pushed up by the old 16dp padding
    • On transition to the last page (Create Wallet), the dots fade and slide out
  4. On the Create Wallet screen
    • Verify the wallet image is 311x311dp and centered
    • Verify the header + body copy spacing matches iOS (14dp between title and body)
    • Verify the 32dp gap before the Create / Restore button row and the 16dp bottom gap
    • Tap Advanced Setup in the top bar and confirm the passphrase flow still opens
  5. Verify on a small device (e.g. NEXUS_5 preview) the layout still looks correct (image scales down, text block does not collide with dots)

Comment thread app/src/main/java/to/bitkit/ui/onboarding/CreateWalletScreen.kt Outdated
Comment thread app/src/main/java/to/bitkit/ui/onboarding/CreateWalletScreen.kt Outdated
Comment thread app/src/main/java/to/bitkit/ui/onboarding/CreateWalletScreen.kt Outdated
Comment thread app/src/main/java/to/bitkit/ui/onboarding/OnboardingSlidesScreen.kt Outdated
Comment thread app/src/main/java/to/bitkit/ui/onboarding/OnboardingSlidesScreen.kt Outdated
Comment thread app/src/main/java/to/bitkit/ui/onboarding/OnboardingSlidesScreen.kt Outdated
@jvsena42 jvsena42 self-assigned this Apr 23, 2026
@jvsena42 jvsena42 enabled auto-merge April 24, 2026 17:32
@jvsena42 jvsena42 requested a review from ovitrif April 24, 2026 17:33
piotr-iohk
piotr-iohk previously approved these changes Apr 27, 2026
Copy link
Copy Markdown
Collaborator

@piotr-iohk piotr-iohk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, tested on "Small device" emulator. Looking good!

contentAlignment = Alignment.TopCenter,
modifier = modifier.fillMaxSize()
Column(
modifier = modifier.fillMaxSize(),
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing comma on modifier = ... at a call site violates the CLAUDE.md rule:

NEVER add a trailing comma to modifier = ... at call sites

Context:

) {
Column(
modifier = modifier.fillMaxSize(),
) {
FillHeight()

Suggested change
modifier = modifier.fillMaxSize(),
modifier = modifier.fillMaxSize()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants