Merge pull request #433 from synonymdev/fix/onboarding-transitions

fix: onboarding screens transition

Author: ovitrif

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

@@ -6,7 +6,6 @@ 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
@@ -29,6 +28,7 @@ import to.bitkit.ui.components.FillHeight
 import to.bitkit.ui.components.PrimaryButton
 import to.bitkit.ui.components.SecondaryButton
 import to.bitkit.ui.components.VerticalSpacer
+import to.bitkit.ui.shared.util.screen
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
 import to.bitkit.ui.utils.withAccent
@@ -42,7 +42,7 @@ fun CreateWalletScreen(
     Box(
         contentAlignment = Alignment.TopCenter,
         modifier = modifier
-            .fillMaxSize()
+            .screen(insets = null)
     ) {
         Image(
             painter = painterResource(id = R.drawable.wallet),
@@ -55,7 +55,7 @@ fun CreateWalletScreen(
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .align(Alignment.BottomCenter),
+                .align(Alignment.BottomCenter)
         ) {
             FillHeight()
             Display(text = stringResource(R.string.onboarding__slide4_header).withAccent())
@@ -106,7 +106,7 @@ private fun CreateWalletScreenPreview() {
 
 @Preview(showSystemUi = true, device = NEXUS_5)
 @Composable
-private fun CreateWalletScreenPreview2() {
+private fun PreviewSmall() {
     AppThemeSurface {
         CreateWalletScreen(
             onCreateClick = {},

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

@@ -5,7 +5,6 @@ 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.imePadding
@@ -37,8 +36,10 @@ import to.bitkit.ui.components.Display
 import to.bitkit.ui.components.HighlightLabel
 import to.bitkit.ui.components.PrimaryButton
 import to.bitkit.ui.components.TopBarSpacer
+import to.bitkit.ui.components.VerticalSpacer
 import to.bitkit.ui.components.mainRectHeight
 import to.bitkit.ui.scaffold.AppTopBar
+import to.bitkit.ui.shared.util.screen
 import to.bitkit.ui.theme.AppTextFieldDefaults
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
@@ -53,7 +54,8 @@ fun CreateWalletWithPassphraseScreen(
     var bip39Passphrase by remember { mutableStateOf("") }
 
     Box(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .screen()
     ) {
         Row(
             verticalAlignment = Alignment.Bottom,
@@ -117,7 +119,7 @@ fun CreateWalletWithPassphraseScreen(
                 enabled = bip39Passphrase.isNotBlank(),
                 modifier = Modifier.testTag("CreateNewWallet")
             )
-            Spacer(modifier = Modifier.height(32.dp))
+            VerticalSpacer(16.dp)
         }
     }
 }

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

@@ -10,7 +10,6 @@ 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.systemBarsPadding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -25,6 +24,7 @@ import to.bitkit.ui.components.BodyM
 import to.bitkit.ui.components.Display
 import to.bitkit.ui.components.PrimaryButton
 import to.bitkit.ui.components.SecondaryButton
+import to.bitkit.ui.shared.util.screen
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
 import to.bitkit.ui.utils.withAccent
@@ -46,8 +46,7 @@ fun IntroScreen(
         )
         Box(
             modifier = Modifier
-                .fillMaxSize()
-                .systemBarsPadding()
+                .screen(noBackground = true)
         ) {
             Image(
                 painter = painterResource(id = R.drawable.logo),

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

@@ -17,7 +17,6 @@ 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.systemBarsPadding
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.CircleShape
@@ -46,6 +45,7 @@ import to.bitkit.ui.components.Display
 import to.bitkit.ui.components.Footnote
 import to.bitkit.ui.components.VerticalSpacer
 import to.bitkit.ui.scaffold.AppTopBar
+import to.bitkit.ui.shared.util.screen
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
 import to.bitkit.ui.utils.withAccent
@@ -63,8 +63,7 @@ fun OnboardingSlidesScreen(
 
     Box(
         modifier = Modifier
-            .fillMaxSize()
-            .systemBarsPadding()
+            .screen()
     ) {
         HorizontalPager(
             state = pagerState,
@@ -195,8 +194,8 @@ fun OnboardingTab(
     title: String,
     titleAccentColor: Color,
     text: String,
-    disclaimerText: String? = null,
     modifier: Modifier = Modifier,
+    disclaimerText: String? = null,
 ) {
     Box(
         contentAlignment = Alignment.TopCenter,

app/src/main/java/to/bitkit/ui/shared/util/Modifiers.kt

@@ -5,8 +5,10 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.systemBarsPadding
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -89,8 +91,9 @@ fun Modifier.blockPointerInputPassthrough(): Modifier {
 
 @Composable
 fun Modifier.screen(
-    noBackground: Boolean = false
+    noBackground: Boolean = false,
+    insets: WindowInsets? = WindowInsets.systemBars,
 ): Modifier = this
     .fillMaxSize()
     .then(if (noBackground) Modifier else Modifier.background(MaterialTheme.colorScheme.background))
-    .systemBarsPadding()
+    .then(if (insets == null) Modifier else Modifier.windowInsetsPadding(insets))