refactor tutorial layout

Author: UrAvgCode

app/src/main/java/com/uravgcode/chooser/tutorial/presentation/TutorialScreen.kt

@@ -54,7 +54,9 @@ fun TutorialScreen(
                 modifier = Modifier.weight(1f)
             ) { page ->
                 Box(
-                    modifier = Modifier.fillMaxSize(),
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(16.dp),
                     contentAlignment = Alignment.Center
                 ) {
                     val isPageFullyVisible = pagerState.currentPage == page &&

app/src/main/java/com/uravgcode/chooser/tutorial/presentation/page/ButtonPage.kt

@@ -4,7 +4,6 @@ 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.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -22,19 +21,16 @@ import com.uravgcode.chooser.tutorial.presentation.component.NumberButtonExplana
 @Composable
 fun ButtonPage() {
     Column(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(24.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center
     ) {
         Text(
             text = "How to Use",
-            style = MaterialTheme.typography.headlineMedium,
+            modifier = Modifier.padding(bottom = 8.dp),
+            style = MaterialTheme.typography.headlineLarge,
             fontWeight = FontWeight.Bold,
             textAlign = TextAlign.Center
         )
-        Spacer(modifier = Modifier.padding(8.dp))
 
         Row(
             modifier = Modifier.fillMaxWidth(),
@@ -62,10 +58,9 @@ fun ButtonPage() {
             }
         }
 
-        Spacer(modifier = Modifier.padding(8.dp))
         Text(
             text = "Long press on the Mode button to access settings",
-            style = MaterialTheme.typography.bodyMedium,
+            modifier = Modifier.padding(top = 8.dp),
             textAlign = TextAlign.Center
         )
     }

app/src/main/java/com/uravgcode/chooser/tutorial/presentation/page/ModePage.kt

@@ -8,9 +8,10 @@ import androidx.compose.animation.graphics.vector.AnimatedImageVector
 import androidx.compose.foundation.BorderStroke
 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.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -57,13 +58,12 @@ fun ModePage(
     }
 
     Column(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(24.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center
     ) {
-        Row(verticalAlignment = Alignment.CenterVertically) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
             Icon(
                 painter = painterResource(iconId),
                 contentDescription = null,
@@ -73,17 +73,20 @@ fun ModePage(
             )
             Text(
                 text = title,
-                style = MaterialTheme.typography.headlineMedium,
+                style = MaterialTheme.typography.headlineLarge,
                 fontWeight = FontWeight.Bold
             )
         }
         Text(
             text = description,
-            textAlign = TextAlign.Center
+            textAlign = TextAlign.Center,
+            modifier = Modifier.padding(bottom = 8.dp)
         )
 
         Card(
-            modifier = Modifier.padding(8.dp),
+            modifier = Modifier
+                .weight(1f)
+                .padding(vertical = 8.dp),
             shape = RoundedCornerShape(24.dp),
             colors = CardColors(
                 containerColor = Color.Black,
@@ -96,20 +99,23 @@ fun ModePage(
                 color = MaterialTheme.colorScheme.outlineVariant
             )
         ) {
-            Image(
-                painter = rememberAnimatedVectorPainter(image, atEnd),
-                contentDescription = null,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .aspectRatio(1f),
-                contentScale = ContentScale.Crop
-            )
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                Image(
+                    painter = rememberAnimatedVectorPainter(image, atEnd),
+                    contentDescription = null,
+                    modifier = Modifier.fillMaxSize(),
+                    contentScale = ContentScale.Fit
+                )
+            }
         }
 
         Text(
             text = previewDescription,
-            style = MaterialTheme.typography.bodyMedium,
-            textAlign = TextAlign.Center
+            textAlign = TextAlign.Center,
+            modifier = Modifier.padding(top = 8.dp)
         )
     }
 }

app/src/main/java/com/uravgcode/chooser/tutorial/presentation/page/WelcomePage.kt

@@ -6,11 +6,10 @@ import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
 import androidx.compose.animation.graphics.vector.AnimatedImageVector
 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.Spacer
-import androidx.compose.foundation.layout.aspectRatio
+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.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -23,6 +22,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.uravgcode.chooser.R
@@ -40,37 +40,39 @@ fun WelcomePage() {
     }
 
     Column(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(24.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center
     ) {
         Text(
-            text = "Welcome to Chooser!",
+            text = "Welcome to Chooser",
+            modifier = Modifier.padding(bottom = 8.dp),
             style = MaterialTheme.typography.headlineLarge,
+            fontWeight = FontWeight.Bold,
             textAlign = TextAlign.Center
         )
-        Spacer(modifier = Modifier.height(8.dp))
         Text(
             text = "An app that helps you make random selections",
-            style = MaterialTheme.typography.bodyLarge,
-            textAlign = TextAlign.Center
+            textAlign = TextAlign.Center,
+            modifier = Modifier.padding(bottom = 8.dp)
         )
 
-        Image(
-            painter = rememberAnimatedVectorPainter(image, atEnd),
-            contentDescription = null,
+        Box(
             modifier = Modifier
-                .fillMaxWidth()
-                .aspectRatio(1f),
-            contentScale = ContentScale.Crop
-        )
+                .weight(1f)
+                .padding(vertical = 8.dp),
+        ) {
+            Image(
+                painter = rememberAnimatedVectorPainter(image, atEnd),
+                contentDescription = null,
+                modifier = Modifier.fillMaxSize(),
+                contentScale = ContentScale.Fit
+            )
+        }
 
         Text(
             text = "Place your fingers on the screen and let the app choose for you",
-            style = MaterialTheme.typography.bodyMedium,
             textAlign = TextAlign.Center,
+            modifier = Modifier.padding(top = 8.dp)
         )
     }
 }