commit e9a6261c35b91674a7cb627283ac2d7c15e012c8 parent a9f870d7a4fe04f8f249c7dd1a0d63a6dbe44c17 Author: Serban Stanca <sstanca@mozilla.com> Date: Tue, 2 Dec 2025 15:40:13 +0200 Revert "Bug 1993368, Bug 2003337, Bug 1993856 - Part 40: Migrate ImagesPlaceholder to use M3 color tokens r=android-reviewers,007" as requested by aaronmt for causing CreditCardAutofill related fenix-debug failures. This reverts commit 52fdd186700f329256cc2fd782ad6a48d0549fdb. This reverts commit c34845216f2d5450ae92b73750775d5c3b77864a. This reverts commit f5de84c293fd05b61d9d26eac45bdab8fbe05be8. This reverts commit 9d5ec4665d21c6cee93f48db44d1a397affbc07c. This reverts commit a2e4ac9ecd70d47a7fcf2ba3911135867397c883. This reverts commit ddcf5ec0787055978e20178a6ad4a92f4903cea5. This reverts commit fc351100eafea724a49c0877100e07bd8de2fd31. Diffstat:
8 files changed, 323 insertions(+), 404 deletions(-)
diff --git a/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/button/Button.kt b/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/button/Button.kt @@ -5,6 +5,7 @@ package mozilla.components.compose.base.button import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues @@ -13,10 +14,8 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.ButtonDefaults.outlinedButtonBorder -import androidx.compose.material3.CircularProgressIndicator 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.ReadOnlyComposable @@ -26,12 +25,9 @@ import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextAlign -import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp import mozilla.components.compose.base.theme.AcornTheme -import mozilla.components.compose.base.theme.acornPrivateColorScheme -import mozilla.components.compose.base.theme.privateColorPalette import androidx.compose.material3.Button as M3Button import androidx.compose.material3.OutlinedButton as M3OutlinedButton import mozilla.components.ui.icons.R as iconsR @@ -63,7 +59,6 @@ private fun ButtonContent( ) Spacer(modifier = Modifier.width(AcornTheme.layout.space.static100)) } - Text( text = text, textAlign = TextAlign.Center, @@ -111,40 +106,6 @@ fun FilledButton( } /** - * Filled button. - * - * @param onClick Invoked when the user clicks on the button. - * @param modifier [Modifier] to be applied to the layout. - * @param enabled Controls the enabled state of the button. - * When false, this button will not be clickable. - * @param contentColor The color to be used for the button's text and icon when enabled. - * @param containerColor The background color of the button when enabled. - * @param content [Composable] content to be displayed in the button. - */ -@Composable -fun FilledButton( - onClick: () -> Unit, - modifier: Modifier = Modifier, - enabled: Boolean = true, - contentColor: Color = ButtonDefaults.buttonColors().contentColor, - containerColor: Color = ButtonDefaults.buttonColors().containerColor, - content: @Composable () -> Unit, -) { - M3Button( - onClick = onClick, - modifier = modifier, - enabled = enabled, - contentPadding = AcornTheme.buttonContentPadding(), - colors = ButtonDefaults.buttonColors( - containerColor = containerColor, - contentColor = contentColor, - ), - ) { - content() - } -} - -/** * Outlined button. * * @param text The button text to be displayed. @@ -230,19 +191,17 @@ fun DestructiveButton( } @Composable -private fun ButtonPreviewContent() { - Surface { +@PreviewLightDark +private fun ButtonPreview() { + AcornTheme { Column( - modifier = Modifier.padding(16.dp), + modifier = Modifier + .background(MaterialTheme.colorScheme.surface) + .padding(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp), ) { FilledButton( text = "Label", - onClick = {}, - ) - - FilledButton( - text = "Label", icon = painterResource(iconsR.drawable.mozac_ic_collection_24), onClick = {}, ) @@ -254,17 +213,6 @@ private fun ButtonPreviewContent() { onClick = {}, ) - FilledButton( - onClick = {}, - ) { - CircularProgressIndicator(color = MaterialTheme.colorScheme.onPrimary) - } - - OutlinedButton( - text = "Label", - onClick = {}, - ) - OutlinedButton( text = "Label", icon = painterResource(iconsR.drawable.mozac_ic_collection_24), @@ -280,11 +228,6 @@ private fun ButtonPreviewContent() { DestructiveButton( text = "Label", - onClick = {}, - ) - - DestructiveButton( - text = "Label", icon = painterResource(iconsR.drawable.mozac_ic_collection_24), onClick = {}, ) @@ -298,22 +241,3 @@ private fun ButtonPreviewContent() { } } } - -@Composable -@PreviewLightDark -private fun ButtonPreview() { - AcornTheme { - ButtonPreviewContent() - } -} - -@Composable -@Preview -private fun ButtonPrivatePreview() { - AcornTheme( - colors = privateColorPalette, - colorScheme = acornPrivateColorScheme(), - ) { - ButtonPreviewContent() - } -} diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/DismissibleItemBackground.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/DismissibleItemBackground.kt @@ -4,6 +4,7 @@ package org.mozilla.fenix.compose +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer @@ -14,19 +15,15 @@ import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.Icon -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Shape import androidx.compose.ui.res.painterResource -import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp +import org.mozilla.fenix.R import org.mozilla.fenix.theme.FirefoxTheme -import org.mozilla.fenix.theme.Theme -import mozilla.components.ui.icons.R as iconsR /** * The background of an item that is being swiped horizontally. @@ -46,12 +43,12 @@ fun DismissibleItemBackground( if (isSwipeActive) { Card( modifier = modifier.fillMaxSize(), - colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh), + colors = CardDefaults.cardColors(containerColor = FirefoxTheme.colors.layer3), shape = shape, ) { Box(modifier = Modifier.fillMaxSize()) { Icon( - painter = painterResource(iconsR.drawable.mozac_ic_delete_24), + painter = painterResource(R.drawable.ic_delete), contentDescription = null, modifier = Modifier .padding(horizontal = 32.dp) @@ -62,7 +59,7 @@ fun DismissibleItemBackground( Alignment.CenterStart }, ), - tint = MaterialTheme.colorScheme.error, + tint = FirefoxTheme.colors.iconCritical, ) } } @@ -70,9 +67,12 @@ fun DismissibleItemBackground( } @Composable -private fun DismissibleItemBackgroundPreviewContent() { - Surface { - Column { +@PreviewLightDark +private fun DismissedTabBackgroundPreview() { + FirefoxTheme { + Column( + modifier = Modifier.background(color = FirefoxTheme.colors.layer1), + ) { Box(modifier = Modifier.height(56.dp)) { DismissibleItemBackground( isSwipeActive = true, @@ -102,19 +102,3 @@ private fun DismissibleItemBackgroundPreviewContent() { } } } - -@Composable -@PreviewLightDark -private fun DismissedTabBackgroundPreview() { - FirefoxTheme { - DismissibleItemBackgroundPreviewContent() - } -} - -@Composable -@Preview -private fun DismissedTabBackgroundPrivatePreview() { - FirefoxTheme(theme = Theme.Private) { - DismissibleItemBackgroundPreviewContent() - } -} diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ImagesPlaceholder.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/ImagesPlaceholder.kt @@ -7,13 +7,12 @@ package org.mozilla.fenix.compose import androidx.compose.foundation.Image import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.painter.ColorPainter import androidx.compose.ui.graphics.painter.Painter -import androidx.compose.ui.tooling.preview.PreviewLightDark +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import mozilla.components.support.images.compose.loader.Fallback import mozilla.components.support.images.compose.loader.ImageLoaderScope @@ -63,15 +62,11 @@ internal fun DefaultImagePlaceholder( modifier: Modifier, contentDescription: String? = null, ) { - Image( - painter = ColorPainter(MaterialTheme.colorScheme.surfaceContainerHighest), - contentDescription = contentDescription, - modifier = modifier, - ) + Image(ColorPainter(FirefoxTheme.colors.layer2), contentDescription, modifier) } @Composable -@PreviewLightDark +@Preview private fun DefaultImagePlaceholderPreview() { FirefoxTheme { DefaultImagePlaceholder( diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/SwipeToDismissBox2.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/SwipeToDismissBox2.kt @@ -24,10 +24,8 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.offset -import androidx.compose.material3.MaterialTheme import androidx.compose.material3.SnackbarHost import androidx.compose.material3.SnackbarHostState -import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -286,56 +284,54 @@ private fun SwipeToDismissBoxPreview() { val coroutineScope = rememberCoroutineScope() FirefoxTheme { - Surface { - Box( - modifier = Modifier.fillMaxSize(), - ) { - Column { - SwipeableItem( - text = "Swipe to right ->", - enableDismissFromEndToStart = false, - onSwipeToEnd = { - coroutineScope.launch { - snackbarState.displaySnackbar(message = "Dismiss") - } - }, - ) - - Spacer(Modifier.height(30.dp)) - - SwipeableItem( - enableDismissFromStartToEnd = false, - text = "<- Swipe to left", - onSwipeToStart = { - coroutineScope.launch { - snackbarState.displaySnackbar(message = "Dismiss") - } - }, - ) - - Spacer(Modifier.height(30.dp)) - - SwipeableItem( - text = "<- Swipe both ways ->", - onSwipeToStart = { - coroutineScope.launch { - snackbarState.displaySnackbar(message = "Dismiss") - } - }, - onSwipeToEnd = { - coroutineScope.launch { - snackbarState.displaySnackbar(message = "Dismiss") - } - }, - ) - } + Box( + modifier = Modifier.fillMaxSize(), + ) { + Column { + SwipeableItem( + text = "Swipe to right ->", + enableDismissFromEndToStart = false, + onSwipeToEnd = { + coroutineScope.launch { + snackbarState.displaySnackbar(message = "Dismiss") + } + }, + ) + + Spacer(Modifier.height(30.dp)) + + SwipeableItem( + enableDismissFromStartToEnd = false, + text = "<- Swipe to left", + onSwipeToStart = { + coroutineScope.launch { + snackbarState.displaySnackbar(message = "Dismiss") + } + }, + ) + + Spacer(Modifier.height(30.dp)) + + SwipeableItem( + text = "<- Swipe both ways ->", + onSwipeToStart = { + coroutineScope.launch { + snackbarState.displaySnackbar(message = "Dismiss") + } + }, + onSwipeToEnd = { + coroutineScope.launch { + snackbarState.displaySnackbar(message = "Dismiss") + } + }, + ) + } - SnackbarHost( - hostState = snackbarState, - modifier = Modifier.align(Alignment.BottomCenter), - ) { - Snackbar(snackbarData = it) - } + SnackbarHost( + hostState = snackbarState, + modifier = Modifier.align(Alignment.BottomCenter), + ) { + Snackbar(snackbarData = it) } } } @@ -379,12 +375,14 @@ private fun SwipeableItem( Box( modifier = Modifier .fillMaxSize() - .background(MaterialTheme.colorScheme.surfaceContainerHigh), + .background(FirefoxTheme.colors.layerAccent), ) }, ) { Row( - modifier = Modifier.fillMaxSize(), + modifier = Modifier + .fillMaxSize() + .background(FirefoxTheme.colors.layer1), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically, ) { diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/crashes/UnsubmittedCrashDialog.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/crashes/UnsubmittedCrashDialog.kt @@ -8,8 +8,10 @@ import android.app.Dialog import android.content.Context import android.os.Bundle import android.view.ViewGroup +import androidx.compose.foundation.background import androidx.compose.foundation.clickable 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 @@ -20,9 +22,10 @@ import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.shape.RoundedCornerShape 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.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -30,6 +33,7 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.platform.ComposeView import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.ViewCompositionStrategy @@ -38,11 +42,8 @@ import androidx.compose.ui.semantics.heading import androidx.compose.ui.semantics.semantics import androidx.compose.ui.text.style.TextDecoration import androidx.compose.ui.tooling.preview.PreviewLightDark -import androidx.compose.ui.tooling.preview.PreviewParameter -import androidx.compose.ui.tooling.preview.PreviewParameterProvider import androidx.compose.ui.unit.dp import androidx.fragment.app.DialogFragment -import mozilla.components.compose.base.button.TextButton import mozilla.components.lib.crash.store.CrashAction import org.mozilla.fenix.R import org.mozilla.fenix.compose.LinkText @@ -70,12 +71,18 @@ class UnsubmittedCrashDialog( setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { FirefoxTheme { - CrashCard( - dismiss = ::dismiss, - dispatcher = dispatcher, - crashIDs = crashIDs, - cardContext = localContext, - ) + Box( + modifier = Modifier + .clip(RoundedCornerShape(8.dp)) + .background(FirefoxTheme.colors.layer1), + ) { + CrashCard( + dismiss = ::dismiss, + dispatcher = dispatcher, + crashIDs = crashIDs, + cardContext = localContext, + ) + } } } }, @@ -94,6 +101,7 @@ class UnsubmittedCrashDialog( } } +@Suppress("LongMethod") @Composable private fun CrashCard( dismiss: () -> Unit, @@ -101,9 +109,11 @@ private fun CrashCard( crashIDs: List<String>?, cardContext: Context?, ) { + val requestedByDevs = !crashIDs.isNullOrEmpty() + val context = LocalContext.current + dispatcher(CrashAction.PromptShown) - val requestedByDevs = !crashIDs.isNullOrEmpty() val msg = if (requestedByDevs) { if (crashIDs.size == 1) { stringResource( @@ -124,93 +134,150 @@ private fun CrashCard( ) } - Surface( - shape = RoundedCornerShape(8.dp), - ) { - if (!requestedByDevs) { - CrashDialog( - msg = msg, - dismiss = dismiss, - dispatcher = dispatcher, - ) - } else { - CrashPullDialog( - msg = msg, - dismiss = dismiss, - dispatcher = dispatcher, - crashIDs = crashIDs, - cardContext = cardContext, - ) - } - } -} - -@Composable -private fun CrashDialog( - msg: String, - dismiss: () -> Unit, - dispatcher: (action: CrashAction) -> Unit, -) { var checkboxChecked by remember { mutableStateOf(false) } - Column( - modifier = Modifier - .width(280.dp) - .padding(top = 16.dp, start = 16.dp, end = 16.dp, bottom = 0.dp), - verticalArrangement = Arrangement.spacedBy(16.dp), - ) { - Text( - text = msg, - style = FirefoxTheme.typography.headline7, + if (!requestedByDevs) { + Column( modifier = Modifier - .semantics { heading() }, - ) - - AnnotatedStringBody() - - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier.widthIn(max = 248.dp), + .width(280.dp) + .padding(top = 16.dp, start = 16.dp, end = 16.dp, bottom = 0.dp), + verticalArrangement = Arrangement.spacedBy(16.dp), ) { - Checkbox( - checked = checkboxChecked, - onCheckedChange = { checkboxChecked = it }, - modifier = Modifier.padding(start = 0.dp, end = 0.dp), - ) - Text( - text = stringResource(R.string.unsubmitted_crash_dialog_checkbox_label), - style = FirefoxTheme.typography.subtitle1, + text = msg, + color = FirefoxTheme.colors.textPrimary, + style = FirefoxTheme.typography.headline7, + modifier = Modifier + .semantics { heading() }, ) - } - Row( - horizontalArrangement = Arrangement.spacedBy( - space = 8.dp, - alignment = Alignment.End, - ), - modifier = Modifier.fillMaxWidth(), - ) { - TextButton( - text = stringResource(R.string.unsubmitted_crash_dialog_negative_button_2), - onClick = { - dispatcher(CrashAction.CancelTapped) - dismiss() - }, - ) + AnnotatedStringBody() - TextButton( - text = stringResource(R.string.unsubmitted_crash_dialog_positive_button_2), - onClick = { - dispatcher( - CrashAction.ReportTapped( - checkboxChecked, - listOf(), - ), + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier.widthIn(max = 248.dp), + ) { + Checkbox( + checked = checkboxChecked, + colors = CheckboxDefaults.colors( + checkedColor = FirefoxTheme.colors.formSelected, + uncheckedColor = FirefoxTheme.colors.formDefault, + ), + onCheckedChange = { checkboxChecked = it }, + modifier = Modifier.padding(start = 0.dp, end = 0.dp), + ) + Text( + text = stringResource(R.string.unsubmitted_crash_dialog_checkbox_label), + color = FirefoxTheme.colors.textPrimary, + style = FirefoxTheme.typography.subtitle1, + ) + } + Row( + horizontalArrangement = Arrangement.spacedBy( + space = 8.dp, + alignment = Alignment.End, + ), + modifier = Modifier.fillMaxWidth(), + ) { + TextButton( + onClick = { + dispatcher(CrashAction.CancelTapped) + dismiss() + }, + ) { + Text( + text = stringResource(R.string.unsubmitted_crash_dialog_negative_button_2), + color = MaterialTheme.colorScheme.tertiary, + style = FirefoxTheme.typography.button, + ) + } + TextButton( + onClick = { + dispatcher( + CrashAction.ReportTapped( + checkboxChecked, + listOf(), + ), + ) + dismiss() + }, + ) { + Text( + text = stringResource(R.string.unsubmitted_crash_dialog_positive_button_2), + color = MaterialTheme.colorScheme.tertiary, + style = FirefoxTheme.typography.button, ) - dismiss() - }, + } + } + } + } else { + Column(modifier = Modifier.padding(16.dp)) { + Text( + text = msg, + modifier = Modifier + .semantics { heading() }, + color = FirefoxTheme.colors.textPrimary, + style = FirefoxTheme.typography.headline5, ) + + Spacer(modifier = Modifier.height(16.dp)) + + Row( + horizontalArrangement = Arrangement.SpaceBetween, + modifier = Modifier.fillMaxWidth(), + ) { + Text( + text = stringResource(R.string.unsubmitted_crash_requested_by_devs_learn_more).uppercase(), + color = FirefoxTheme.colors.actionPrimary, + modifier = Modifier.clickable { + if (cardContext != null) { + SupportUtils.launchSandboxCustomTab( + context = cardContext, + url = SupportUtils.getSumoURLForTopic( + context = cardContext, + topic = SupportUtils.SumoTopic.REQUESTED_CRASH_MINIDUMP, + ), + ) + } + }, + ) + Text( + text = stringResource(R.string.unsubmitted_crash_requested_by_devs_dialog_never_button).uppercase(), + color = FirefoxTheme.colors.textSecondary, + modifier = Modifier.clickable { + dispatcher(CrashAction.CancelForEverTapped) + dismiss() + }, + ) + } + Spacer(modifier = Modifier.height(16.dp)) + + Row( + horizontalArrangement = Arrangement.SpaceBetween, + modifier = Modifier.fillMaxWidth(), + ) { + Text( + text = stringResource(R.string.unsubmitted_crash_dialog_negative_button).uppercase(), + color = FirefoxTheme.colors.textSecondary, + modifier = Modifier.clickable { + dispatcher(CrashAction.CancelTapped) + dismiss() + }, + ) + Text( + text = stringResource(R.string.unsubmitted_crash_dialog_positive_button).uppercase(), + color = FirefoxTheme.colors.textSecondary, + modifier = Modifier.clickable { + dispatcher( + CrashAction.ReportTapped( + automaticallySendChecked = false, + crashIDs = crashIDs, + ), + ) + dismiss() + }, + ) + } } } } @@ -239,7 +306,7 @@ private fun AnnotatedStringBody() { stringResource(R.string.unsubmitted_crash_dialog_learn_more), ), linkTextStates = listOf(linkStateLearnMore), - style = FirefoxTheme.typography.body2, + style = FirefoxTheme.typography.body2.copy(FirefoxTheme.colors.textPrimary), linkTextColor = MaterialTheme.colorScheme.tertiary, linkTextDecoration = TextDecoration.Underline, textAlign = null, @@ -247,109 +314,30 @@ private fun AnnotatedStringBody() { ) } +@PreviewLightDark @Composable -private fun CrashPullDialog( - msg: String, - dismiss: () -> Unit, - dispatcher: (action: CrashAction) -> Unit, - crashIDs: List<String>, - cardContext: Context?, -) { - Column(modifier = Modifier.padding(16.dp)) { - Text( - text = msg, - modifier = Modifier - .semantics { heading() }, - style = FirefoxTheme.typography.headline5, - ) - - Spacer(modifier = Modifier.height(16.dp)) - - Row( - horizontalArrangement = Arrangement.SpaceBetween, - modifier = Modifier.fillMaxWidth(), - ) { - Text( - text = stringResource(R.string.unsubmitted_crash_requested_by_devs_learn_more).uppercase(), - color = MaterialTheme.colorScheme.tertiary, - modifier = Modifier.clickable { - if (cardContext != null) { - SupportUtils.launchSandboxCustomTab( - context = cardContext, - url = SupportUtils.getSumoURLForTopic( - context = cardContext, - topic = SupportUtils.SumoTopic.REQUESTED_CRASH_MINIDUMP, - ), - ) - } - }, - ) - - Text( - text = stringResource(R.string.unsubmitted_crash_requested_by_devs_dialog_never_button).uppercase(), - color = MaterialTheme.colorScheme.onSurfaceVariant, - modifier = Modifier.clickable { - dispatcher(CrashAction.CancelForEverTapped) - dismiss() - }, - ) - } - - Spacer(modifier = Modifier.height(16.dp)) - - Row( - horizontalArrangement = Arrangement.SpaceBetween, - modifier = Modifier.fillMaxWidth(), - ) { - Text( - text = stringResource(R.string.unsubmitted_crash_dialog_negative_button).uppercase(), - color = MaterialTheme.colorScheme.onSurfaceVariant, - modifier = Modifier.clickable { - dispatcher(CrashAction.CancelTapped) - dismiss() - }, - ) - - Text( - text = stringResource(R.string.unsubmitted_crash_dialog_positive_button).uppercase(), - color = MaterialTheme.colorScheme.onSurfaceVariant, - modifier = Modifier.clickable { - dispatcher( - CrashAction.ReportTapped( - automaticallySendChecked = false, - crashIDs = crashIDs, - ), - ) - dismiss() - }, +private fun CrashDialogPreview() { + FirefoxTheme { + Box(Modifier.background(FirefoxTheme.colors.layer1)) { + CrashCard( + dismiss = {}, + dispatcher = {}, + crashIDs = null, + cardContext = null, ) } } } -private data class CrashDialogState( - val crashIDs: List<String>?, -) - -private class CrashDialogPreviewProvider : PreviewParameterProvider<CrashDialogState> { - override val values = sequenceOf( - CrashDialogState(crashIDs = null), - CrashDialogState(crashIDs = listOf("12345")), - CrashDialogState(crashIDs = listOf("12345", "67890")), - ) -} - @PreviewLightDark @Composable -private fun UnsubmittedCrashDialogPreview( - @PreviewParameter(CrashDialogPreviewProvider::class) state: CrashDialogState, -) { +private fun CrashPullDialogPreview() { FirefoxTheme { - Column(modifier = Modifier.padding(all = 16.dp)) { + Box(Modifier.background(FirefoxTheme.colors.layer1)) { CrashCard( dismiss = {}, dispatcher = {}, - crashIDs = state.crashIDs, + crashIDs = listOf("12345", "67890"), cardContext = null, ) } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/setup/ui/ProgressBarSetupChecklistView.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/setup/ui/ProgressBarSetupChecklistView.kt @@ -12,8 +12,6 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableFloatStateOf @@ -43,7 +41,7 @@ private val shapeProgressBarChecklist = RoundedCornerShape( */ @Composable fun ProgressBarSetupChecklistView(numberOfTasks: Int, numberOfTasksCompleted: Int) { - Surface { + Box(modifier = Modifier.background(FirefoxTheme.colors.layer1)) { ProgressBarBackground() ProgressBarCompleted(numberOfTasks, numberOfTasksCompleted) @@ -62,7 +60,7 @@ private fun ProgressBarBackground() { .fillMaxWidth() .height(heightProgressBarChecklist) .clip(shapeProgressBarChecklist) - .background(MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)), + .background(FirefoxTheme.colors.borderDisabled), ) {} } @@ -121,24 +119,24 @@ private fun ProgressBarSegmentation(numberOfTasks: Int) { modifier = Modifier .height(heightProgressBarChecklist) .width(4.dp) - .background(MaterialTheme.colorScheme.surface), + .background(FirefoxTheme.colors.layer1), ) {} } } } } +@Suppress("MagicNumber") @FlexibleWindowLightDarkPreview @Composable private fun PreviewProgressIndicatorSetupChecklist() { FirefoxTheme { - Surface { - Box(modifier = Modifier.padding(16.dp)) { - ProgressBarSetupChecklistView( - numberOfTasks = 6, - numberOfTasksCompleted = 3, - ) - } + Box( + modifier = Modifier + .background(color = FirefoxTheme.colors.layer1) + .padding(16.dp), + ) { + ProgressBarSetupChecklistView(6, 3) } } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/startupCrash/StartupCrashScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/startupCrash/StartupCrashScreen.kt @@ -5,20 +5,24 @@ package org.mozilla.fenix.startupCrash 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.Column import androidx.compose.foundation.layout.Spacer 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.foundation.layout.size +import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll +import androidx.compose.material3.Button +import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.CircularProgressIndicator -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface +import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -32,8 +36,6 @@ import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.PreviewParameterProvider 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.OutlinedButton import mozilla.components.lib.state.ext.observeAsComposableState import org.mozilla.fenix.R import org.mozilla.fenix.theme.FirefoxTheme @@ -45,21 +47,16 @@ internal fun StartupCrashScreen(store: StartupCrashStore) { val scrollState = rememberScrollState() Column( + horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier .fillMaxSize() .verticalScroll(scrollState) - .padding(horizontal = 16.dp), - verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally, + .padding(top = 74.dp, bottom = 97.dp, start = 16.dp, end = 16.dp), ) { ScreenImg() - Spacer(modifier = Modifier.height(16.dp)) - ScreenText() - Spacer(modifier = Modifier.height(24.dp)) - when (state.uiState) { UiState.Idle -> { ReportButtons(store) @@ -76,49 +73,78 @@ internal fun StartupCrashScreen(store: StartupCrashStore) { @Composable private fun ReportButtons(store: StartupCrashStore) { - Column(verticalArrangement = Arrangement.spacedBy(16.dp)) { - FilledButton( - text = stringResource(R.string.startup_crash_positive), + Column(verticalArrangement = Arrangement.spacedBy(8.dp)) { + Button( + onClick = { store.dispatch(ReportTapped) }, + shape = RoundedCornerShape(4.dp), + colors = ButtonDefaults.buttonColors( + containerColor = FirefoxTheme.colors.actionPrimary, + contentColor = FirefoxTheme.colors.textActionPrimary, + ), modifier = Modifier.fillMaxWidth(), ) { - store.dispatch(ReportTapped) + Text(stringResource(R.string.startup_crash_positive)) } - - OutlinedButton( - text = stringResource(R.string.startup_crash_negative), + Button( + onClick = { store.dispatch(NoTapped) }, + shape = RoundedCornerShape(4.dp), + colors = ButtonDefaults.buttonColors( + containerColor = FirefoxTheme.colors.actionSecondary, + contentColor = FirefoxTheme.colors.textActionSecondary, + ), modifier = Modifier.fillMaxWidth(), ) { - store.dispatch(NoTapped) + Text(stringResource(R.string.startup_crash_negative)) } } } @Composable private fun ReopenButton(store: StartupCrashStore) { - FilledButton( - text = stringResource( - R.string.startup_crash_restart, - stringResource(R.string.firefox), + Button( + onClick = { store.dispatch(ReopenTapped) }, + shape = RoundedCornerShape(4.dp), + colors = ButtonDefaults.buttonColors( + containerColor = FirefoxTheme.colors.actionPrimary, + contentColor = FirefoxTheme.colors.textActionPrimary, ), - modifier = Modifier.fillMaxWidth(), - icon = painterResource(iconsR.drawable.mozac_ic_checkmark_24), + modifier = Modifier + .padding(bottom = 8.dp) + .fillMaxWidth(), ) { - store.dispatch(ReopenTapped) + Icon( + painter = painterResource(iconsR.drawable.mozac_ic_checkmark_24), + contentDescription = null, + tint = FirefoxTheme.colors.textActionPrimary, + ) + Spacer(Modifier.width(8.dp)) + Text( + stringResource( + R.string.startup_crash_restart, + stringResource(R.string.firefox), + ), + ) } } @Composable private fun CircularLoadButton() { - FilledButton( - onClick = {}, - modifier = Modifier.fillMaxWidth(), + Button( + onClick = { }, enabled = false, + modifier = Modifier + .fillMaxWidth(), + shape = RoundedCornerShape(4.dp), + colors = ButtonDefaults.buttonColors( + disabledContainerColor = FirefoxTheme.colors.actionPrimaryDisabled, + disabledContentColor = FirefoxTheme.colors.textActionPrimaryDisabled, + ), ) { CircularProgressIndicator( - modifier = Modifier.size(18.dp), - color = MaterialTheme.colorScheme.inverseOnSurface, strokeWidth = 2.dp, - trackColor = MaterialTheme.colorScheme.primary, + modifier = Modifier + .size(24.dp), + color = FirefoxTheme.colors.actionPrimaryDisabled, ) } } @@ -132,6 +158,7 @@ private fun ScreenImg() { painterResource(id = R.drawable.fox_alert_crash_dark) }, contentDescription = null, + modifier = Modifier.padding(bottom = 24.dp), ) } @@ -140,22 +167,24 @@ private fun ScreenText() { Column( verticalArrangement = Arrangement.spacedBy(16.dp), horizontalAlignment = Alignment.CenterHorizontally, - modifier = Modifier.fillMaxWidth(), + modifier = Modifier + .padding(bottom = 32.dp) + .fillMaxWidth(), ) { Text( text = stringResource( R.string.startup_crash_title, stringResource(R.string.firefox), ), + color = FirefoxTheme.colors.textPrimary, style = FirefoxTheme.typography.headline5, ) - Text( text = stringResource( R.string.startup_crash_body, stringResource(R.string.firefox), ), - color = MaterialTheme.colorScheme.onSurfaceVariant, + color = FirefoxTheme.colors.textSecondary, style = FirefoxTheme.typography.body2, textAlign = TextAlign.Center, ) @@ -182,7 +211,7 @@ internal fun StartupCrashScreenPreview( ) } FirefoxTheme { - Surface { + Box(modifier = Modifier.background(FirefoxTheme.colors.layer2)) { StartupCrashScreen(store) } } diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/wallpapers/WallpaperOnboarding.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/wallpapers/WallpaperOnboarding.kt @@ -24,7 +24,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextOverflow -import androidx.compose.ui.tooling.preview.PreviewLightDark +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import org.mozilla.fenix.R import org.mozilla.fenix.settings.wallpaper.WallpaperThumbnails @@ -51,7 +51,8 @@ fun WallpaperOnboarding( onSelectWallpaper: (Wallpaper) -> Unit, ) { Surface( - shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp), + color = FirefoxTheme.colors.layer2, + shape = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp), ) { Column( modifier = Modifier.padding(horizontal = 32.dp, vertical = 16.dp), @@ -60,6 +61,7 @@ fun WallpaperOnboarding( Icon( painter = painterResource(id = iconsR.drawable.mozac_ic_cross_24), contentDescription = stringResource(id = R.string.close_tab), + tint = FirefoxTheme.colors.iconPrimary, modifier = Modifier .clickable { onCloseClicked() } .size(24.dp) @@ -70,6 +72,7 @@ fun WallpaperOnboarding( Text( text = stringResource(R.string.wallpapers_onboarding_dialog_title_text), + color = FirefoxTheme.colors.textPrimary, overflow = TextOverflow.Ellipsis, maxLines = 1, style = FirefoxTheme.typography.headline7, @@ -79,7 +82,7 @@ fun WallpaperOnboarding( Text( text = stringResource(R.string.wallpapers_onboarding_dialog_body_text), - color = MaterialTheme.colorScheme.onSurfaceVariant, + color = FirefoxTheme.colors.textSecondary, overflow = TextOverflow.Ellipsis, maxLines = 1, style = FirefoxTheme.typography.caption, @@ -115,7 +118,7 @@ fun WallpaperOnboarding( } } -@PreviewLightDark +@Preview @Composable private fun WallpaperSnackbarPreview() { FirefoxTheme {