commit e65b5657105b5041a5585aa6de72ecc54c266c95
parent d5efd77c04dcebf13650e9d9c80897a10613674b
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Fri, 21 Nov 2025 09:03:42 +0000
Bug 1998073 - Part 4: Migrate EditLoginScreen to use M3 Acorn color tokens r=android-reviewers,007
Edit Passwords: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=973-21032&m=dev
Top App Bar: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=65138-3594&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D271186
Diffstat:
1 file changed, 48 insertions(+), 58 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/EditLoginScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/EditLoginScreen.kt
@@ -4,8 +4,6 @@
package org.mozilla.fenix.settings.logins.ui
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
@@ -16,10 +14,11 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
@@ -28,6 +27,7 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
import mozilla.components.compose.base.button.IconButton
@@ -37,6 +37,7 @@ import mozilla.components.compose.base.textfield.TextFieldStyle
import mozilla.components.lib.state.ext.observeAsState
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
private val IconButtonHeight = 48.dp
@@ -53,7 +54,6 @@ internal fun EditLoginScreen(store: LoginsStore) {
loginItem = editState.login,
)
},
- containerColor = FirefoxTheme.colors.layer1,
) { paddingValues ->
Column(
modifier = Modifier
@@ -83,7 +83,6 @@ internal fun EditLoginTopBar(store: LoginsStore, loginItem: LoginItem) {
val isLoginValid = validModifiedUser || validModifiedPassword
TopAppBar(
- colors = TopAppBarDefaults.topAppBarColors(containerColor = FirefoxTheme.colors.layer1),
windowInsets = WindowInsets(
top = 0.dp,
bottom = 0.dp,
@@ -91,14 +90,11 @@ internal fun EditLoginTopBar(store: LoginsStore, loginItem: LoginItem) {
title = {
Text(
text = stringResource(R.string.edit_2),
- color = FirefoxTheme.colors.textPrimary,
- style = FirefoxTheme.typography.headline6,
+ style = FirefoxTheme.typography.headline5,
)
},
navigationIcon = {
IconButton(
- modifier = Modifier
- .padding(horizontal = FirefoxTheme.layout.space.static50),
onClick = { store.dispatch(EditLoginBackClicked) },
contentDescription = stringResource(
R.string.edit_login_navigate_back_button_content_description,
@@ -107,35 +103,25 @@ internal fun EditLoginTopBar(store: LoginsStore, loginItem: LoginItem) {
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_back_24),
contentDescription = null,
- tint = FirefoxTheme.colors.iconPrimary,
)
}
},
actions = {
- Box {
- IconButton(
- modifier = Modifier
- .padding(horizontal = FirefoxTheme.layout.space.static50),
- onClick = {
- store.dispatch(
- EditLoginAction.SaveEditClicked(loginItem),
- )
- },
- contentDescription = stringResource(
- R.string.edit_login_button_content_description,
- ),
- enabled = isLoginValid,
- ) {
- Icon(
- painter = painterResource(iconsR.drawable.mozac_ic_checkmark_24),
- contentDescription = null,
- tint = if (isLoginValid) {
- FirefoxTheme.colors.textPrimary
- } else {
- FirefoxTheme.colors.textDisabled
- },
+ IconButton(
+ onClick = {
+ store.dispatch(
+ EditLoginAction.SaveEditClicked(loginItem),
)
- }
+ },
+ contentDescription = stringResource(
+ R.string.edit_login_button_content_description,
+ ),
+ enabled = isLoginValid,
+ ) {
+ Icon(
+ painter = painterResource(iconsR.drawable.mozac_ic_checkmark_24),
+ contentDescription = null,
+ )
}
},
)
@@ -155,7 +141,7 @@ private fun EditLoginUrl(url: String) {
Text(
text = url,
style = TextFieldStyle.default().placeholderStyle,
- color = FirefoxTheme.colors.textDisabled,
+ color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f),
modifier = Modifier
.padding(
horizontal = FirefoxTheme.layout.space.static200,
@@ -193,9 +179,6 @@ private fun EditLoginUsername(store: LoginsStore, user: String) {
}
}
},
- colors = TextFieldColors.default(
- placeholderColor = FirefoxTheme.colors.textPrimary,
- ),
)
}
@@ -244,35 +227,42 @@ private fun EditLoginPassword(store: LoginsStore, pass: String) {
} else {
PasswordVisualTransformation()
},
- colors = TextFieldColors.default(
- placeholderColor = FirefoxTheme.colors.textPrimary,
- ),
)
}
}
-@Composable
-@FlexibleWindowLightDarkPreview
-private fun EditLoginScreenPreview() {
- val store = LoginsStore(
- initialState = LoginsState.default.copy(
- loginsEditLoginState = LoginsEditLoginState(
- login = LoginItem(
- guid = "123",
- url = "https://www.justanothersite123.com",
- username = "username 123",
- password = "password 123",
- ),
- newUsername = "username 456",
- newPassword = "password 456",
- isPasswordVisible = true,
+private fun createStore() = LoginsStore(
+ initialState = LoginsState.default.copy(
+ loginsEditLoginState = LoginsEditLoginState(
+ login = LoginItem(
+ guid = "123",
+ url = "https://www.justanothersite123.com",
+ username = "username 123",
+ password = "password 123",
),
+ newUsername = "username 456",
+ newPassword = "password 456",
+ isPasswordVisible = true,
),
- )
+ ),
+)
+@Composable
+@FlexibleWindowLightDarkPreview
+private fun EditLoginScreenPreview() {
FirefoxTheme {
- Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
- EditLoginScreen(store)
+ Surface {
+ EditLoginScreen(store = createStore())
+ }
+ }
+}
+
+@Composable
+@Preview
+private fun EditLoginScreenPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ Surface {
+ EditLoginScreen(store = createStore())
}
}
}
