2
0
mirror of https://github.com/fork-maintainers/iceraven-browser synced 2024-11-17 15:26:23 +00:00

[fenix] For https://github.com/mozilla-mobile/fenix/issues/23575 - Use design system colors for the Pocket filter and Customize homepage buttons

This commit is contained in:
Gabriel Luong 2022-02-04 12:59:20 -05:00 committed by mergify[bot]
parent d7cce03106
commit 895b6396ba
2 changed files with 24 additions and 29 deletions

View File

@ -7,7 +7,6 @@ package org.mozilla.fenix.compose
import android.content.res.Configuration.UI_MODE_NIGHT_NO
import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.compose.foundation.background
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
@ -25,7 +24,6 @@ import androidx.compose.ui.text.intl.Locale
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import mozilla.components.ui.colors.PhotonColors
import org.mozilla.fenix.theme.FirefoxTheme
/**
@ -41,27 +39,27 @@ fun SelectableChip(
isSelected: Boolean,
onClick: () -> Unit
) {
val backgroundColor = when (isSystemInDarkTheme()) {
true -> if (isSelected) PhotonColors.Violet50 else PhotonColors.DarkGrey50
false -> if (isSelected) PhotonColors.Ink20 else PhotonColors.LightGrey40
}
Box(
modifier = Modifier
.selectable(isSelected) { onClick() }
.clip(MaterialTheme.shapes.small)
.background(backgroundColor)
.padding(16.dp, 10.dp)
) {
val contentColor = when {
isSystemInDarkTheme() || isSelected -> PhotonColors.LightGrey10
else -> PhotonColors.DarkGrey90
.background(
color = if (isSelected) {
FirefoxTheme.colors.actionPrimary
} else {
FirefoxTheme.colors.actionTertiary
}
)
.padding(horizontal = 16.dp, vertical = 10.dp)
) {
Text(
text = text.capitalize(Locale.current),
style = TextStyle(fontSize = 14.sp),
color = contentColor
color = if (isSelected) {
FirefoxTheme.colors.textActionPrimary
} else {
FirefoxTheme.colors.textActionTertiary
}
)
}
}
@ -71,10 +69,12 @@ fun SelectableChip(
private fun SelectableChipDarkThemePreview() {
FirefoxTheme {
Row(
modifier = Modifier.fillMaxWidth(),
modifier = Modifier
.fillMaxWidth()
.background(FirefoxTheme.colors.layer1),
horizontalArrangement = Arrangement.SpaceEvenly
) {
SelectableChip("Chirp", false) { }
SelectableChip(text = "Chirp", isSelected = false) { }
SelectableChip(text = "Chirp", isSelected = true) { }
}
}
@ -87,10 +87,10 @@ private fun SelectableChipLightThemePreview() {
Row(
modifier = Modifier
.fillMaxWidth()
.background(FirefoxTheme.colors.layer2),
.background(FirefoxTheme.colors.layer1),
horizontalArrangement = Arrangement.SpaceEvenly
) {
SelectableChip("Chirp", false) { }
SelectableChip(text = "Chirp", isSelected = false) { }
SelectableChip(text = "Chirp", isSelected = true) { }
}
}

View File

@ -5,7 +5,6 @@
package org.mozilla.fenix.home.sessioncontrol.viewholders
import android.view.View
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
@ -25,7 +24,6 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.LifecycleOwner
import mozilla.components.ui.colors.PhotonColors
import org.mozilla.fenix.R
import org.mozilla.fenix.compose.ComposeViewHolder
import org.mozilla.fenix.home.sessioncontrol.CustomizeHomeIteractor
@ -62,11 +60,6 @@ class CustomizeHomeButtonViewHolder(
fun CustomizeHomeButton(
onButtonClick: () -> Unit
) {
val backgroundColor = when (isSystemInDarkTheme()) {
true -> PhotonColors.DarkGrey50
false -> PhotonColors.LightGrey40
}
Button(
onClick = { onButtonClick() },
modifier = Modifier
@ -75,8 +68,8 @@ fun CustomizeHomeButton(
.height(36.dp),
elevation = ButtonDefaults.elevation(defaultElevation = 0.dp, pressedElevation = 0.dp),
colors = outlinedButtonColors(
backgroundColor = backgroundColor,
contentColor = FirefoxTheme.colors.textPrimary
backgroundColor = FirefoxTheme.colors.actionTertiary,
contentColor = FirefoxTheme.colors.textActionTertiary
)
) {
Text(
@ -93,5 +86,7 @@ fun CustomizeHomeButton(
@Composable
@Preview
fun CustomizeHomeButtonPreview() {
FirefoxTheme {
CustomizeHomeButton(onButtonClick = {})
}
}