commit fcbe8c3712f3925f984dc79db7293b87f7d5eebe parent 44d6d8f0c1141a5bc12566366d2ffb3a8ef4c4f6 Author: t-p-white <towhite@mozilla.com> Date: Mon, 20 Oct 2025 17:08:38 +0000 Bug 1994708 - Part 3: Use Compose for onboarding redesign gradient background and deleted the previous PNG resources r=android-reviewers,rebecatudor273 Non-dark mode |{F33906663}|{F33906670}|{F33906680} Dark mode |{F33906648}|{F33906685}|{F33906691} Differential Revision: https://phabricator.services.mozilla.com/D268886 Diffstat:
3 files changed, 36 insertions(+), 15 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/OnboardingScreenRedesign.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/redesign/view/OnboardingScreenRedesign.kt @@ -6,8 +6,10 @@ package org.mozilla.fenix.onboarding.redesign.view import android.content.res.Configuration import androidx.activity.compose.BackHandler -import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.BoxWithConstraintsScope import androidx.compose.foundation.layout.Column @@ -33,13 +35,13 @@ import androidx.compose.runtime.snapshotFlow import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color import androidx.compose.ui.input.nestedscroll.NestedScrollConnection import androidx.compose.ui.input.nestedscroll.NestedScrollSource import androidx.compose.ui.input.nestedscroll.nestedScroll -import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalContext -import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp @@ -79,6 +81,25 @@ private val SMALL_SCREEN_MAX_HEIGHT = 480.dp private val logger: Logger = Logger("OnboardingScreenRedesign") /** + * The colors used for the gradient background. + */ +private object GradientColors { + val nonDarkMode = listOf( + Color(0xFFF5C1BD), // light pink (top) + Color(0xFFED8043), // orange + Color(0xFFEB691D), // deeper orange-red + Color(0xFFE00B1D), // strong red (bottom) + ) + + val darkMode = listOf( + Color(0xFF9B7AE0), // soft violet (top) + Color(0xFF7B4FC9), // medium purple + Color(0xFF4A289A), // deep purple + Color(0xFF2E1468), // darkest purple (bottom) + ) +} + +/** * A screen for displaying onboarding. * * @param pagesToDisplay List of pages to be displayed in onboarding pager ui. @@ -287,11 +308,7 @@ private fun OnboardingContent( val paddingValue = if (!isLargeScreen && isLandscape) 0.dp else pagePeekWidth if (!isNonLargeScreenLandscape(isLargeScreen, isLandscape)) { - Image( - painter = painterResource(onboardingRedesignBackground(isLandscape)), - contentDescription = null, // Decorative image only. - contentScale = ContentScale.FillWidth, - ) + GradientBackground() } Column(verticalArrangement = Arrangement.Center) { @@ -354,6 +371,17 @@ private fun OnboardingContent( } @Composable +private fun GradientBackground() { + val colors = if (isSystemInDarkTheme()) GradientColors.darkMode else GradientColors.nonDarkMode + + Box( + modifier = Modifier + .fillMaxSize() + .background(brush = Brush.verticalGradient(colors = colors)), + ) +} + +@Composable private fun OnboardingPageForType( type: OnboardingPageUiData.Type, state: OnboardingPageState, @@ -496,13 +524,6 @@ private fun minWidth( else -> PageContentLayout.MIN_WIDTH_DP } -private fun onboardingRedesignBackground(isLandscape: Boolean) = - if (isLandscape) { - R.drawable.onboarding_redesign_background_landscape - } else { - R.drawable.onboarding_redesign_background - } - private fun isNonLargeScreenLandscape(isLargeScreen: Boolean, isLandscape: Boolean) = (isLandscape && !isLargeScreen) diff --git a/mobile/android/fenix/app/src/main/res/drawable/onboarding_redesign_background.webp b/mobile/android/fenix/app/src/main/res/drawable/onboarding_redesign_background.webp Binary files differ. diff --git a/mobile/android/fenix/app/src/main/res/drawable/onboarding_redesign_background_landscape.webp b/mobile/android/fenix/app/src/main/res/drawable/onboarding_redesign_background_landscape.webp Binary files differ.
