Update button colors to adhere to material style (#242)

This commit is contained in:
David Perez 2023-11-13 14:45:58 -06:00 committed by Álison Fernandes
parent 715ff06dfc
commit 2f525513a2
6 changed files with 82 additions and 19 deletions

View file

@ -2,6 +2,7 @@ package com.x8bit.bitwarden.ui.platform.components
import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.Button import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -33,14 +34,10 @@ fun BitwardenFilledButton(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.dp, horizontal = 24.dp,
), ),
colors = ButtonDefaults.buttonColors(),
) { ) {
Text( Text(
text = label, text = label,
color = if (isEnabled) {
MaterialTheme.colorScheme.onPrimary
} else {
MaterialTheme.colorScheme.onSurface.copy(alpha = .38f)
},
style = MaterialTheme.typography.labelLarge, style = MaterialTheme.typography.labelLarge,
) )
} }

View file

@ -43,22 +43,17 @@ fun BitwardenFilledButtonWithIcon(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.dp, horizontal = 24.dp,
), ),
colors = ButtonDefaults.buttonColors( colors = ButtonDefaults.buttonColors(),
containerColor = MaterialTheme.colorScheme.secondaryContainer,
contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
),
) { ) {
Icon( Icon(
painter = icon, painter = icon,
contentDescription = null, contentDescription = null,
tint = MaterialTheme.colorScheme.onSecondaryContainer,
modifier = Modifier modifier = Modifier
.padding(end = 8.dp), .padding(end = 8.dp),
) )
Text( Text(
text = label, text = label,
color = MaterialTheme.colorScheme.onSecondaryContainer,
style = MaterialTheme.typography.labelLarge, style = MaterialTheme.typography.labelLarge,
) )
} }

View file

@ -35,14 +35,11 @@ fun BitwardenFilledTonalButton(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.dp, horizontal = 24.dp,
), ),
colors = ButtonDefaults.buttonColors( colors = ButtonDefaults.filledTonalButtonColors(),
containerColor = MaterialTheme.colorScheme.secondaryContainer,
),
modifier = modifier, modifier = modifier,
) { ) {
Text( Text(
text = label, text = label,
color = MaterialTheme.colorScheme.onSecondaryContainer,
style = MaterialTheme.typography.labelLarge, style = MaterialTheme.typography.labelLarge,
) )
} }

View file

@ -0,0 +1,74 @@
package com.x8bit.bitwarden.ui.platform.components
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
/**
* A filled tonal button for the Bitwarden UI with a customized appearance and an icon.
*
* This button uses the `secondaryContainer` color from the current [MaterialTheme.colorScheme]
* for its background and the `onSecondaryContainer` color for its label text.
*
* @param label The text to be displayed on the button.
* @param icon The icon for the button.
* @param onClick A lambda which will be invoked when the button is clicked.
* @param modifier A [Modifier] for this composable, allowing for adjustments to its appearance
* or behavior. This can be used to apply padding, layout, and other Modifiers.
* @param isEnabled Whether or not the button is enabled.
*/
@Composable
fun BitwardenFilledTonalButtonWithIcon(
label: String,
icon: Painter,
onClick: () -> Unit,
modifier: Modifier = Modifier,
isEnabled: Boolean = true,
) {
Button(
onClick = onClick,
contentPadding = PaddingValues(
vertical = 10.dp,
horizontal = 24.dp,
),
colors = ButtonDefaults.filledTonalButtonColors(),
modifier = modifier,
enabled = isEnabled,
) {
Icon(
painter = icon,
contentDescription = null,
modifier = Modifier
.padding(end = 8.dp),
)
Text(
text = label,
style = MaterialTheme.typography.labelLarge,
)
}
}
@Preview(showBackground = true)
@Composable
private fun BitwardenFilledTonalButtonWithIcon_preview() {
BitwardenTheme {
BitwardenFilledTonalButtonWithIcon(
label = "Sample Text",
icon = painterResource(id = R.drawable.ic_tooltip),
onClick = {},
modifier = Modifier.padding(horizontal = 16.dp),
)
}
}

View file

@ -2,6 +2,7 @@ package com.x8bit.bitwarden.ui.platform.components
import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton import androidx.compose.material3.OutlinedButton
@ -41,18 +42,17 @@ fun BitwardenOutlinedButtonWithIcon(
vertical = 10.dp, vertical = 10.dp,
horizontal = 24.dp, horizontal = 24.dp,
), ),
colors = ButtonDefaults.outlinedButtonColors(),
) { ) {
Icon( Icon(
painter = icon, painter = icon,
contentDescription = null, contentDescription = null,
tint = MaterialTheme.colorScheme.primary,
modifier = Modifier modifier = Modifier
.padding(end = 8.dp), .padding(end = 8.dp),
) )
Text( Text(
text = label, text = label,
color = MaterialTheme.colorScheme.primary,
style = MaterialTheme.typography.labelLarge, style = MaterialTheme.typography.labelLarge,
) )
} }

View file

@ -29,8 +29,8 @@ import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.x8bit.bitwarden.R import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect
import com.x8bit.bitwarden.ui.platform.components.BitwardenFilledButtonWithIcon
import com.x8bit.bitwarden.ui.platform.components.BitwardenFilledTonalButton import com.x8bit.bitwarden.ui.platform.components.BitwardenFilledTonalButton
import com.x8bit.bitwarden.ui.platform.components.BitwardenFilledTonalButtonWithIcon
import com.x8bit.bitwarden.ui.platform.components.BitwardenIconButtonWithResource import com.x8bit.bitwarden.ui.platform.components.BitwardenIconButtonWithResource
import com.x8bit.bitwarden.ui.platform.components.BitwardenListHeaderText import com.x8bit.bitwarden.ui.platform.components.BitwardenListHeaderText
import com.x8bit.bitwarden.ui.platform.components.BitwardenMultiSelectButton import com.x8bit.bitwarden.ui.platform.components.BitwardenMultiSelectButton
@ -236,7 +236,7 @@ private fun AddLoginTypeItemContent(
) )
Spacer(modifier = Modifier.height(16.dp)) Spacer(modifier = Modifier.height(16.dp))
BitwardenFilledButtonWithIcon( BitwardenFilledTonalButtonWithIcon(
label = stringResource(id = R.string.setup_totp), label = stringResource(id = R.string.setup_totp),
icon = painterResource(id = R.drawable.ic_light_bulb), icon = painterResource(id = R.drawable.ic_light_bulb),
onClick = loginItemTypeHandlers.onSetupTotpClick, onClick = loginItemTypeHandlers.onSetupTotpClick,