UI M1 fixes

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Buttons.kt

@@ -1,6 +1,7 @@
 package com.woocommerce.android.ui.compose.component
 
 import android.content.res.Configuration
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -143,6 +144,7 @@ fun WCOutlinedButton(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
     colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
+    border: BorderStroke? = ButtonDefaults.outlinedBorder,
     content: @Composable RowScope.() -> Unit
 ) {
     OutlinedButton(
@@ -151,6 +153,7 @@ fun WCOutlinedButton(
         colors = colors,
         contentPadding = contentPadding,
         interactionSource = interactionSource,
+        border = border,
         modifier = modifier,
     ) {
         ProvideTextStyle(

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/shipping/AmountBigDecimalTextField.kt

@@ -5,6 +5,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.viewinterop.AndroidView
 import com.google.android.material.textfield.TextInputLayout
+import com.woocommerce.android.R
 import com.woocommerce.android.extensions.filterNotNull
 import com.woocommerce.android.widgets.WCMaterialOutlinedCurrencyEditTextView
 import java.math.BigDecimal
@@ -28,13 +29,16 @@ fun AmountBigDecimalTextField(
                     onValueChange(it)
                 }
                 boxBackgroundMode = TextInputLayout.BOX_BACKGROUND_NONE
-                val textSize = 24f
+                val textSize = 28f
                 editText.apply {
                     background = null
+                    setTextAppearance(R.style.TextAppearance_Woo_EditText)
                     setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize)
                 }
                 prefixTextView.apply {
+                    setTextAppearance(R.style.TextAppearance_Woo_EditText)
                     setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize)
+                    setTextColor(context.getColor(R.color.color_on_surface_disabled))
                 }
                 suffixTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize)
             }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/shipping/OrderShippingFragment.kt

@@ -37,7 +37,11 @@ class OrderShippingFragment : BaseFragment() {
         }
     }
 
-    override fun getFragmentTitle() = getString(R.string.order_creation_shipping_title_add)
+    override fun getFragmentTitle() = if (viewModel.isEditFlow) {
+        getString(R.string.order_creation_shipping_title_edit)
+    } else {
+        getString(R.string.order_creation_shipping_title_add)
+    }
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         viewModel.event.observe(viewLifecycleOwner) { event ->

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/shipping/OrderShippingScreen.kt

@@ -1,6 +1,7 @@
 package com.woocommerce.android.ui.orders.creation.shipping
 
 import android.content.res.Configuration
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -13,6 +14,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Divider
 import androidx.compose.material.ExperimentalMaterialApi
@@ -33,6 +35,7 @@ import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
@@ -56,7 +59,7 @@ fun UpdateShippingScreen(
                 name = currentState.name,
                 amount = currentState.amount,
                 method = currentState.method?.title,
-                isEditFlow = currentState.isEditFlow,
+                isEditFlow = viewModel.isEditFlow,
                 isSaveChangesEnabled = currentState.isSaveChangesEnabled,
                 onNameChanged = { name -> viewModel.onNameChanged(name) },
                 onAmountChanged = { amount -> viewModel.onAmountChanged(amount) },
@@ -141,21 +144,30 @@ fun UpdateShippingScreen(
                 .padding(16.dp)
                 .align(Alignment.BottomCenter)
         ) {
-            WCColoredButton(
-                enabled = isSaveChangesEnabled,
-                onClick = { onSaveChanges() },
-                modifier = Modifier.fillMaxWidth()
-            ) {
-                Text(stringResource(id = R.string.order_creation_shipping_add))
-            }
             if (isEditFlow) {
                 WCOutlinedButton(
                     onClick = { onRemove() },
-                    modifier = Modifier.fillMaxWidth()
+                    modifier = Modifier.fillMaxWidth(),
+                    colors = ButtonDefaults.outlinedButtonColors(
+                        contentColor = MaterialTheme.colors.error
+                    ),
+                    border = BorderStroke(1.dp, MaterialTheme.colors.error)
                 ) {
                     Text(stringResource(id = R.string.order_creation_remove_shipping))
                 }
             }
+            WCColoredButton(
+                enabled = isSaveChangesEnabled,
+                onClick = { onSaveChanges() },
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                val buttonResId = if (isEditFlow) {
+                    R.string.order_creation_shipping_edit
+                } else {
+                    R.string.order_creation_shipping_add
+                }
+                Text(stringResource(id = buttonResId))
+            }
         }
     }
 }
@@ -176,7 +188,7 @@ fun FieldSelectValue(
     modifier: Modifier = Modifier
 ) {
     val display = text ?: hint.orEmpty()
-    val alpha = if (text == null) 0.6f else 1f
+    val alpha = if (text == null) 0.38f else 1f
     Box(
         modifier = modifier
             .padding(8.dp)
@@ -186,7 +198,8 @@ fun FieldSelectValue(
     ) {
         Text(
             text = display,
-            fontSize = 24.sp,
+            fontSize = 28.sp,
+            fontWeight = FontWeight.Bold,
             modifier = Modifier
                 .align(Alignment.CenterStart)
                 .alpha(alpha)
@@ -214,7 +227,8 @@ fun FieldEditValue(
         value = text,
         onValueChange = onValueChange,
         textStyle = TextStyle(
-            fontSize = 24.sp,
+            fontWeight = FontWeight.Bold,
+            fontSize = 28.sp,
             color = MaterialTheme.colors.onSurface
         ),
         cursorBrush = SolidColor(colors.cursorColor(false).value),
@@ -228,7 +242,9 @@ fun FieldEditValue(
                 placeholder = @Composable {
                     Text(
                         text = stringResource(id = R.string.order_creation_add_shipping_name_hint),
-                        fontSize = 24.sp,
+                        fontWeight = FontWeight.Bold,
+                        fontSize = 28.sp,
+                        color = MaterialTheme.colors.onSurface.copy(alpha = .38f)
                     )
                 },
                 enabled = true,

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/creation/shipping/OrderShippingViewModel.kt

@@ -30,13 +30,14 @@ class OrderShippingViewModel @Inject constructor(
     private val navArgs: OrderShippingFragmentArgs by savedState.navArgs()
     val viewState: MutableStateFlow<ViewState>
 
+    val isEditFlow = navArgs.currentShippingLine != null
+
     init {
         val state = if (navArgs.currentShippingLine == null) {
             ViewState.ShippingState(
                 method = null,
                 name = null,
                 amount = BigDecimal.ZERO,
-                isEditFlow = false,
                 isSaveChangesEnabled = false
             )
         } else {
@@ -49,7 +50,6 @@ class OrderShippingViewModel @Inject constructor(
                     method = getShippingMethodById(shippingLine.methodId),
                     name = shippingLine.methodTitle,
                     amount = shippingLine.total,
-                    isEditFlow = true,
                     isSaveChangesEnabled = false
                 )
             }
@@ -139,7 +139,6 @@ class OrderShippingViewModel @Inject constructor(
             val method: ShippingMethod?,
             val name: String?,
             val amount: BigDecimal,
-            val isEditFlow: Boolean,
             val isSaveChangesEnabled: Boolean
         ) : ViewState()
     }

WooCommerce/src/main/res/values/strings.xml

@@ -687,9 +687,11 @@
     <string name="order_creation_payment_tax_label">Taxes</string>
     <string name="order_creation_shipping_name">Name</string>
     <string name="order_creation_shipping_title_add">Add Shipping</string>
+    <string name="order_creation_shipping_title_edit">Edit Shipping</string>
     <string name="order_creation_shipping_methods_title">Method</string>
     <string name="order_creation_shipping_methods_error">Error while fetching your shipping methods. Please try again</string>
     <string name="order_creation_shipping_add">Add Shipping</string>
+    <string name="order_creation_shipping_edit">Edit Shipping</string>
     <string name="order_creation_add_shipping">Add shipping</string>
     <string name="order_creation_add_shipping_method">Method</string>
     <string name="order_creation_add_shipping_amount">Amount</string>

WooCommerce/src/main/res/values/type.xml

@@ -49,6 +49,13 @@
         <item name="lineHeight">@dimen/line_height_major_25</item>
     </style>
 
+    <style name="TextAppearance.Woo.EditText" parent="TextAppearance.MaterialComponents.Headline6">
+        <item name="fontFamily">@font/roboto_medium</item>
+        <item name="android:textSize">@dimen/text_major_25</item>
+        <item name="android:textStyle">bold</item>
+        <item name="lineHeight">@dimen/line_height_major_25</item>
+    </style>
+
     <style name="TextAppearance.Woo.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
         <item name="fontFamily">@font/roboto</item>
         <item name="android:textSize">@dimen/text_minor_125</item>

WooCommerce/src/test/kotlin/com/woocommerce/android/ui/orders/creation/shipping/OrderShippingViewModelTest.kt

@@ -54,7 +54,7 @@ class OrderShippingViewModelTest : BaseUnitTest() {
         assertThat((viewState as OrderShippingViewModel.ViewState.ShippingState).name).isNull()
         assertThat(viewState.method).isNull()
         assertThat(viewState.amount).isEqualByComparingTo(BigDecimal.ZERO)
-        assertThat(viewState.isEditFlow).isFalse
+        assertThat(viewModel.isEditFlow).isFalse
     }
 
     @Test
@@ -70,7 +70,7 @@ class OrderShippingViewModelTest : BaseUnitTest() {
         assertThat((viewState as OrderShippingViewModel.ViewState.ShippingState).name)
             .isEqualTo(editArgs.currentShippingLine?.methodTitle)
         assertThat(viewState.amount).isEqualByComparingTo(editArgs.currentShippingLine?.total)
-        assertThat(viewState.isEditFlow).isTrue
+        assertThat(viewModel.isEditFlow).isTrue
     }
 
     @Test