diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt index c7e24c93e6c..2544188965f 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt @@ -1,18 +1,19 @@ package com.woocommerce.android.ui.woopos.common.composeui.component import androidx.compose.foundation.BorderStroke -import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Button +import androidx.compose.material.ButtonColors import androidx.compose.material.ButtonDefaults import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp @@ -23,6 +24,10 @@ import com.woocommerce.android.ui.woopos.common.composeui.WooPosTheme fun WooPosButton( modifier: Modifier = Modifier, text: String, + colors: ButtonColors = ButtonDefaults.buttonColors( + backgroundColor = MaterialTheme.colors.primary, + contentColor = MaterialTheme.colors.onPrimary, + ), enabled: Boolean = true, onClick: () -> Unit, ) { @@ -30,6 +35,7 @@ fun WooPosButton( onClick = onClick, shape = RoundedCornerShape(8.dp), enabled = enabled, + colors = colors, modifier = modifier .fillMaxWidth() .height(72.dp), @@ -114,54 +120,41 @@ fun WooPosOutlinedButton( @Composable @WooPosPreview -fun WooPosButtonPreview() { +fun WooPosButtonsPreview() { WooPosTheme { - Box( + Column( modifier = Modifier .fillMaxSize() .padding(32.dp), - contentAlignment = Alignment.Center ) { - WooPosButton( - text = "Button", + WooPosButtonLarge( + text = "Button Large", onClick = {}, ) - } - } -} -@Composable -@WooPosPreview -fun WooPosButtonLargePreview() { - WooPosTheme { - Box( - modifier = Modifier - .fillMaxSize() - .padding(32.dp), - contentAlignment = Alignment.Center - ) { - WooPosButtonLarge( - text = "Button", + Spacer(modifier = Modifier.height(16.dp)) + + WooPosOutlinedButton( + text = "Button Outlined", onClick = {}, ) - } - } -} -@Composable -@WooPosPreview -fun WooPosOutlinedButtonPreview() { - WooPosTheme { - Box( - modifier = Modifier - .fillMaxSize() - .padding(32.dp), - contentAlignment = Alignment.Center - ) { - WooPosOutlinedButton( + Spacer(modifier = Modifier.height(16.dp)) + + WooPosButton( text = "Button", onClick = {}, ) + + Spacer(modifier = Modifier.height(16.dp)) + + WooPosButton( + text = "Button Black And White", + colors = ButtonDefaults.buttonColors( + backgroundColor = MaterialTheme.colors.onBackground + ), + onClick = {}, + ) } } } diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/payment/success/WooPosTotalsPaymentSuccessScreen.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/payment/success/WooPosTotalsPaymentSuccessScreen.kt index f1d5034a356..c93f42d1a78 100644 --- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/payment/success/WooPosTotalsPaymentSuccessScreen.kt +++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/payment/success/WooPosTotalsPaymentSuccessScreen.kt @@ -10,8 +10,6 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.CircleShape -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.Button import androidx.compose.material.ButtonDefaults import androidx.compose.material.Icon import androidx.compose.material.MaterialTheme @@ -26,7 +24,6 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.shadow import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign @@ -35,6 +32,7 @@ import androidx.constraintlayout.compose.ConstraintLayout import com.woocommerce.android.R import com.woocommerce.android.ui.woopos.common.composeui.WooPosPreview import com.woocommerce.android.ui.woopos.common.composeui.WooPosTheme +import com.woocommerce.android.ui.woopos.common.composeui.component.WooPosButton import com.woocommerce.android.ui.woopos.common.composeui.toAdaptivePadding import com.woocommerce.android.ui.woopos.home.totals.WooPosTotalsViewState import kotlinx.coroutines.delay @@ -121,7 +119,7 @@ fun WooPosPaymentSuccessScreen( } ) - Button( + WooPosButton( modifier = Modifier .constrainAs(button) { bottom.linkTo(parent.bottom) @@ -133,17 +131,9 @@ fun WooPosPaymentSuccessScreen( colors = ButtonDefaults.buttonColors( backgroundColor = MaterialTheme.colors.onBackground ), - shape = RoundedCornerShape(8.dp), onClick = onNewTransactionClicked, - ) { - Text( - text = stringResource(R.string.woopos_new_order_button), - style = MaterialTheme.typography.h5, - fontWeight = FontWeight.SemiBold, - color = MaterialTheme.colors.background, - textAlign = TextAlign.Center - ) - } + text = stringResource(R.string.woopos_new_order_button), + ) } } } @@ -176,7 +166,6 @@ private fun CheckMarkIcon( contentAlignment = Alignment.Center, modifier = modifier .size(size) - .shadow(8.dp, CircleShape) .background(WooPosTheme.colors.success, CircleShape) ) { Icon(