commit 57e6d9296f8e2fd8b3f307d36ea7a68e0ac6f6bc
parent 91e0eb0b32eac2c94719fe003aa33bf6fb790b43
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 23 Oct 2025 21:00:38 +0000
Bug 1993655 - Part 7: Migrate MozillaAccountMenuItem to use M3 color tokens r=android-reviewers,007
Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=67636-2542&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D268426
Diffstat:
2 files changed, 40 insertions(+), 51 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuItem.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuItem.kt
@@ -20,8 +20,11 @@ import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
@@ -32,12 +35,11 @@ import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.role
-import androidx.compose.ui.text.PlatformTextStyle
-import androidx.compose.ui.text.style.TextDirection
import androidx.compose.ui.text.style.TextOverflow
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.surfaceDimVariant
import mozilla.components.service.fxa.manager.AccountState
import mozilla.components.service.fxa.manager.AccountState.Authenticated
import mozilla.components.service.fxa.manager.AccountState.Authenticating
@@ -101,7 +103,7 @@ internal fun MozillaAccountMenuItem(
}
.wrapContentSize()
.clip(shape = BUTTON_SHAPE)
- .background(color = FirefoxTheme.colors.layer3)
+ .background(color = MaterialTheme.colorScheme.surfaceDimVariant)
.height(IntrinsicSize.Min)
.defaultMinSize(minHeight = BUTTON_HEIGHT)
.clickable { onClick() }
@@ -111,39 +113,38 @@ internal fun MozillaAccountMenuItem(
),
verticalAlignment = Alignment.CenterVertically,
) {
- AvatarIcon(account, accountState, isPrivate)
-
- Spacer(modifier = Modifier.width(16.dp))
-
- Column(
- modifier = Modifier.weight(1f),
- ) {
- Text(
- text = label,
- color = FirefoxTheme.colors.textPrimary,
- overflow = TextOverflow.Ellipsis,
- style = FirefoxTheme.typography.subtitle1.merge(
- platformStyle = PlatformTextStyle(includeFontPadding = true),
- ),
- maxLines = 2,
+ CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
+ AvatarIcon(
+ account = account,
+ accountState = accountState,
+ isPrivate = isPrivate,
)
- description?.let {
+ Spacer(modifier = Modifier.width(FirefoxTheme.layout.space.static200))
+
+ Column(
+ modifier = Modifier.weight(1f),
+ ) {
Text(
- text = description,
- color = if (accountState is AuthenticationProblem) {
- FirefoxTheme.colors.textCritical
- } else {
- FirefoxTheme.colors.textSecondary
- },
+ text = label,
overflow = TextOverflow.Ellipsis,
+ style = FirefoxTheme.typography.body1,
maxLines = 2,
- style = FirefoxTheme.typography.body2
- .merge(
- textDirection = TextDirection.Content,
- platformStyle = PlatformTextStyle(includeFontPadding = true),
- ),
)
+
+ description?.let {
+ Text(
+ text = description,
+ color = if (accountState is AuthenticationProblem) {
+ MaterialTheme.colorScheme.error
+ } else {
+ MaterialTheme.colorScheme.onSurfaceVariant
+ },
+ overflow = TextOverflow.Ellipsis,
+ maxLines = 2,
+ style = FirefoxTheme.typography.caption,
+ )
+ }
}
}
}
@@ -154,7 +155,6 @@ private fun FallbackAvatarIcon() {
Icon(
painter = painterResource(id = iconsR.drawable.mozac_ic_avatar_circle_24),
contentDescription = null,
- tint = FirefoxTheme.colors.iconPrimary,
)
}
@@ -206,12 +206,12 @@ private fun AvatarIcon(
}
@Composable
-private fun MenuHeaderPreviewContent() {
+private fun MozillaAccountMenuItemPreviewContent() {
Column(
modifier = Modifier
- .background(color = FirefoxTheme.colors.layer2)
- .padding(all = 16.dp),
- verticalArrangement = Arrangement.spacedBy(16.dp),
+ .background(color = MaterialTheme.colorScheme.surface)
+ .padding(all = FirefoxTheme.layout.space.static200),
+ verticalArrangement = Arrangement.spacedBy(FirefoxTheme.layout.space.static200),
) {
MozillaAccountMenuItem(
account = null,
@@ -273,16 +273,16 @@ private fun MenuHeaderPreviewContent() {
@PreviewLightDark
@Composable
-private fun MenuHeaderPreview() {
+private fun MozillaAccountMenuItemPreview() {
FirefoxTheme {
- MenuHeaderPreviewContent()
+ MozillaAccountMenuItemPreviewContent()
}
}
@Preview
@Composable
-private fun MenuHeaderPrivatePreview() {
+private fun MozillaAccountMenuItemPrivatePreview() {
FirefoxTheme(theme = Theme.Private) {
- MenuHeaderPreviewContent()
+ MozillaAccountMenuItemPreviewContent()
}
}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/list/ListItem.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/list/ListItem.kt
@@ -51,9 +51,7 @@ import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.selected
import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.text.PlatformTextStyle
import androidx.compose.ui.text.style.Hyphens
-import androidx.compose.ui.text.style.TextDirection
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
@@ -960,16 +958,7 @@ private fun ListItemContent(
color = descriptionTextColor,
overflow = TextOverflow.Ellipsis,
maxLines = maxDescriptionLines,
- style = FirefoxTheme.typography.body2
- .merge(
- // Bug 1915867 - We must force the text direction to correctly truncate a LTR
- // description that is too long when the app in RTL mode - at least until this
- // bug gets fixed in Compose.
- // This isn't the most optional solution but it should have less side-effects
- // than forcing no letter spacing (which would be the best approach here).
- textDirection = TextDirection.Content,
- platformStyle = PlatformTextStyle(includeFontPadding = true),
- ),
+ style = FirefoxTheme.typography.body2,
)
}
