tor-browser

commit f4e59fd0b2fdb33c6c91567d88f3f770dd6e694d
parent 9d5fff237fdc4a01e46b8477e37d306db2a10d47
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date:   Fri, 21 Nov 2025 07:46:05 +0000

Bug 1998092 - Part 3: Migrate AppIconPreference to M3 Acorn specs r=android-reviewers,007

- Aligning with the M3 List Item: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63874-16946&m=dev
- Settings: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=623-23127&m=dev
- App Icon: https://www.figma.com/design/7J6gh5D8DbGTExxskKdn3T/Mobile-Onboarding-Experiments?node-id=16023-8411&m=dev

Differential Revision: https://phabricator.services.mozilla.com/D272009

Diffstat:
M
mobile/android/fenix/app/src/main/java/org/mozilla/fenix/iconpicker/ui/AppIconPreference.kt
 | 
70
++++++++++++++++++++++++++++++++++++++++------------------------------

1 file changed, 40 insertions(+), 30 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/iconpicker/ui/AppIconPreference.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/iconpicker/ui/AppIconPreference.kt
@@ -6,21 +6,22 @@ package org.mozilla.fenix.iconpicker.ui
 
 import android.content.Context
 import android.util.AttributeSet
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+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
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.navigation.findNavController
 import androidx.preference.Preference
@@ -34,8 +35,8 @@ import org.mozilla.fenix.iconpicker.DefaultAppIconRepository
 import org.mozilla.fenix.iconpicker.DefaultPackageManagerWrapper
 import org.mozilla.fenix.settings.CustomizationFragmentDirections
 import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
 
-private val PreferencePadding = 16.dp
 private val IconSize = 40.dp
 
 /**
@@ -83,43 +84,52 @@ private fun SelectAppIcon(
     appIcon: AppIcon,
     onClick: (AppIcon) -> Unit,
 ) {
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .clickable { onClick(appIcon) }
-            .background(color = FirefoxTheme.colors.layer1)
-            .padding(PreferencePadding),
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        AppIcon(
-            appIcon = appIcon,
-            iconSize = IconSize,
-        )
-
-        Spacer(modifier = Modifier.width(16.dp))
-
-        Column {
-            Text(
-                text = stringResource(id = R.string.preference_select_app_icon_title),
-                style = FirefoxTheme.typography.subtitle1,
-                color = FirefoxTheme.colors.textPrimary,
+    Surface {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .clickable { onClick(appIcon) }
+                .padding(
+                    horizontal = FirefoxTheme.layout.space.dynamic200,
+                    vertical = FirefoxTheme.layout.space.static100,
+                ),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            AppIcon(
+                appIcon = appIcon,
+                iconSize = IconSize,
             )
 
-            Spacer(modifier = Modifier.height(4.dp))
+            Spacer(modifier = Modifier.width(16.dp))
 
-            Text(
-                text = stringResource(appIcon.titleId),
-                style = FirefoxTheme.typography.caption,
-                color = FirefoxTheme.colors.textPrimary,
-            )
+            Column {
+                Text(
+                    text = stringResource(id = R.string.preference_select_app_icon_title),
+                    style = FirefoxTheme.typography.body1,
+                )
+
+                Text(
+                    text = stringResource(appIcon.titleId),
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    style = FirefoxTheme.typography.body2,
+                )
+            }
         }
     }
 }
 
 @FlexibleWindowLightDarkPreview
 @Composable
-private fun AppIconOptionPreview() {
+private fun SelectAppIconPreview() {
     FirefoxTheme {
         SelectAppIcon(AppIcon.AppDefault) {}
     }
 }
+
+@Preview
+@Composable
+private fun SelectAppIconPrivatePreview() {
+    FirefoxTheme(theme = Theme.Private) {
+        SelectAppIcon(AppIcon.AppDefault) {}
+    }
+}