commit 18f1c9065773bdacb94113d1196782eb14ba18c7
parent 521937312e7e3ef894ab4c8377d6b835770ab7db
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Fri, 21 Nov 2025 05:25:59 +0000
Bug 1998021 - Part 7: Migrate TranslationsDialogBottomSheet to M3 Acorn color tokens r=android-reviewers,007
Dropdown: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=67176-63106&m=dev
Translations: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=975-21038&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D271172
Diffstat:
1 file changed, 64 insertions(+), 31 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/TranslationsDialogBottomSheet.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/translations/TranslationsDialogBottomSheet.kt
@@ -5,7 +5,6 @@
package org.mozilla.fenix.translations
import android.content.res.Configuration
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
@@ -19,6 +18,8 @@ import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
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.ui.Alignment
@@ -32,6 +33,7 @@ import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.rememberTextMeasurer
import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
@@ -48,6 +50,7 @@ import org.mozilla.fenix.compose.InfoType
import org.mozilla.fenix.compose.LinkText
import org.mozilla.fenix.compose.LinkTextState
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
import java.util.Locale
import mozilla.components.ui.icons.R as iconsR
@@ -94,6 +97,7 @@ fun TranslationsDialogBottomSheet(
if (showFirstTimeFlow) {
Spacer(modifier = Modifier.height(8.dp))
+
TranslationsDialogInfoMessage(
learnMoreUrl = learnMoreUrl,
onLearnMoreClicked = onLearnMoreClicked,
@@ -299,7 +303,7 @@ private fun TranslationsDialogContent(
translateFromLanguages?.let { addAll(it) }
}
- val longestLanguageSize = getLongestLanguageWidth(allLanguagesList, FirefoxTheme.typography.subtitle1)
+ val longestLanguageSize = getLongestLanguageWidth(allLanguagesList, FirefoxTheme.typography.body1)
when (LocalConfiguration.current.orientation) {
Configuration.ORIENTATION_LANDSCAPE -> {
@@ -472,7 +476,6 @@ private fun TranslationsDialogHeader(
contentDescription = stringResource(
id = R.string.translation_option_bottom_sheet_title_heading,
),
- tint = FirefoxTheme.colors.iconPrimary,
)
}
}
@@ -480,14 +483,19 @@ private fun TranslationsDialogHeader(
Row(
verticalAlignment = Alignment.CenterVertically,
- modifier = Modifier.padding(top = if (showPageSettings) { 12.dp } else { 0.dp }),
+ modifier = Modifier.padding(
+ top = if (showPageSettings) {
+ 12.dp
+ } else {
+ 0.dp
+ },
+ ),
) {
Text(
text = title,
modifier = Modifier
.weight(1f)
.semantics { heading() },
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline7,
)
}
@@ -561,7 +569,7 @@ private fun TranslationsDialogInfoMessage(
),
linkTextStates = listOf(learnMoreState),
style = FirefoxTheme.typography.body2.copy(
- color = FirefoxTheme.colors.textPrimary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
),
linkTextDecoration = TextDecoration.Underline,
)
@@ -664,31 +672,6 @@ private fun getLongestLanguageWidth(languages: List<Language>, style: TextStyle)
}
@Composable
-@PreviewLightDark
-private fun TranslationsDialogBottomSheetPreview() {
- FirefoxTheme {
- Column(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
- TranslationsDialogBottomSheet(
- translationsDialogState = TranslationsDialogState(
- positiveButtonType = PositiveButtonType.Enabled,
- toLanguages = getTranslateToLanguageList(),
- fromLanguages = getTranslateFromLanguageList(),
- ),
- learnMoreUrl = "",
- showPageSettings = true,
- showFirstTimeFlow = true,
- onSettingClicked = {},
- onLearnMoreClicked = {},
- onPositiveButtonClicked = {},
- onNegativeButtonClicked = {},
- onFromDropdownSelected = {},
- onToDropdownSelected = {},
- )
- }
- }
-}
-
-@Composable
internal fun getTranslateFromLanguageList(): List<Language> {
return mutableListOf<Language>().apply {
add(
@@ -747,3 +730,53 @@ internal fun getTranslateToLanguageList(): List<Language> {
)
}
}
+
+@Composable
+@PreviewLightDark
+private fun TranslationsDialogBottomSheetPreview() {
+ FirefoxTheme {
+ Surface {
+ TranslationsDialogBottomSheet(
+ translationsDialogState = TranslationsDialogState(
+ positiveButtonType = PositiveButtonType.Enabled,
+ toLanguages = getTranslateToLanguageList(),
+ fromLanguages = getTranslateFromLanguageList(),
+ ),
+ learnMoreUrl = "",
+ showPageSettings = true,
+ showFirstTimeFlow = true,
+ onSettingClicked = {},
+ onLearnMoreClicked = {},
+ onPositiveButtonClicked = {},
+ onNegativeButtonClicked = {},
+ onFromDropdownSelected = {},
+ onToDropdownSelected = {},
+ )
+ }
+ }
+}
+
+@Composable
+@Preview
+private fun TranslationsDialogBottomSheetPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ Surface {
+ TranslationsDialogBottomSheet(
+ translationsDialogState = TranslationsDialogState(
+ positiveButtonType = PositiveButtonType.Enabled,
+ toLanguages = getTranslateToLanguageList(),
+ fromLanguages = getTranslateFromLanguageList(),
+ ),
+ learnMoreUrl = "",
+ showPageSettings = true,
+ showFirstTimeFlow = true,
+ onSettingClicked = {},
+ onLearnMoreClicked = {},
+ onPositiveButtonClicked = {},
+ onNegativeButtonClicked = {},
+ onFromDropdownSelected = {},
+ onToDropdownSelected = {},
+ )
+ }
+ }
+}
