Fix onboarding: slim to 4 slides, add ImageOrientation, swap hero image

app/src/main/kotlin/com/nativeapptemplate/nativeapptemplatefree/ui/app_root/Onboarding.kt

@@ -0,0 +1,11 @@
+package com.nativeapptemplate.nativeapptemplatefree.ui.app_root
+
+enum class ImageOrientation {
+  PORTRAIT,
+  LANDSCAPE,
+}
+
+data class Onboarding(
+  val id: Int,
+  val imageOrientation: ImageOrientation = ImageOrientation.LANDSCAPE,
+)

app/src/main/kotlin/com/nativeapptemplate/nativeapptemplatefree/ui/app_root/OnboardingView.kt

@@ -46,8 +46,9 @@ internal fun OnboardingView(
 ) {
   val fontSizeLarge = 24
   val lineHeightLarge = 26
+  val onboardings = OnboardingViewModel.onboardings
   val pagerState = rememberPagerState(pageCount = {
-    8
+    onboardings.size
   })
 
   Scaffold(
@@ -64,18 +65,21 @@ internal fun OnboardingView(
         modifier = Modifier
           .fillMaxSize(),
       ) { page ->
+        val onboarding = onboardings[page]
+        val imageBottomPadding = if (onboarding.imageOrientation == ImageOrientation.LANDSCAPE) 192.dp else 0.dp
         Box(
           modifier = Modifier
             .fillMaxSize()
             .padding(12.dp)
             .padding(top = 12.dp),
         ) {
           Image(
-            painter = painterResource(OnboardingViewModel.onboardingImageId(page)),
+            painter = painterResource(OnboardingViewModel.onboardingImageId(onboarding.id)),
             contentDescription = null,
             contentScale = ContentScale.Fit,
             modifier = Modifier
-              .align(Alignment.TopCenter),
+              .align(Alignment.TopCenter)
+              .padding(bottom = imageBottomPadding),
           )
           Card(
             shape = RoundedCornerShape(16.dp),
@@ -85,7 +89,7 @@ internal fun OnboardingView(
               .align(Alignment.BottomCenter),
           ) {
             Text(
-              stringResource(OnboardingViewModel.onboardingDescription(page)),
+              stringResource(OnboardingViewModel.onboardingDescription(onboarding.id)),
               color = MaterialTheme.colorScheme.onSurfaceVariant,
               fontSize = fontSizeLarge.sp.nonScaledSp,
               lineHeight = lineHeightLarge.sp.nonScaledSp,

app/src/main/kotlin/com/nativeapptemplate/nativeapptemplatefree/ui/app_root/OnboardingViewModel.kt

@@ -8,36 +8,27 @@ import javax.inject.Inject
 @HiltViewModel
 class OnboardingViewModel @Inject constructor() : ViewModel() {
   companion object {
-    fun onboardingDescription(index: Int): Int {
-      val description = when (index) {
-        0 -> R.string.onboarding_description1
-        1 -> R.string.onboarding_description2
-        2 -> R.string.onboarding_description3
-        3 -> R.string.onboarding_description4
-        4 -> R.string.onboarding_description5
-        5 -> R.string.onboarding_description6
-        6 -> R.string.onboarding_description7
-        7 -> R.string.onboarding_description8
-        else -> R.string.onboarding_description1
-      }
+    val onboardings: List<Onboarding> = listOf(
+      Onboarding(id = 1, imageOrientation = ImageOrientation.LANDSCAPE),
+      Onboarding(id = 2, imageOrientation = ImageOrientation.LANDSCAPE),
+      Onboarding(id = 3, imageOrientation = ImageOrientation.PORTRAIT),
+      Onboarding(id = 4, imageOrientation = ImageOrientation.PORTRAIT),
+    )
 
-      return description
+    fun onboardingDescription(id: Int): Int = when (id) {
+      1 -> R.string.onboarding_description1
+      2 -> R.string.onboarding_description2
+      3 -> R.string.onboarding_description3
+      4 -> R.string.onboarding_description4
+      else -> R.string.onboarding_description1
     }
 
-    fun onboardingImageId(index: Int): Int {
-      val imageId = when (index) {
-        0 -> R.drawable.ic_overview1
-        1 -> R.drawable.ic_overview2
-        2 -> R.drawable.ic_overview3
-        3 -> R.drawable.ic_overview4
-        4 -> R.drawable.ic_overview5
-        5 -> R.drawable.ic_overview6
-        6 -> R.drawable.ic_overview7
-        7 -> R.drawable.ic_overview8
-        else -> R.drawable.ic_overview1
-      }
-
-      return imageId
+    fun onboardingImageId(id: Int): Int = when (id) {
+      1 -> R.drawable.ic_overview1
+      2 -> R.drawable.ic_overview2
+      3 -> R.drawable.ic_overview3
+      4 -> R.drawable.ic_overview4
+      else -> R.drawable.ic_overview1
     }
   }
 }

app/src/main/kotlin/com/nativeapptemplate/nativeapptemplatefree/ui/app_root/SignUpOrSignInView.kt

@@ -70,7 +70,7 @@ internal fun SignUpOrSignInView(
       )
 
       Image(
-        painter = painterResource(R.drawable.ic_overview1_slim),
+        painter = painterResource(R.drawable.ic_hero),
         contentDescription = null,
         contentScale = ContentScale.FillWidth,
         modifier = Modifier

app/src/main/res/values/strings.xml

@@ -66,14 +66,10 @@
   <string name="terms_of_use_updated">Terms of Use Updated</string>
 
   <!-- On-boarding -->
-  <string name="onboarding_description1">Welcome to NativeAppTemplate.</string>
-  <string name="onboarding_description2">Sign in to manage your shops and item tags.</string>
-  <string name="onboarding_description3">Organize your work across multiple organizations.</string>
-  <string name="onboarding_description4">Invite teammates to collaborate.</string>
-  <string name="onboarding_description5">Track item tags with a simple idle/completed state.</string>
-  <string name="onboarding_description6">Create, edit, and delete item tags from your shop.</string>
-  <string name="onboarding_description7">Switch between personal and shared organizations.</string>
-  <string name="onboarding_description8">Have fun!</string>
+  <string name="onboarding_description1">Onboarding description 1.</string>
+  <string name="onboarding_description2">Onboarding description 2.</string>
+  <string name="onboarding_description3">Onboarding description 3.</string>
+  <string name="onboarding_description4">Onboarding description 4.</string>
 
   <!-- Shops Screen -->
   <string name="add_shop">Add Shop</string>

app/src/test/kotlin/com/nativeapptemplate/nativeapptemplatefree/ui/app_root/OnboardingViewModelTest.kt

@@ -8,11 +8,16 @@ import org.junit.Test
 class OnboardingViewModelTest {
   @Test
   fun onboardingDescription_isValid() = runTest {
-    assertEquals(OnboardingViewModel.onboardingDescription(0), R.string.onboarding_description1)
+    assertEquals(OnboardingViewModel.onboardingDescription(1), R.string.onboarding_description1)
   }
 
   @Test
   fun onboardingImageId_isValid() = runTest {
-    assertEquals(OnboardingViewModel.onboardingImageId(0), R.drawable.ic_overview1)
+    assertEquals(OnboardingViewModel.onboardingImageId(1), R.drawable.ic_overview1)
+  }
+
+  @Test
+  fun onboardings_hasFourSlides() = runTest {
+    assertEquals(4, OnboardingViewModel.onboardings.size)
   }
 }