commit 47ae8104fe5bac2e4e63916223fa61a93aa2346f parent 08dd702662ba90103082e23e918e6529b4ceb409 Author: Gabriel Luong <gabriel.luong@gmail.com> Date: Mon, 24 Nov 2025 08:48:40 +0000 Bug 2000327 - Part 5: Migrate existing Onboarding UI to use M3 Acorn color tokens r=android-reviewers,007 Differential Revision: https://phabricator.services.mozilla.com/D273040 Diffstat:
6 files changed, 458 insertions(+), 454 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/MarketingDataOnboardingPage.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/MarketingDataOnboardingPage.kt @@ -5,7 +5,6 @@ package org.mozilla.fenix.onboarding.view import androidx.compose.foundation.Image -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.Column @@ -20,7 +19,8 @@ import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.selection.toggleable import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Checkbox -import androidx.compose.material3.CheckboxDefaults +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -60,117 +60,116 @@ fun MarketingDataOnboardingPage( onMarketingOptInToggle: (optIn: Boolean) -> Unit, onMarketingDataContinueClick: (allowMarketingDataCollection: Boolean) -> Unit, ) { - BoxWithConstraints( - modifier = Modifier - .background(FirefoxTheme.colors.layer1) - .padding(bottom = 24.dp), - ) { - val boxWithConstraintsScope = this - - Column( + Surface { + BoxWithConstraints( modifier = Modifier - .fillMaxSize() - .verticalScroll(rememberScrollState()), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.SpaceBetween, + .padding(bottom = 24.dp), ) { - var checkboxChecked by remember { mutableStateOf(true) } - - Spacer(Modifier) + val boxWithConstraintsScope = this Column( - modifier = Modifier.padding(horizontal = 16.dp, vertical = 32.dp), + modifier = Modifier + .fillMaxSize() + .verticalScroll(rememberScrollState()), horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.SpaceBetween, ) { - Image( - painter = painterResource(id = state.imageRes), - contentDescription = null, - modifier = Modifier.height(imageHeight(boxWithConstraintsScope)), - ) - - Spacer(modifier = Modifier.height(32.dp)) - - Text( - text = state.title, - color = FirefoxTheme.colors.textPrimary, - textAlign = TextAlign.Center, - style = FirefoxTheme.typography.headline5, - ) - - Spacer(modifier = Modifier.height(16.dp)) - - Text( - modifier = Modifier.padding(horizontal = 20.dp), - text = state.description, - color = FirefoxTheme.colors.textSecondary, - textAlign = TextAlign.Center, - style = FirefoxTheme.typography.body2, - ) - } + var checkboxChecked by remember { mutableStateOf(true) } + + Spacer(Modifier) + + Column( + modifier = Modifier.padding(horizontal = 16.dp, vertical = 32.dp), + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Image( + painter = painterResource(id = state.imageRes), + contentDescription = null, + modifier = Modifier.height(imageHeight(boxWithConstraintsScope)), + ) + + Spacer(modifier = Modifier.height(32.dp)) + + Text( + text = state.title, + textAlign = TextAlign.Center, + style = FirefoxTheme.typography.headline5, + ) - Column( - horizontalAlignment = Alignment.CenterHorizontally, - modifier = Modifier.padding(horizontal = 16.dp), - ) { - state.marketingData?.let { marketingData -> - Row( - Modifier.toggleable( - value = checkboxChecked, - role = Role.Checkbox, - onValueChange = { checkboxChecked = !checkboxChecked }, - ), - ) { - Checkbox( - modifier = Modifier - .align(Alignment.Top) - .offset(y = (-12).dp, x = (-12).dp) - .clearAndSetSemantics {}, - checked = checkboxChecked, - onCheckedChange = { - checkboxChecked = !checkboxChecked - onMarketingOptInToggle.invoke(checkboxChecked) - }, - colors = CheckboxDefaults.colors( - checkedColor = FirefoxTheme.colors.formSelected, - uncheckedColor = FirefoxTheme.colors.formDefault, - ), - ) - - Text( - text = marketingData.bodyTwoText, - color = FirefoxTheme.colors.textPrimary, - style = FirefoxTheme.typography.body2, - textAlign = TextAlign.Start, - ) - } Spacer(modifier = Modifier.height(16.dp)) - Column( - horizontalAlignment = Alignment.CenterHorizontally, - modifier = Modifier.padding(horizontal = 16.dp), - ) { - LinkText( - text = marketingData.bodyOneText, - linkTextStates = listOf( - LinkTextState( - text = marketingData.bodyOneLinkText, - url = "", - onClick = { onMarketingDataLearnMoreClick() }, - ), + + Text( + modifier = Modifier.padding(horizontal = 20.dp), + text = state.description, + color = MaterialTheme.colorScheme.onSurfaceVariant, + textAlign = TextAlign.Center, + style = FirefoxTheme.typography.body2, + ) + } + + Column( + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier.padding(horizontal = 16.dp), + ) { + state.marketingData?.let { marketingData -> + Row( + Modifier.toggleable( + value = checkboxChecked, + role = Role.Checkbox, + onValueChange = { checkboxChecked = !checkboxChecked }, ), - textAlign = TextAlign.Center, - ) + ) { + Checkbox( + modifier = Modifier + .align(Alignment.Top) + .offset(y = (-12).dp, x = (-12).dp) + .clearAndSetSemantics {}, + checked = checkboxChecked, + onCheckedChange = { + checkboxChecked = !checkboxChecked + onMarketingOptInToggle.invoke(checkboxChecked) + }, + ) + + Text( + text = marketingData.bodyTwoText, + style = FirefoxTheme.typography.body2, + textAlign = TextAlign.Start, + ) + } + + Spacer(modifier = Modifier.height(16.dp)) + + Column( + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier.padding(horizontal = 16.dp), + ) { + LinkText( + text = marketingData.bodyOneText, + linkTextStates = listOf( + LinkTextState( + text = marketingData.bodyOneLinkText, + url = "", + onClick = { onMarketingDataLearnMoreClick() }, + ), + ), + textAlign = TextAlign.Center, + ) + } } - } - Spacer(modifier = Modifier.height(16.dp)) + Spacer(modifier = Modifier.height(16.dp)) - FilledButton( - modifier = Modifier - .width(width = FirefoxTheme.layout.size.maxWidth.small) - .semantics { testTag = state.title + "onboarding_card.positive_button" }, - text = state.primaryButton.text, - onClick = { onMarketingDataContinueClick(checkboxChecked) }, - ) + FilledButton( + modifier = Modifier + .width(width = FirefoxTheme.layout.size.maxWidth.small) + .semantics { + testTag = state.title + "onboarding_card.positive_button" + }, + text = state.primaryButton.text, + onClick = { onMarketingDataContinueClick(checkboxChecked) }, + ) + } } } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/OnboardingPage.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/OnboardingPage.kt @@ -5,7 +5,6 @@ package org.mozilla.fenix.onboarding.view import androidx.compose.foundation.Image -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.BoxWithConstraintsScope @@ -18,7 +17,8 @@ import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Icon -import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -33,6 +33,7 @@ import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview import mozilla.components.compose.base.button.FilledButton +import mozilla.components.compose.base.button.IconButton import mozilla.components.compose.base.button.OutlinedButton import org.mozilla.fenix.R import org.mozilla.fenix.compose.LinkText @@ -80,103 +81,104 @@ fun OnboardingPage( modifier: Modifier = Modifier, onDismiss: (() -> Unit)? = null, ) { - BoxWithConstraints( - modifier = Modifier - .background(FirefoxTheme.colors.layer1) - .padding(bottom = if (pageState.secondaryButton == null) 32.dp else 24.dp) - .then(modifier), - ) { - val boxWithConstraintsScope = this - Column( + Surface { + BoxWithConstraints( modifier = Modifier - .fillMaxSize() - .verticalScroll(rememberScrollState()), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.SpaceBetween, + .padding(bottom = if (pageState.secondaryButton == null) 32.dp else 24.dp) + .then(modifier), ) { - if (onDismiss != null) { - IconButton( - onClick = onDismiss, - modifier = Modifier.align(Alignment.End), - ) { - Icon( - painter = painterResource(id = iconsR.drawable.mozac_ic_cross_24), - contentDescription = stringResource(R.string.onboarding_home_content_description_close_button), - tint = FirefoxTheme.colors.iconPrimary, - ) - } - } else { - Spacer(Modifier) - } - + val boxWithConstraintsScope = this Column( - modifier = Modifier.padding(horizontal = 16.dp, vertical = 32.dp), + modifier = Modifier + .fillMaxSize() + .verticalScroll(rememberScrollState()), horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.SpaceBetween, ) { - Image( - painter = painterResource(id = pageState.imageRes), - contentDescription = null, - modifier = Modifier.height(imageHeight(boxWithConstraintsScope)), - ) - - Spacer(modifier = Modifier.height(32.dp)) - - Text( - text = pageState.title, - color = FirefoxTheme.colors.textPrimary, - textAlign = TextAlign.Center, - style = FirefoxTheme.typography.headline5, - ) - - Spacer(modifier = Modifier.height(16.dp)) - - Text( - text = pageState.description, - color = FirefoxTheme.colors.textSecondary, - textAlign = TextAlign.Center, - style = FirefoxTheme.typography.body2, - ) - - Spacer(modifier = Modifier.height(16.dp)) - - pageState.privacyCaption?.let { privacyCaption -> - LinkText( - text = privacyCaption.text, - linkTextStates = listOf(privacyCaption.linkTextState), + if (onDismiss != null) { + IconButton( + onClick = onDismiss, + contentDescription = stringResource(R.string.onboarding_home_content_description_close_button), + modifier = Modifier.align(Alignment.End), + ) { + Icon( + painter = painterResource(id = iconsR.drawable.mozac_ic_cross_24), + contentDescription = null, + ) + } + } else { + Spacer(Modifier) + } + + Column( + modifier = Modifier.padding(horizontal = 16.dp, vertical = 32.dp), + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Image( + painter = painterResource(id = pageState.imageRes), + contentDescription = null, + modifier = Modifier.height(imageHeight(boxWithConstraintsScope)), + ) + + Spacer(modifier = Modifier.height(32.dp)) + + Text( + text = pageState.title, + textAlign = TextAlign.Center, + style = FirefoxTheme.typography.headline5, ) + + Spacer(modifier = Modifier.height(16.dp)) + + Text( + text = pageState.description, + color = MaterialTheme.colorScheme.onSurfaceVariant, + textAlign = TextAlign.Center, + style = FirefoxTheme.typography.body2, + ) + + Spacer(modifier = Modifier.height(16.dp)) + + pageState.privacyCaption?.let { privacyCaption -> + LinkText( + text = privacyCaption.text, + linkTextStates = listOf(privacyCaption.linkTextState), + ) + } } - } - Column( - horizontalAlignment = Alignment.CenterHorizontally, - modifier = Modifier.padding(horizontal = 16.dp), - ) { - FilledButton( - modifier = Modifier - .width(width = FirefoxTheme.layout.size.maxWidth.small) - .semantics { - testTag = pageState.title + "onboarding_card.positive_button" - }, - text = pageState.primaryButton.text, - onClick = pageState.primaryButton.onClick, - ) - - if (pageState.secondaryButton != null) { - Spacer(modifier = Modifier.height(8.dp)) - OutlinedButton( + Column( + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier.padding(horizontal = 16.dp), + ) { + FilledButton( modifier = Modifier .width(width = FirefoxTheme.layout.size.maxWidth.small) .semantics { - testTag = pageState.title + "onboarding_card.negative_button" + testTag = pageState.title + "onboarding_card.positive_button" }, - text = pageState.secondaryButton.text, - onClick = pageState.secondaryButton.onClick, + text = pageState.primaryButton.text, + onClick = pageState.primaryButton.onClick, ) + + if (pageState.secondaryButton != null) { + Spacer(modifier = Modifier.height(8.dp)) + + OutlinedButton( + modifier = Modifier + .width(width = FirefoxTheme.layout.size.maxWidth.small) + .semantics { + testTag = pageState.title + "onboarding_card.negative_button" + }, + text = pageState.secondaryButton.text, + onClick = pageState.secondaryButton.onClick, + ) + } } - } - LaunchedEffect(pageState) { - pageState.onRecordImpressionEvent() + LaunchedEffect(pageState) { + pageState.onRecordImpressionEvent() + } } } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/OnboardingScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/OnboardingScreen.kt @@ -5,7 +5,6 @@ package org.mozilla.fenix.onboarding.view import androidx.activity.compose.BackHandler -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.statusBarsPadding @@ -13,6 +12,7 @@ import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.PagerState import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.State @@ -266,54 +266,55 @@ private fun OnboardingContent( ) { val nestedScrollConnection = remember { DisableForwardSwipeNestedScrollConnection(pagerState) } - Column( - modifier = Modifier - .background(FirefoxTheme.colors.layer1) - .statusBarsPadding(), - ) { - HorizontalPager( - state = pagerState, - key = { pagesToDisplay[it].type }, + Surface { + Column( modifier = Modifier - .weight(1f) - .nestedScroll(nestedScrollConnection), - ) { pageIndex -> - // protect against a rare case where the user goes to the marketing screen at the same - // moment it gets removed by [MarketingPageRemovalSupport] - val pageUiState = pagesToDisplay.getOrElse(pageIndex) { pagesToDisplay[it.dec()] } - val onboardingPageState = mapToOnboardingPageState( - onboardingPageUiData = pageUiState, - onMakeFirefoxDefaultClick = onMakeFirefoxDefaultClick, - onMakeFirefoxDefaultSkipClick = onMakeFirefoxDefaultSkipClick, - onSignInButtonClick = onSignInButtonClick, - onSignInSkipClick = onSignInSkipClick, - onNotificationPermissionButtonClick = onNotificationPermissionButtonClick, - onNotificationPermissionSkipClick = onNotificationPermissionSkipClick, - onAddFirefoxWidgetClick = onAddFirefoxWidgetClick, - onAddFirefoxWidgetSkipClick = onSkipFirefoxWidgetClick, - onCustomizeToolbarButtonClick = onCustomizeToolbarButtonClick, - onCustomizeThemeClick = onCustomizeThemeButtonClick, - onTermsOfServiceButtonClick = onAgreeAndConfirmTermsOfService, - ) - OnboardingPageForType( - type = pageUiState.type, - state = onboardingPageState, - onboardingStore = onboardingStore, - termsOfServiceEventHandler = termsOfServiceEventHandler, - onMarketingDataLearnMoreClick = onMarketingDataLearnMoreClick, - onMarketingOptInToggle = onMarketingOptInToggle, - onMarketingDataContinueClick = onMarketingDataContinueClick, + .statusBarsPadding(), + ) { + HorizontalPager( + state = pagerState, + key = { pagesToDisplay[it].type }, + modifier = Modifier + .weight(1f) + .nestedScroll(nestedScrollConnection), + ) { pageIndex -> + // protect against a rare case where the user goes to the marketing screen at the same + // moment it gets removed by [MarketingPageRemovalSupport] + val pageUiState = pagesToDisplay.getOrElse(pageIndex) { pagesToDisplay[it.dec()] } + val onboardingPageState = mapToOnboardingPageState( + onboardingPageUiData = pageUiState, + onMakeFirefoxDefaultClick = onMakeFirefoxDefaultClick, + onMakeFirefoxDefaultSkipClick = onMakeFirefoxDefaultSkipClick, + onSignInButtonClick = onSignInButtonClick, + onSignInSkipClick = onSignInSkipClick, + onNotificationPermissionButtonClick = onNotificationPermissionButtonClick, + onNotificationPermissionSkipClick = onNotificationPermissionSkipClick, + onAddFirefoxWidgetClick = onAddFirefoxWidgetClick, + onAddFirefoxWidgetSkipClick = onSkipFirefoxWidgetClick, + onCustomizeToolbarButtonClick = onCustomizeToolbarButtonClick, + onCustomizeThemeClick = onCustomizeThemeButtonClick, + onTermsOfServiceButtonClick = onAgreeAndConfirmTermsOfService, + ) + OnboardingPageForType( + type = pageUiState.type, + state = onboardingPageState, + onboardingStore = onboardingStore, + termsOfServiceEventHandler = termsOfServiceEventHandler, + onMarketingDataLearnMoreClick = onMarketingDataLearnMoreClick, + onMarketingOptInToggle = onMarketingOptInToggle, + onMarketingDataContinueClick = onMarketingDataContinueClick, + ) + } + + PagerIndicator( + pagerState = pagerState, + modifier = Modifier + .align(Alignment.CenterHorizontally) + .padding(bottom = 16.dp), + inactiveColor = MaterialTheme.colorScheme.outlineVariant, + leaveTrail = true, ) } - - PagerIndicator( - pagerState = pagerState, - modifier = Modifier - .align(Alignment.CenterHorizontally) - .padding(bottom = 16.dp), - inactiveColor = MaterialTheme.colorScheme.outlineVariant, - leaveTrail = true, - ) } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/TermsOfServiceOnboardingPage.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/TermsOfServiceOnboardingPage.kt @@ -5,7 +5,6 @@ package org.mozilla.fenix.onboarding.view import androidx.compose.foundation.Image -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.Column @@ -17,6 +16,8 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -46,80 +47,79 @@ fun TermsOfServiceOnboardingPage( pageState: OnboardingPageState, eventHandler: OnboardingTermsOfServiceEventHandler, ) { - BoxWithConstraints( - modifier = Modifier - .background(FirefoxTheme.colors.layer1) - .padding(horizontal = 16.dp), - ) { - val boxWithConstraintsScope = this - - // Base - Column( - modifier = Modifier - .fillMaxSize() - .verticalScroll(rememberScrollState()), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.SpaceBetween, + Surface { + BoxWithConstraints( + modifier = Modifier.padding(horizontal = 16.dp), ) { - Spacer(Modifier) - - with(pageState) { - // Main content group - Column( - modifier = Modifier - .padding(vertical = 32.dp), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center, - ) { - Image( - painter = painterResource(id = imageRes), - contentDescription = null, + val boxWithConstraintsScope = this + + // Base + Column( + modifier = Modifier + .fillMaxSize() + .verticalScroll(rememberScrollState()), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.SpaceBetween, + ) { + Spacer(Modifier) + + with(pageState) { + // Main content group + Column( modifier = Modifier - .heightIn(max = imageHeight(boxWithConstraintsScope)) - .height(167.dp) - .width(161.dp), - ) - - Spacer(Modifier.height(24.dp)) - - Text( - text = title, - color = FirefoxTheme.colors.textPrimary, - textAlign = TextAlign.Center, - style = FirefoxTheme.typography.headline5, - ) - - Spacer(Modifier.height(8.dp)) - - Text( - text = description, - color = FirefoxTheme.colors.textSecondary, - textAlign = TextAlign.Center, - style = FirefoxTheme.typography.subtitle1, - ) - } - - Column( - horizontalAlignment = Alignment.CenterHorizontally, - modifier = Modifier.padding(bottom = 24.dp), - ) { - BodyText(pageState, eventHandler) - - Spacer(Modifier.height(24.dp)) - - FilledButton( - text = primaryButton.text, - modifier = Modifier - .width(width = FirefoxTheme.layout.size.maxWidth.small) - .semantics { testTag = title + "onboarding_card.positive_button" }, - onClick = primaryButton.onClick, - ) + .padding(vertical = 32.dp), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, + ) { + Image( + painter = painterResource(id = imageRes), + contentDescription = null, + modifier = Modifier + .heightIn(max = imageHeight(boxWithConstraintsScope)) + .height(167.dp) + .width(161.dp), + ) + + Spacer(Modifier.height(24.dp)) + + Text( + text = title, + textAlign = TextAlign.Center, + style = FirefoxTheme.typography.headline5, + ) + + Spacer(Modifier.height(8.dp)) + + Text( + text = description, + color = MaterialTheme.colorScheme.onSurfaceVariant, + textAlign = TextAlign.Center, + style = FirefoxTheme.typography.subtitle1, + ) + } + + Column( + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier.padding(bottom = 24.dp), + ) { + BodyText(pageState, eventHandler) + + Spacer(Modifier.height(24.dp)) + + FilledButton( + text = primaryButton.text, + modifier = Modifier + .width(width = FirefoxTheme.layout.size.maxWidth.small) + .semantics { testTag = title + "onboarding_card.positive_button" }, + onClick = primaryButton.onClick, + ) + } } } - } - LaunchedEffect(pageState) { - pageState.onRecordImpressionEvent() + LaunchedEffect(pageState) { + pageState.onRecordImpressionEvent() + } } } } @@ -156,7 +156,7 @@ private fun BodyText( ), style = FirefoxTheme.typography.caption.copy( textAlign = TextAlign.Center, - color = FirefoxTheme.colors.textSecondary, + color = MaterialTheme.colorScheme.onSurfaceVariant, ), shouldApplyAccessibleSize = true, ) @@ -168,7 +168,7 @@ private fun BodyText( ), style = FirefoxTheme.typography.caption.copy( textAlign = TextAlign.Center, - color = FirefoxTheme.colors.textSecondary, + color = MaterialTheme.colorScheme.onSurfaceVariant, ), shouldApplyAccessibleSize = true, ) @@ -180,7 +180,7 @@ private fun BodyText( ), style = FirefoxTheme.typography.caption.copy( textAlign = TextAlign.Center, - color = FirefoxTheme.colors.textSecondary, + color = MaterialTheme.colorScheme.onSurfaceVariant, ), shouldApplyAccessibleSize = true, ) diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/ThemeOnboardingPage.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/ThemeOnboardingPage.kt @@ -26,6 +26,8 @@ import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -51,7 +53,6 @@ import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview import mozilla.components.compose.base.button.FilledButton import mozilla.components.compose.base.utils.inComposePreview import mozilla.components.lib.state.ext.observeAsState -import mozilla.components.ui.colors.PhotonColors import org.mozilla.fenix.R import org.mozilla.fenix.onboarding.store.OnboardingStore import org.mozilla.fenix.onboarding.store.applyThemeIfRequired @@ -112,85 +113,86 @@ fun ThemeOnboardingPage( pageState: OnboardingPageState, onThemeSelectionClicked: (ThemeOptionType) -> Unit, ) { - BoxWithConstraints { - val boxWithConstraintsScope = this - // Base - Column( - modifier = Modifier - .background(FirefoxTheme.colors.layer1) - .padding(horizontal = 16.dp, vertical = 24.dp) - .fillMaxSize() - .verticalScroll(rememberScrollState()), - verticalArrangement = Arrangement.SpaceBetween, - horizontalAlignment = Alignment.CenterHorizontally, - ) { - with(pageState) { - // Main content group - Column(horizontalAlignment = Alignment.CenterHorizontally) { - Spacer(Modifier) - - Image( - painter = painterResource(id = imageRes), - contentDescription = stringResource( - R.string.onboarding_customize_theme_main_image_content_description, - ), - modifier = Modifier.height(mainImageHeight(boxWithConstraintsScope)), - ) - - Spacer(Modifier.height(32.dp)) - - Text( - text = title, - color = FirefoxTheme.colors.textPrimary, - textAlign = TextAlign.Center, - style = FirefoxTheme.typography.headline5, - ) - - Spacer(Modifier.height(16.dp)) - - Text( - text = description, - color = FirefoxTheme.colors.textPrimary, - textAlign = TextAlign.Center, - style = FirefoxTheme.typography.body2, - ) - - Spacer(Modifier.height(32.dp)) - - val state by onboardingStore.observeAsState(initialValue = onboardingStore.state) { state -> state } - - if (!inComposePreview) { - LaunchedEffect(onboardingStore.state.themeOptionSelected) { - applyThemeIfRequired(onboardingStore.state.themeOptionSelected) + Surface { + BoxWithConstraints { + val boxWithConstraintsScope = this + // Base + Column( + modifier = Modifier + .padding(horizontal = 16.dp, vertical = 24.dp) + .fillMaxSize() + .verticalScroll(rememberScrollState()), + verticalArrangement = Arrangement.SpaceBetween, + horizontalAlignment = Alignment.CenterHorizontally, + ) { + with(pageState) { + // Main content group + Column(horizontalAlignment = Alignment.CenterHorizontally) { + Spacer(Modifier) + + Image( + painter = painterResource(id = imageRes), + contentDescription = stringResource( + R.string.onboarding_customize_theme_main_image_content_description, + ), + modifier = Modifier.height(mainImageHeight(boxWithConstraintsScope)), + ) + + Spacer(Modifier.height(32.dp)) + + Text( + text = title, + textAlign = TextAlign.Center, + style = FirefoxTheme.typography.headline5, + ) + + Spacer(Modifier.height(16.dp)) + + Text( + text = description, + textAlign = TextAlign.Center, + style = FirefoxTheme.typography.body2, + ) + + Spacer(Modifier.height(32.dp)) + + val state by onboardingStore.observeAsState( + initialValue = onboardingStore.state, + ) { state -> state } + + if (!inComposePreview) { + LaunchedEffect(onboardingStore.state.themeOptionSelected) { + applyThemeIfRequired(onboardingStore.state.themeOptionSelected) + } } - } - Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) { - themeOptions?.let { - ThemeOptions( - boxWithConstraintsScope = boxWithConstraintsScope, - options = it, - selectedOption = state.themeOptionSelected, - onClick = onThemeSelectionClicked, - ) + Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) { + themeOptions?.let { + ThemeOptions( + boxWithConstraintsScope = boxWithConstraintsScope, + options = it, + selectedOption = state.themeOptionSelected, + onClick = onThemeSelectionClicked, + ) + } } } - } - Spacer(modifier = Modifier.height(16.dp)) + Spacer(modifier = Modifier.height(16.dp)) - FilledButton( - text = primaryButton.text, - modifier = Modifier - .width(width = FirefoxTheme.layout.size.maxWidth.small) - .semantics { testTag = title + "onboarding_card.positive_button" }, - onClick = { primaryButton.onClick() }, - ) + FilledButton( + text = primaryButton.text, + modifier = Modifier + .width(width = FirefoxTheme.layout.size.maxWidth.small) + .semantics { testTag = title + "onboarding_card.positive_button" }, + onClick = { primaryButton.onClick() }, + ) + } } - } - LaunchedEffect(pageState) { - pageState.onRecordImpressionEvent() + LaunchedEffect(pageState) { + pageState.onRecordImpressionEvent() + } } } } @@ -260,7 +262,7 @@ private fun SelectableImageItem( .width(optionImageWidth(boxWithConstraintsScope)) .border( 2.dp, - FirefoxTheme.colors.actionPrimary, + MaterialTheme.colorScheme.primary, RoundedCornerShape(borderModifier), ) } else { @@ -271,7 +273,6 @@ private fun SelectableImageItem( Text( text = themeOption.label, onTextLayout = { if (!isMultilineLabel) { isMultilineLabel = it.lineCount > 1 } }, - color = FirefoxTheme.colors.textPrimary, modifier = Modifier.padding(vertical = 6.dp), style = FirefoxTheme.typography.caption, ) @@ -280,7 +281,7 @@ private fun SelectableImageItem( Box( modifier = Modifier .background( - color = FirefoxTheme.colors.layerAccent, + color = MaterialTheme.colorScheme.primary, shape = CircleShape, ) .size(24.dp), @@ -290,14 +291,14 @@ private fun SelectableImageItem( painter = painterResource(id = iconsR.drawable.mozac_ic_checkmark_24), contentDescription = null, // decorative only. modifier = Modifier.size(12.dp), - tint = PhotonColors.White, + tint = MaterialTheme.colorScheme.onPrimary, ) } } else { Box( modifier = Modifier .size(24.dp) - .border(2.dp, FirefoxTheme.colors.actionSecondary, CircleShape), + .border(2.dp, MaterialTheme.colorScheme.onSurfaceVariant, CircleShape), contentAlignment = Alignment.Center, ) { } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/ToolbarOnboardingPage.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/onboarding/view/ToolbarOnboardingPage.kt @@ -26,6 +26,8 @@ import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -45,7 +47,6 @@ import androidx.compose.ui.unit.dp import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview import mozilla.components.compose.base.button.FilledButton import mozilla.components.lib.state.ext.observeAsState -import mozilla.components.ui.colors.PhotonColors import org.mozilla.fenix.R import org.mozilla.fenix.onboarding.store.OnboardingStore import org.mozilla.fenix.theme.FirefoxTheme @@ -99,79 +100,80 @@ fun ToolbarOnboardingPage( pageState: OnboardingPageState, onToolbarSelectionClicked: (ToolbarOptionType) -> Unit, ) { - BoxWithConstraints { - val boxWithConstraintsScope = this - // Base - Column( - modifier = Modifier - .background(FirefoxTheme.colors.layer1) - .padding(horizontal = 16.dp, vertical = 24.dp) - .fillMaxSize() - .verticalScroll(rememberScrollState()), - verticalArrangement = Arrangement.SpaceBetween, - horizontalAlignment = Alignment.CenterHorizontally, - ) { - with(pageState) { - // Main content group - Column(horizontalAlignment = Alignment.CenterHorizontally) { - Spacer(Modifier) - - Image( - painter = painterResource(id = imageRes), - contentDescription = stringResource( - R.string.onboarding_customize_toolbar_main_image_content_description, - ), - modifier = Modifier.height(mainImageHeight(boxWithConstraintsScope)), - ) - - Spacer(Modifier.height(32.dp)) - - Text( - text = title, - color = FirefoxTheme.colors.textPrimary, - textAlign = TextAlign.Center, - style = FirefoxTheme.typography.headline5, - ) - - Spacer(Modifier.height(16.dp)) - - Text( - text = description, - color = FirefoxTheme.colors.textPrimary, - textAlign = TextAlign.Center, - style = FirefoxTheme.typography.body2, - ) - - Spacer(Modifier.height(34.dp)) - - val state by onboardingStore.observeAsState(initialValue = onboardingStore.state) { state -> state } - - Row(Modifier.width(176.dp), horizontalArrangement = Arrangement.Center) { - toolbarOptions?.let { - ToolbarOptions( - boxWithConstraintsScope = boxWithConstraintsScope, - options = it, - selectedOption = state.toolbarOptionSelected, - onClick = onToolbarSelectionClicked, - ) + Surface { + BoxWithConstraints { + val boxWithConstraintsScope = this + // Base + Column( + modifier = Modifier + .padding(horizontal = 16.dp, vertical = 24.dp) + .fillMaxSize() + .verticalScroll(rememberScrollState()), + verticalArrangement = Arrangement.SpaceBetween, + horizontalAlignment = Alignment.CenterHorizontally, + ) { + with(pageState) { + // Main content group + Column(horizontalAlignment = Alignment.CenterHorizontally) { + Spacer(Modifier) + + Image( + painter = painterResource(id = imageRes), + contentDescription = stringResource( + R.string.onboarding_customize_toolbar_main_image_content_description, + ), + modifier = Modifier.height(mainImageHeight(boxWithConstraintsScope)), + ) + + Spacer(Modifier.height(32.dp)) + + Text( + text = title, + textAlign = TextAlign.Center, + style = FirefoxTheme.typography.headline5, + ) + + Spacer(Modifier.height(16.dp)) + + Text( + text = description, + textAlign = TextAlign.Center, + style = FirefoxTheme.typography.body2, + ) + + Spacer(Modifier.height(34.dp)) + + val state by onboardingStore.observeAsState( + initialValue = onboardingStore.state, + ) { state -> state } + + Row(Modifier.width(176.dp), horizontalArrangement = Arrangement.Center) { + toolbarOptions?.let { + ToolbarOptions( + boxWithConstraintsScope = boxWithConstraintsScope, + options = it, + selectedOption = state.toolbarOptionSelected, + onClick = onToolbarSelectionClicked, + ) + } } } - } - Spacer(modifier = Modifier.height(16.dp)) + Spacer(modifier = Modifier.height(16.dp)) - FilledButton( - text = primaryButton.text, - modifier = Modifier - .width(width = FirefoxTheme.layout.size.maxWidth.small) - .semantics { testTag = title + "onboarding_card.positive_button" }, - onClick = primaryButton.onClick, - ) + FilledButton( + text = primaryButton.text, + modifier = Modifier + .width(width = FirefoxTheme.layout.size.maxWidth.small) + .semantics { testTag = title + "onboarding_card.positive_button" }, + onClick = primaryButton.onClick, + ) + } } - } - LaunchedEffect(pageState) { - pageState.onRecordImpressionEvent() + LaunchedEffect(pageState) { + pageState.onRecordImpressionEvent() + } } } } @@ -242,7 +244,7 @@ private fun SelectableImageItem( .width(optionImageWidth(boxWithConstraintsScope)) .border( 2.dp, - FirefoxTheme.colors.actionPrimary, + MaterialTheme.colorScheme.primary, RoundedCornerShape(borderModifier), ) } else { @@ -252,7 +254,6 @@ private fun SelectableImageItem( Text( text = toolbarOption.label, - color = FirefoxTheme.colors.textPrimary, modifier = Modifier.padding(vertical = 6.dp), style = FirefoxTheme.typography.caption, ) @@ -261,7 +262,7 @@ private fun SelectableImageItem( Box( modifier = Modifier .background( - color = FirefoxTheme.colors.layerAccent, + color = MaterialTheme.colorScheme.primary, shape = CircleShape, ) .size(24.dp), @@ -271,14 +272,14 @@ private fun SelectableImageItem( painter = painterResource(id = iconsR.drawable.mozac_ic_checkmark_24), contentDescription = null, // decorative only. modifier = Modifier.size(12.dp), - tint = PhotonColors.White, + tint = MaterialTheme.colorScheme.onPrimary, ) } } else { Box( modifier = Modifier .size(24.dp) - .border(2.dp, FirefoxTheme.colors.actionSecondary, CircleShape), + .border(2.dp, MaterialTheme.colorScheme.onSurfaceVariant, CircleShape), contentAlignment = Alignment.Center, ) { }