Merge pull request #12738 from woocommerce/12731-woo-pos-remove-shado…

…w-from-the-check-icon-and-from-the-button-on-the-payment-success-screen [Woo POS] Remove shadow from the check icon and from the button on the payment success screen
woocommerce · Oct 1, 2024 · 21c2101 · 21c2101
2 parents 2e8c578 + 9dc5634
commit 21c2101
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 51 deletions.
diff --git a/...main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosButtons.kt b/...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,13 +24,18 @@ 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,
 ) {
     Button(
         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/...ommerce/android/ui/woopos/home/totals/payment/success/WooPosTotalsPaymentSuccessScreen.kt b/...ommerce/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(