Merge pull request #304 from synonymdev/fix/adapt-create-wallet-screen-small-screens

Adapt onboarding to short screens

Author: jvsena42

app/src/main/java/to/bitkit/ui/components/Text.kt

@@ -127,6 +127,7 @@ fun BodyM(
     color: Color = MaterialTheme.colorScheme.primary,
     textAlign: TextAlign = TextAlign.Start,
     maxLines: Int = Int.MAX_VALUE,
+    minLines: Int = 1,
     overflow: TextOverflow = if (maxLines == 1) TextOverflow.Ellipsis else TextOverflow.Clip,
 ) {
     BodyM(
@@ -135,6 +136,7 @@ fun BodyM(
         modifier = modifier,
         textAlign = textAlign,
         maxLines = maxLines,
+        minLines = minLines,
         overflow = overflow,
     )
 }
@@ -146,6 +148,7 @@ fun BodyM(
     color: Color = MaterialTheme.colorScheme.primary,
     textAlign: TextAlign = TextAlign.Start,
     maxLines: Int = Int.MAX_VALUE,
+    minLines: Int = 1,
     overflow: TextOverflow = if (maxLines == 1) TextOverflow.Ellipsis else TextOverflow.Clip,
 ) {
     Text(
@@ -155,6 +158,7 @@ fun BodyM(
             textAlign = textAlign,
         ),
         maxLines = maxLines,
+        minLines = minLines,
         overflow = overflow,
         modifier = modifier,
     )

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

@@ -19,13 +19,16 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Devices.NEXUS_5
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import to.bitkit.R
 import to.bitkit.ui.components.BodyM
 import to.bitkit.ui.components.Display
+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.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
 import to.bitkit.ui.utils.withAccent
@@ -52,19 +55,20 @@ fun CreateWalletScreen(
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .height(264.dp)
                 .align(Alignment.BottomCenter),
         ) {
+            FillHeight()
             Display(text = stringResource(R.string.onboarding__slide4_header).withAccent())
-            Spacer(modifier = Modifier.height(8.dp))
+            VerticalSpacer(8.dp)
             BodyM(
                 text = stringResource(R.string.onboarding__slide4_text).withAccent(
                     defaultColor = Colors.White64,
                     accentStyle = SpanStyle(fontWeight = FontWeight.Bold, color = Colors.White),
                 ),
             )
 
-            Spacer(modifier = Modifier.weight(1f))
+            VerticalSpacer(32.dp)
+
             Row(
                 modifier = Modifier.fillMaxWidth(),
                 horizontalArrangement = Arrangement.spacedBy(16.dp)
@@ -99,3 +103,14 @@ private fun CreateWalletScreenPreview() {
         )
     }
 }
+
+@Preview(showSystemUi = true, device = NEXUS_5)
+@Composable
+private fun CreateWalletScreenPreview2() {
+    AppThemeSurface {
+        CreateWalletScreen(
+            onCreateClick = {},
+            onRestoreClick = {}
+        )
+    }
+}

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

@@ -44,6 +44,7 @@ import to.bitkit.R
 import to.bitkit.ui.components.BodyM
 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.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
@@ -212,19 +213,19 @@ fun OnboardingTab(
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .height(264.dp)
                 .align(Alignment.BottomCenter),
         ) {
             Display(text = title.withAccent(accentColor = titleAccentColor))
             Spacer(modifier = Modifier.height(8.dp))
             BodyM(
                 text = text,
                 color = Colors.White64,
+                minLines = 3
             )
             disclaimerText?.let {
-                Spacer(modifier = Modifier.height(6.5.dp))
                 Footnote(text = it)
             }
+            VerticalSpacer(70.dp)
         }
     }
 }
@@ -270,3 +271,17 @@ private fun OnboardingViewPreview3() {
         )
     }
 }
+
+@Preview(showSystemUi = true)
+@Composable
+private fun OnboardingViewPreview4() {
+    AppThemeSurface {
+        OnboardingSlidesScreen(
+            currentTab = 4,
+            onAdvancedSetupClick = {},
+            onCreateClick = {},
+            onRestoreClick = {},
+            isGeoBlocked = false
+        )
+    }
+}