Merge pull request #14851 from woocommerce/woomob-1604-woo-possettings-update-design-to-i2-part1

[WOOMOB-1604] Update WooPosCard design for i2 settings

Author: toupper

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosCard.kt

@@ -25,6 +25,7 @@ import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.semantics.isTraversalGroup
+import androidx.compose.ui.semantics.selected
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Density
@@ -48,9 +49,9 @@ fun WooPosCard(
     shape: Shape = MaterialTheme.shapes.medium,
     backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
     contentColor: Color = contentColorFor(backgroundColor),
-    border: BorderStroke? = null,
     elevation: WooPosElevation = WooPosElevation.Medium,
     shadowType: ShadowType = ShadowType.Normal,
+    isSelected: Boolean = false,
     content: @Composable () -> Unit
 ) {
     CompositionLocalProvider(
@@ -61,13 +62,21 @@ fun WooPosCard(
                 .surface(
                     shape = shape,
                     backgroundColor = backgroundColor,
-                    border = border,
+                    border = if (isSelected) {
+                        BorderStroke(
+                            width = 2.dp,
+                            color = MaterialTheme.colorScheme.onSurface,
+                        )
+                    } else {
+                        null
+                    },
                     elevation = elevation.value,
                     shadowType = shadowType
                 )
                 .semantics(mergeDescendants = false) {
                     isTraversalGroup = true
                 }
+                .semantics { selected = isSelected }
                 .pointerInput(Unit) {},
             propagateMinConstraints = true
         ) {

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersScreen.kt

@@ -2,7 +2,6 @@ package com.woocommerce.android.ui.woopos.orders
 
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -38,12 +37,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.selected
-import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -374,25 +369,12 @@ private fun LoadedOrdersList(
                 backgroundColor = MaterialTheme.colorScheme.surfaceContainerLowest,
                 elevation = WooPosElevation.Medium,
                 shadowType = ShadowType.Soft,
+                isSelected = item.isSelected,
             ) {
                 Row(
                     modifier = Modifier
                         .fillMaxWidth()
-                        .clip(MaterialTheme.shapes.medium)
-                        .background(MaterialTheme.colorScheme.surfaceContainerLowest)
-                        .then(
-                            if (item.isSelected) {
-                                Modifier.border(
-                                    width = 2.dp,
-                                    color = Color.Black,
-                                    shape = MaterialTheme.shapes.medium
-                                )
-                            } else {
-                                Modifier
-                            }
-                        )
                         .clickable { onOrderSelected(item.id) }
-                        .semantics { selected = item.isSelected }
                         .padding(WooPosSpacing.Medium.value),
                     verticalAlignment = Alignment.Top
                 ) {