fix: align onboarding slides layout with ios

app/src/main/java/to/bitkit/ui/onboarding/CreateWalletScreen.kt

@@ -2,13 +2,12 @@ package to.bitkit.ui.onboarding
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -39,57 +38,59 @@ fun CreateWalletScreen(
     onRestoreClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Box(
-        contentAlignment = Alignment.TopCenter,
+    Column(
         modifier = modifier
             .screen(insets = null)
+            .fillMaxSize()
     ) {
+        FillHeight()
+
         Image(
             painter = painterResource(id = R.drawable.wallet),
             contentDescription = null,
             contentScale = ContentScale.Fit,
             modifier = Modifier
-                .padding(top = 125.dp)
-                .fillMaxWidth()
+                .align(Alignment.CenterHorizontally)
+                .sizeIn(maxWidth = 311.dp, maxHeight = 311.dp)
         )
+
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .align(Alignment.BottomCenter)
+                .padding(top = 48.dp)
         ) {
-            FillHeight()
             Display(text = stringResource(R.string.onboarding__slide4_header).withAccent())
-            VerticalSpacer(8.dp)
+            VerticalSpacer(14.dp)
             BodyM(
                 text = stringResource(R.string.onboarding__slide4_text).withAccent(
                     defaultColor = Colors.White64,
                     accentStyle = SpanStyle(fontWeight = FontWeight.Bold, color = Colors.White),
                 ),
             )
+        }
 
-            VerticalSpacer(32.dp)
+        VerticalSpacer(32.dp)
 
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(16.dp)
-            ) {
-                PrimaryButton(
-                    text = stringResource(R.string.onboarding__new_wallet),
-                    onClick = onCreateClick,
-                    modifier = Modifier
-                        .weight(1f)
-                        .testTag("NewWallet")
-                )
-                SecondaryButton(
-                    text = stringResource(R.string.onboarding__restore),
-                    onClick = onRestoreClick,
-                    modifier = Modifier
-                        .weight(1f)
-                        .testTag("RestoreWallet")
-                )
-            }
-            Spacer(modifier = Modifier.height(16.dp))
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            PrimaryButton(
+                text = stringResource(R.string.onboarding__new_wallet),
+                onClick = onCreateClick,
+                modifier = Modifier
+                    .weight(1f)
+                    .testTag("NewWallet")
+            )
+            SecondaryButton(
+                text = stringResource(R.string.onboarding__restore),
+                onClick = onRestoreClick,
+                modifier = Modifier
+                    .weight(1f)
+                    .testTag("RestoreWallet")
+            )
         }
+        VerticalSpacer(16.dp)
     }
 }
 

app/src/main/java/to/bitkit/ui/onboarding/OnboardingSlidesScreen.kt

@@ -10,13 +10,13 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.CircleShape
@@ -39,6 +39,7 @@ import to.bitkit.R
 import to.bitkit.ui.components.BodyM
 import to.bitkit.ui.components.ButtonSize
 import to.bitkit.ui.components.Display
+import to.bitkit.ui.components.FillHeight
 import to.bitkit.ui.components.Footnote
 import to.bitkit.ui.components.SecondaryButton
 import to.bitkit.ui.components.VerticalSpacer
@@ -53,18 +54,18 @@ private const val PAGE_COUNT = LAST_PAGE_INDEX + 1
 
 @Composable
 fun OnboardingSlidesScreen(
-    currentTab: Int = 0,
     isGeoBlocked: Boolean,
     onAdvancedSetupClick: () -> Unit,
     onCreateClick: () -> Unit,
     onRestoreClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    currentTab: Int = 0,
 ) {
     val scope = rememberCoroutineScope()
     val pagerState = rememberPagerState(initialPage = currentTab, pageCount = { PAGE_COUNT })
 
     Box(
-        modifier = Modifier
-            .screen()
+        modifier = modifier.screen()
     ) {
         HorizontalPager(
             state = pagerState,
@@ -123,16 +124,14 @@ fun OnboardingSlidesScreen(
             verticalAlignment = Alignment.CenterVertically,
             modifier = Modifier
                 .align(Alignment.BottomCenter)
-                .padding(bottom = 16.dp)
-                .height(16.dp)
                 .offset { IntOffset(0, yOffset.roundToPx()) }
                 .alpha(alpha)
         ) {
             repeat(PAGE_COUNT) { index ->
                 val size by animateDpAsState(
                     targetValue = if (index == pagerState.currentPage) 10.dp else 7.dp,
                     animationSpec = tween(durationMillis = 300),
-                    label = "dotSize"
+                    label = "dotSize",
                 )
                 Box(
                     modifier = Modifier
@@ -186,34 +185,37 @@ fun OnboardingTab(
     modifier: Modifier = Modifier,
     disclaimerText: String? = null,
 ) {
-    Box(
-        contentAlignment = Alignment.TopCenter,
+    Column(
         modifier = modifier.fillMaxSize()
     ) {
+        FillHeight()
+
         Image(
             painter = painterResource(id = imageResId),
             contentDescription = null,
             contentScale = ContentScale.Fit,
             modifier = Modifier
-                .padding(top = 125.dp)
-                .fillMaxWidth()
+                .align(Alignment.CenterHorizontally)
+                .sizeIn(maxWidth = 311.dp, maxHeight = 311.dp)
         )
+
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .align(Alignment.BottomCenter),
+                .padding(top = 48.dp)
+                .defaultMinSize(minHeight = 255.dp)
         ) {
             Display(text = title.withAccent(accentColor = titleAccentColor))
-            Spacer(modifier = Modifier.height(8.dp))
+            VerticalSpacer(14.dp)
             BodyM(
                 text = text,
                 color = Colors.White64,
-                minLines = 3
+                minLines = 3,
             )
             disclaimerText?.let {
-                Footnote(text = it)
+                VerticalSpacer(4.dp)
+                Footnote(text = it, color = Colors.White32)
             }
-            VerticalSpacer(70.dp)
         }
     }
 }

changelog.d/next/904.fixed.md

@@ -0,0 +1 @@
+Align onboarding slides and Create Wallet screen image size, spacing, and dots layout with iOS