compose: onboarding: Show app logo on wide-screen devices

Signed-off-by: Aayush Gupta <aayushgupta219@gmail.com>

app/src/main/java/com/aurora/store/compose/composable/Logo.kt

@@ -0,0 +1,69 @@
+/*
+ * SPDX-FileCopyrightText: 2025 The Calyx Institute
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+package com.aurora.store.compose.composable
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.requiredSize
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import coil3.compose.AsyncImage
+import coil3.request.ImageRequest
+import com.aurora.store.R
+import com.aurora.store.compose.preview.PreviewTemplate
+
+/**
+ * Composable to show Aurora Store's logo
+ */
+@Composable
+fun Logo(modifier: Modifier = Modifier) {
+    Column(
+        modifier = modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.spacedBy(
+            dimensionResource(R.dimen.margin_small),
+            Alignment.CenterVertically
+        ),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        AsyncImage(
+            model = ImageRequest.Builder(LocalContext.current)
+                .data(R.mipmap.ic_launcher)
+                .build(),
+            contentDescription = null,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier
+                .requiredSize(dimensionResource(R.dimen.icon_size_avatar))
+                .clip(CircleShape)
+        )
+        Text(
+            text = stringResource(R.string.app_name),
+            style = MaterialTheme.typography.titleLarge,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
+        )
+    }
+
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun LogoPreview() {
+    PreviewTemplate {
+        Logo()
+    }
+}

app/src/main/java/com/aurora/store/compose/ui/onboarding/OnboardingScreen.kt

@@ -32,6 +32,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import com.aurora.extensions.isWindowCompact
 import com.aurora.store.R
+import com.aurora.store.compose.composable.Logo
 import com.aurora.store.compose.composable.PageIndicator
 import com.aurora.store.compose.preview.PreviewTemplate
 import com.aurora.store.compose.ui.onboarding.navigation.OnboardingPage
@@ -54,7 +55,8 @@ fun OnboardingScreen(viewModel: OnboardingViewModel = hiltViewModel()) {
 @Composable
 private fun ScreenContent(
     pages: List<OnboardingPage> = emptyList(),
-    onFinishOnboarding: () -> Unit = {}
+    onFinishOnboarding: () -> Unit = {},
+    windowAdaptiveInfo: WindowAdaptiveInfo = currentWindowAdaptiveInfo()
 ) {
     val pagerState = rememberPagerState { pages.size }
     val coroutineScope = rememberCoroutineScope()
@@ -64,7 +66,7 @@ private fun ScreenContent(
     }
 
     @Composable
-    fun SetupActions(windowAdaptiveInfo: WindowAdaptiveInfo = currentWindowAdaptiveInfo()) {
+    fun SetupActions() {
         val horizontalButtonPadding = when {
             windowAdaptiveInfo.isWindowCompact -> dimensionResource(R.dimen.padding_medium)
             else -> dimensionResource(R.dimen.padding_xlarge)
@@ -77,7 +79,11 @@ private fun ScreenContent(
                     vertical = dimensionResource(R.dimen.padding_medium),
                     horizontal = horizontalButtonPadding
                 ),
-            horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_medium))
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(
+                dimensionResource(R.dimen.padding_medium),
+                Alignment.End
+            )
         ) {
             val buttonWidthModifier = when {
                 windowAdaptiveInfo.isWindowCompact -> Modifier.weight(1F)
@@ -143,18 +149,29 @@ private fun ScreenContent(
     ) { paddingValues ->
         Column(
             modifier = Modifier
-                .padding(paddingValues)
+                .fillMaxSize()
-                .fillMaxSize(),
+                .padding(paddingValues),
-            verticalArrangement = Arrangement.SpaceBetween
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            HorizontalPager(
+            Row(
                 modifier = Modifier.weight(1F),
-                state = pagerState,
+                horizontalArrangement = Arrangement.Center,
-                verticalAlignment = Alignment.Top
+                verticalAlignment = Alignment.CenterVertically
-            ) { page ->
+            ) {
-                when (pages[page]) {
+                if (!windowAdaptiveInfo.isWindowCompact) {
-                    OnboardingPage.WELCOME -> WelcomePage()
+                    Logo(modifier = Modifier.weight(1F))
-                    OnboardingPage.PERMISSIONS -> PermissionsPage()
+                }
+
+                HorizontalPager(
+                    modifier = Modifier.weight(1F),
+                    state = pagerState,
+                    verticalAlignment = Alignment.Top
+                ) { page ->
+                    when (pages[page]) {
+                        OnboardingPage.WELCOME -> WelcomePage()
+                        OnboardingPage.PERMISSIONS -> PermissionsPage()
+                    }
                 }
             }