CCCT-2843 Align The Chip, KPI And Progress Cards With The UI Kit

app/res/layout/fragment_connect_delivery_dashboard.xml

@@ -36,7 +36,7 @@
 
                 <TextView
                     android:id="@+id/delivery_chip_label"
-                    style="@style/TextStyle.Connect.LabelM"
+                    style="@style/TextStyle.Connect.LabelS"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_marginStart="@dimen/connect_space_xs"
@@ -81,7 +81,6 @@
                 android:layout_height="wrap_content"
                 android:layout_marginHorizontal="@dimen/connect_space_sm"
                 android:layout_marginTop="@dimen/connect_space_lg"
-                app:contentDisabledColor="?attr/connectOnSurfaceVariant"
                 app:contentPrimaryColor="?attr/connectOnSurfaceVariant" />
 
             <org.commcare.views.connect.ConnectTaskCard

app/res/layout/view_connect_info_half_card.xml

@@ -39,7 +39,7 @@
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginTop="@dimen/connect_space_sm"
-        android:textColor="?attr/colorOnSurface"
+        android:textColor="?attr/connectOnSurfaceEmphasis"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/info_card_value_text"
@@ -51,7 +51,7 @@
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_marginTop="@dimen/connect_space_xs"
-        android:textColor="?attr/connectOutline"
+        android:textColor="?attr/connectOnSurfaceSecondary"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/info_card_title_text"

app/res/layout/view_connect_learn_progress.xml

@@ -42,7 +42,7 @@
                         android:src="@drawable/ic_connect_learn_app" />
 
                     <TextView
-                        style="@style/TextStyle.Connect.LabelM"
+                        style="@style/TextStyle.Connect.LabelS"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_marginStart="@dimen/standard_spacer_half"

app/res/values/attrs.xml

@@ -18,12 +18,12 @@
     <attr name="connectOnSurfaceEmphasis" format="reference|color" />
     <attr name="connectOnSurfaceStrong" format="reference|color" />
     <attr name="connectOnSurfaceVariant" format="reference|color" />
+    <attr name="connectOnSurfaceSecondary" format="reference|color" />
     <attr name="connectOnSurfaceMuted" format="reference|color" />
     <attr name="connectDisabledContainer" format="reference|color" />
     <attr name="connectOnDisabledContainer" format="reference|color" />
     <attr name="connectCtaButtonBackground" format="reference|color" />
     <attr name="connectCtaButtonForeground" format="reference|color" />
-    <attr name="connectOnSurfaceDisabled" format="reference|color" />
     <attr name="connectOutline" format="reference|color" />
     <attr name="connectOutlineVariant" format="reference|color" />
     <attr name="connectStatusPositive" format="reference|color" />

app/res/values/colors.xml

@@ -146,7 +146,6 @@
     <color name="connect_subtext_color">#9CA3AF</color>
     <color name="cool_gray_100">#F3F4F6</color>
     <color name="cool_gray_300">#D1D5DB</color>
-    <color name="neutral_gray_600">#57595B</color>
     <color name="connect_grey">#9A9A9A</color>
     <color name="connect_dark_grey">#4B5563</color>
     <color name="cool_gray_50">#F9FAFB</color>

app/res/values/styles.xml

@@ -432,7 +432,7 @@
     <style name="Widget.CommCare.ConnectProgressCard" parent="">
         <item name="contentPrimaryColor">?attr/colorOnSurface</item>
         <item name="contentAccentColor">?attr/colorPrimary</item>
-        <item name="contentDisabledColor">?attr/connectOutline</item>
+        <item name="contentDisabledColor">?attr/connectOnSurfaceEmphasis</item>
     </style>
 
     <style name="Widget.CommCare.ConnectSuccessFailureCard" parent="">

app/res/values/themes.xml

@@ -65,12 +65,12 @@
         <item name="connectOnSurfaceEmphasis">@color/cool_gray_900</item>
         <item name="connectOnSurfaceStrong">@color/cool_gray_800</item>
         <item name="connectOnSurfaceVariant">@color/connect_dark_grey</item>
+        <item name="connectOnSurfaceSecondary">@color/connect_secondary_text</item>
         <item name="connectOnSurfaceMuted">@color/connect_subtext_color</item>
         <item name="connectDisabledContainer">@color/cool_gray_100</item>
         <item name="connectOnDisabledContainer">@color/connect_subtext_color</item>
         <item name="connectCtaButtonBackground">@color/connect_cta_button_background</item>
         <item name="connectCtaButtonForeground">@color/connect_cta_button_foreground</item>
-        <item name="connectOnSurfaceDisabled">@color/neutral_gray_600</item>
         <item name="connectOutline">@color/connect_grey</item>
         <item name="connectOutlineVariant">@color/connect_light_grey</item>
         <item name="connectStatusPositive">@color/connect_green</item>

app/src/org/commcare/views/connect/ConnectInfoHalfCard.kt

@@ -13,6 +13,7 @@ import org.commcare.dalvik.databinding.ViewConnectInfoHalfCardBinding
 import org.commcare.views.extensions.bindOptional
 import org.commcare.views.extensions.bindReservingSpace
 import org.commcare.views.extensions.themeColor
+import org.commcare.views.extensions.tint
 
 /**
  * Reusable half-width Connect info card.
@@ -43,26 +44,32 @@ class ConnectInfoHalfCard
             get() = binding.infoCardSubtitleText.text
             set(value) = binding.infoCardSubtitleText.bindReservingSpace(value)
 
-        /** When false the value reads as disabled, matching a disabled [ConnectProgressCard]. */
+        /** When false the value and icon read as disabled, matching a disabled [ConnectProgressCard]. */
         var contentEnabled: Boolean = true
             set(value) {
                 field = value
-                binding.infoCardValueText.setTextColor(
-                    if (value) {
-                        MaterialColors.getColor(this, com.google.android.material.R.attr.colorPrimary)
-                    } else {
-                        context.themeColor(R.attr.connectOnSurfaceDisabled)
-                    },
-                )
+                applyContentColors()
             }
 
         var icon: Drawable? = null
             set(value) {
                 field = value
                 binding.infoCardIcon.setImageDrawable(value)
                 binding.infoCardIcon.visibility = if (value == null) GONE else VISIBLE
+                applyContentColors()
             }
 
+        private fun applyContentColors() {
+            val accent =
+                if (contentEnabled) {
+                    MaterialColors.getColor(this, com.google.android.material.R.attr.colorPrimary)
+                } else {
+                    context.themeColor(R.attr.connectOnSurfaceEmphasis)
+                }
+            binding.infoCardValueText.setTextColor(accent)
+            binding.infoCardIcon.tint(accent)
+        }
+
         var navigable: Boolean = false
             set(value) {
                 field = value

app/src/org/commcare/views/connect/ConnectProgressCard.kt

@@ -248,7 +248,9 @@ class ConnectProgressCard
             binding.progressCardTitle.setTextColor(primary)
             binding.progressCardBarLabel.setTextColor(primary)
             binding.progressCardBarCount.setTextColor(accent)
-            binding.progressCardBarCaption.setTextColor(accent)
+            // The caption keeps the accent even when disabled - it explains why the card is
+            // blocked, so it stays legible rather than greying out with the figures.
+            binding.progressCardBarCaption.setTextColor(contentAccentColor)
             binding.progressCardLinearBar.setProgressColor(accent)
             binding.progressCardSemiCircle.progressColor = accent
             binding.progressCardSemiCircle.valueTextColor = accent

app/unit-tests/src/org/commcare/fragments/connect/ConnectDeliveryDashboardFragmentTest.kt

@@ -472,7 +472,7 @@ class ConnectDeliveryDashboardFragmentTest {
     private fun accentColor(): Int =
         MaterialColors.getColor(activity.findViewById(android.R.id.content), com.google.android.material.R.attr.colorPrimary)
 
-    private fun disabledColor(): Int = activity.themeColor(R.attr.connectOnSurfaceDisabled)
+    private fun disabledColor(): Int = activity.themeColor(R.attr.connectOnSurfaceEmphasis)
 
     private fun progressResponse(
         deliveries: List<String> = emptyList(),

app/unit-tests/src/org/commcare/views/connect/ConnectInfoHalfCardTest.kt

@@ -114,7 +114,7 @@ class ConnectInfoHalfCardTest {
 
         card.contentEnabled = false
         assertEquals(
-            card.context.themeColor(R.attr.connectOnSurfaceDisabled),
+            card.context.themeColor(R.attr.connectOnSurfaceEmphasis),
             value.currentTextColor,
         )
 
@@ -158,7 +158,7 @@ class ConnectInfoHalfCardTest {
         assertEquals("100 each", card.subtitleText.toString())
         assertEquals(false, card.contentEnabled)
         assertEquals(
-            card.context.themeColor(R.attr.connectOnSurfaceDisabled),
+            card.context.themeColor(R.attr.connectOnSurfaceEmphasis),
             card.findViewById<TextView>(R.id.info_card_value_text).currentTextColor,
         )
     }

app/unit-tests/src/org/commcare/views/connect/ConnectProgressCardTest.kt

@@ -14,6 +14,7 @@ import com.google.android.material.color.MaterialColors
 import org.commcare.CommCareTestApplication
 import org.commcare.dalvik.R
 import org.commcare.views.connect.ConnectProgressCard.State
+import org.commcare.views.extensions.themeColor
 import org.junit.Assert.assertEquals
 import org.junit.Assert.assertTrue
 import org.junit.Test
@@ -173,12 +174,12 @@ class ConnectProgressCardTest {
     }
 
     @Test
-    fun `contentEnabled recolors caption and semi-circle`() {
+    fun `contentEnabled recolors the semi-circle but leaves the caption at the accent`() {
         val card = newCard()
         val caption = card.findViewById<TextView>(R.id.progress_card_bar_caption)
         val semi = card.findViewById<SemiCircleProgressBar>(R.id.progress_card_semi_circle)
 
-        val grey = ContextCompat.getColor(card.context, R.color.connect_grey)
+        val disabled = card.context.themeColor(R.attr.connectOnSurfaceEmphasis)
         val accent = MaterialColors.getColor(card, com.google.android.material.R.attr.colorPrimary)
         val primary = ContextCompat.getColor(card.context, R.color.connect_text_color)
 
@@ -189,9 +190,9 @@ class ConnectProgressCardTest {
             )
 
         card.bind(content.copy(contentEnabled = false))
-        assertEquals(grey, caption.currentTextColor)
-        assertEquals(grey, semi.progressColor)
-        assertEquals(grey, semi.valueTextColor)
+        assertEquals(accent, caption.currentTextColor)
+        assertEquals(disabled, semi.progressColor)
+        assertEquals(disabled, semi.valueTextColor)
         assertEquals(primary, semi.descriptionTextColor)
 
         card.bind(content.copy(contentEnabled = true))