commit 9bf87b6331a3b47aab64fccde05f4a7dd915f6ea
parent e65b5657105b5041a5585aa6de72ecc54c266c95
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Fri, 21 Nov 2025 09:03:42 +0000
Bug 1998073 - Part 5: Migrate AddLoginScreen to use M3 Acorn color tokens r=android-reviewers,007
Add Passwords: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=972-27280&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/D271188
Diffstat:
1 file changed, 29 insertions(+), 42 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/AddLoginScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/logins/ui/AddLoginScreen.kt
@@ -5,8 +5,6 @@
package org.mozilla.fenix.settings.logins.ui
import android.util.Patterns
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
@@ -20,7 +18,6 @@ import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
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.runtime.mutableStateOf
@@ -33,6 +30,7 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
+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
@@ -44,6 +42,7 @@ import mozilla.components.support.ktx.util.URLStringUtils.isHttpOrHttps
import mozilla.components.support.ktx.util.URLStringUtils.isValidHost
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
@@ -54,7 +53,6 @@ internal fun AddLoginScreen(store: LoginsStore) {
topBar = {
AddLoginTopBar(store)
},
- containerColor = FirefoxTheme.colors.layer1,
) { paddingValues ->
Column(
modifier = Modifier
@@ -82,7 +80,6 @@ private fun AddLoginTopBar(store: LoginsStore) {
val isLoginValid = isValidHost(host) && username.isNotBlank() && password.isNotBlank()
TopAppBar(
- colors = TopAppBarDefaults.topAppBarColors(containerColor = FirefoxTheme.colors.layer1),
windowInsets = WindowInsets(
top = 0.dp,
bottom = 0.dp,
@@ -90,14 +87,11 @@ private fun AddLoginTopBar(store: LoginsStore) {
title = {
Text(
text = stringResource(R.string.add_login_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(AddLoginBackClicked) },
contentDescription = stringResource(
R.string.add_login_navigate_back_button_content_description,
@@ -106,35 +100,25 @@ private fun AddLoginTopBar(store: LoginsStore) {
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(
- AddLoginAction.AddLoginSaveClicked,
- )
- },
- contentDescription = stringResource(
- R.string.add_login_save_new_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(
+ AddLoginAction.AddLoginSaveClicked,
)
- }
+ },
+ contentDescription = stringResource(
+ R.string.add_login_save_new_login_button_content_description,
+ ),
+ enabled = isLoginValid,
+ ) {
+ Icon(
+ painter = painterResource(iconsR.drawable.mozac_ic_checkmark_24),
+ contentDescription = null,
+ )
}
},
)
@@ -213,9 +197,6 @@ private fun AddLoginUsername(store: LoginsStore) {
CrossTextFieldButton { store.dispatch(AddLoginAction.UsernameChanged("")) }
}
},
- colors = TextFieldColors.default(
- placeholderColor = FirefoxTheme.colors.textPrimary,
- ),
)
}
@@ -247,9 +228,6 @@ private fun AddLoginPassword(store: LoginsStore) {
CrossTextFieldButton { store.dispatch(AddLoginAction.PasswordChanged("")) }
}
},
- colors = TextFieldColors.default(
- placeholderColor = FirefoxTheme.colors.textPrimary,
- ),
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
)
@@ -262,8 +240,17 @@ private fun AddLoginScreenPreview() {
initialState = LoginsState.default,
)
FirefoxTheme {
- Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
- AddLoginScreen(store)
- }
+ AddLoginScreen(store)
+ }
+}
+
+@Composable
+@Preview
+private fun AddLoginScreenPrivatePreview() {
+ val store = LoginsStore(
+ initialState = LoginsState.default,
+ )
+ FirefoxTheme(theme = Theme.Private) {
+ AddLoginScreen(store)
}
}
