[WOO POS] UI changes in POS Success screen

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/cart/WooPosCartScreen.kt

@@ -140,6 +140,7 @@ private fun WooPosCartScreen(
                     },
                     items = state.body.itemsInCart,
                     areItemsRemovable = state.areItemsRemovable,
+                    isCheckoutButtonVisible = state.isCheckoutButtonVisible,
                     onUIEvent = onUIEvent
                 )
             }
@@ -227,11 +228,17 @@ private fun CartBodyWithItems(
     modifier: Modifier = Modifier,
     items: List<WooPosCartState.Body.WithItems.Item>,
     areItemsRemovable: Boolean,
+    isCheckoutButtonVisible: Boolean,
     onUIEvent: (WooPosCartUIEvent) -> Unit,
 ) {
     val listState = rememberLazyListState()
     ScrollToTopHandler(items, listState)
 
+    val spacerHeight by animateDpAsState(
+        targetValue = if (!isCheckoutButtonVisible) 182.dp else 0.dp,
+        label = "cart list height animation"
+    )
+
     WooPosLazyColumn(
         modifier = modifier
             .padding(horizontal = 16.dp.toAdaptivePadding()),
@@ -255,6 +262,9 @@ private fun CartBodyWithItems(
                 onUIEvent = onUIEvent,
             )
         }
+        item {
+            Spacer(modifier = Modifier.height(spacerHeight))
+        }
     }
 }
 

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/payment/success/WooPosTotalsPaymentSuccessScreen.kt

@@ -3,20 +3,18 @@ package com.woocommerce.android.ui.woopos.home.totals.payment.success
 import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.spring
-import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 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
-import androidx.compose.material.OutlinedButton
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
@@ -29,8 +27,6 @@ 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.graphics.Color
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
@@ -125,7 +121,7 @@ fun WooPosPaymentSuccessScreen(
                 }
             )
 
-            OutlinedButton(
+            Button(
                 modifier = Modifier
                     .constrainAs(button) {
                         bottom.linkTo(parent.bottom)
@@ -135,25 +131,16 @@ fun WooPosPaymentSuccessScreen(
                     .height(80.dp)
                     .width(604.dp),
                 colors = ButtonDefaults.buttonColors(
-                    backgroundColor = Color.Transparent,
-                    contentColor = Color.Transparent,
+                    backgroundColor = MaterialTheme.colors.onBackground
                 ),
-                onClick = onNewTransactionClicked,
-                border = BorderStroke(1.dp, MaterialTheme.colors.onSurface),
                 shape = RoundedCornerShape(8.dp),
+                onClick = onNewTransactionClicked,
             ) {
-                Icon(
-                    modifier = Modifier.size(24.dp),
-                    painter = painterResource(id = R.drawable.woo_pos_ic_return_home),
-                    tint = MaterialTheme.colors.onSurface,
-                    contentDescription = stringResource(id = R.string.woopos_new_order_button)
-                )
-                Spacer(modifier = Modifier.width(12.dp.toAdaptivePadding()))
                 Text(
                     text = stringResource(R.string.woopos_new_order_button),
                     style = MaterialTheme.typography.h5,
                     fontWeight = FontWeight.SemiBold,
-                    color = WooPosTheme.colors.paymentSuccessText,
+                    color = MaterialTheme.colors.background,
                     textAlign = TextAlign.Center
                 )
             }