Merge pull request #13580 from woocommerce/issue/13578-update-not-connected-designs

Woo POS - Update Reader Not Connected Designs

Author: malinajirka

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/WooPosTotalsScreen.kt

@@ -264,21 +264,18 @@ private fun ReaderDisconnected(
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.SpaceEvenly,
     ) {
-        @Suppress("WooPosDesignSystemSpacingUsageRule")
-        Spacer(modifier = Modifier.height(56.dp.toAdaptivePadding()))
-
         Icon(
-            modifier = Modifier.size(64.dp),
-            painter = painterResource(id = R.drawable.ic_woo_pos_error),
-            contentDescription = stringResource(id = R.string.woopos_error_icon_content_description),
+            modifier = Modifier.size(122.dp),
+            painter = painterResource(id = R.drawable.img_card_reader_not_connected_v2),
+            contentDescription = stringResource(id = R.string.woopos_reader_not_connected_description),
             tint = WooPosTheme.colors.unspecified,
         )
 
         Spacer(modifier = Modifier.height(WooPosSpacing.XLarge.value.toAdaptivePadding()))
 
         WooPosText(
             text = status.title,
-            style = WooPosTypography.BodyXLarge,
+            style = WooPosTypography.Heading,
             fontWeight = FontWeight.Bold,
         )
 
@@ -293,7 +290,7 @@ private fun ReaderDisconnected(
             text = status.actionButtonLabel,
             onClick = { onUIEvent(WooPosTotalsUIEvent.ConnectReaderClicked) },
             modifier = Modifier
-                .fillMaxWidth()
+                .fillMaxWidth(0.5f)
                 .height(80.dp)
         )
     }
@@ -304,7 +301,7 @@ private fun TotalsGrid(totals: Totals.Visible) {
     Column(
         modifier = Modifier
             .padding(WooPosSpacing.Large.value.toAdaptivePadding())
-            .width(382.dp),
+            .fillMaxWidth(0.5f),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center,
     ) {

WooCommerce/src/main/res/drawable/ic_woo_pos_error.xml

@@ -3,10 +3,20 @@
     android:height="80dp"
     android:viewportWidth="80"
     android:viewportHeight="80">
-  <path
-      android:pathData="M40,0L40,0A40,40 0,0 1,80 40L80,40A40,40 0,0 1,40 80L40,80A40,40 0,0 1,0 40L0,40A40,40 0,0 1,40 0z"
-      android:fillColor="#F16618"/>
-  <path
-      android:pathData="M40.715,45.693c-0.596,0 -1.06,-0.171 -1.392,-0.513 -0.332,-0.342 -0.508,-0.82 -0.527,-1.435l-0.234,-15.132c0,-0.059 -0.005,-0.117 -0.015,-0.176v-0.161c0,-0.645 0.2,-1.157 0.6,-1.538 0.41,-0.381 0.933,-0.572 1.568,-0.572s1.147,0.19 1.538,0.572c0.4,0.38 0.6,0.893 0.6,1.538v0.16c0,0.06 -0.004,0.118 -0.014,0.177l-0.205,15.132c-0.01,0.615 -0.186,1.093 -0.528,1.435 -0.332,0.342 -0.796,0.513 -1.391,0.513ZM40.7,54.116a2.654,2.654 0,0 1,-2.285 -1.26,2.486 2.486,0 0,1 -0.352,-1.304c0,-0.469 0.118,-0.898 0.352,-1.289 0.244,-0.39 0.566,-0.698 0.967,-0.923 0.4,-0.234 0.84,-0.351 1.318,-0.351 0.488,0 0.933,0.117 1.333,0.351 0.4,0.225 0.718,0.532 0.952,0.923 0.235,0.39 0.352,0.82 0.352,1.29 0,0.478 -0.117,0.912 -0.352,1.303a2.54,2.54 0,0 1,-0.952 0.923c-0.4,0.224 -0.845,0.337 -1.333,0.337Z"
-      android:fillColor="#fff"/>
+    <path
+        android:pathData="M40,0L40,0A40,40 0,0 1,80 40L80,40A40,40 0,0 1,40 80L40,80A40,40 0,0 1,0 40L0,40A40,40 0,0 1,40 0z"
+        android:fillColor="#F16618"/>
+    <group>
+        <clip-path
+            android:pathData="M0,0h80v80H0z"/>
+        <path
+            android:pathData="M40,80c22.09,0 40,-17.909 40,-40S62.09,0 40,0C17.907,0 0,17.909 0,40s17.908,40 40,40Z"
+            android:fillColor="#D1C1FF"/>
+        <path
+            android:pathData="M40,67.749a7.066,7.066 0,1 0,0 -14.133,7.066 7.066,0 0,0 0,14.133ZM41.436,12.237h-2.872c-5.587,0 -8.374,2.786 -7.34,8.704 1.207,6.822 3.835,22.606 4.539,26.513l4.237,0.029 4.237,-0.029c0.704,-3.892 3.332,-19.691 4.538,-26.513 1.049,-5.918 -1.737,-8.704 -7.339,-8.704Z"
+            android:fillColor="#873EFF"/>
+        <path
+            android:pathData="M48.776,20.94c1.048,-5.917 -1.738,-8.703 -7.34,-8.703h-2.872c-3.634,0 -6.061,1.178 -7.052,3.62l14.966,18.47c0.847,-4.999 1.723,-10.183 2.298,-13.386Z"
+            android:fillColor="#3C087E"/>
+    </group>
 </vector>

WooCommerce/src/main/res/drawable/img_card_reader_not_connected_v2.xml

@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="122dp"
+    android:height="122dp"
+    android:viewportWidth="122"
+    android:viewportHeight="123">
+  <path
+      android:pathData="M112.29,21.22c0,-6.27 -3.47,-9.8 -9.67,-9.8H41.52c-6.21,0 -9.67,3.53 -9.67,9.8v61.05c0,6.27 3.47,9.8 9.67,9.8h61.11c6.21,0 9.67,-3.53 9.67,-9.8V21.22Z"
+      android:fillColor="#873EFF"/>
+  <path
+      android:pathData="m54.38,29.06 l3.52,3.53c3.63,-3.64 8.61,-5.88 14.15,-5.88s10.51,2.24 14.14,5.88l3.52,-3.53c-4.53,-4.54 -10.79,-7.34 -17.67,-7.34 -6.88,0 -13.14,2.8 -17.67,7.34Z"
+      android:fillColor="#D1C1FF"/>
+  <path
+      android:pathData="m61.42,36.18 l3.52,3.53a9.97,9.97 0,0 1,7.05 -2.91c2.74,0 5.26,1.12 7.04,2.91l3.52,-3.53c-2.74,-2.74 -6.49,-4.42 -10.62,-4.42s-7.88,1.68 -10.62,4.43h0.11ZM68.52,43.23l3.52,3.53 3.52,-3.53a4.93,4.93 0,0 0,-3.52 -1.46c-1.4,0 -2.63,0.56 -3.52,1.46Z"
+      android:fillColor="#D1C1FF"/>
+  <path
+      android:pathData="M31.84,56.83V82.27c0,6.27 3.47,9.8 9.67,9.8h61.11L31.84,56.83Z"
+      android:fillColor="#3C087E"/>
+  <path
+      android:pathData="M9.7,95.89c0,14.57 11.84,26.44 26.39,26.44 14.55,0 26.39,-11.86 26.39,-26.44 0,-14.57 -11.84,-26.44 -26.39,-26.44 -14.55,0 -26.39,11.86 -26.39,26.44Z"
+      android:fillColor="#D1C1FF"/>
+  <path
+      android:pathData="m46.73,88.76 l-3.54,-3.57 -7.09,7.14 -7.09,-7.14 -3.55,3.56 7.1,7.14 -7.1,7.14 3.55,3.56 7.09,-7.14 7.09,7.14 3.54,-3.56 -7.09,-7.14 7.09,-7.13Z"
+      android:fillColor="#873EFF"/>
+</vector>

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

@@ -4330,6 +4330,7 @@
     <string name="woopos_products_loading_error_title">Error loading products</string>
     <string name="woopos_products_loading_error_message">Give it another go?</string>
     <string name="woopos_error_icon_content_description">Error indication icon</string>
+    <string name="woopos_reader_not_connected_description">Please make sure a card reader is connected.</string>
     <string name="woopos_products_loading_error_retry_button">Retry</string>
     <string name="woopos_totals_order_creation_error">Couldn\'t create order</string>
     <string name="woopos_totals_success_payment_cash">A cash payment of %1$s was successfully made</string>