feat(navbar): fill each tab's glyph only while it is selected

apps/flipcash/core-ui/src/main/kotlin/com/flipcash/app/core/ui/NavigationBar.kt

@@ -205,7 +205,7 @@ fun NavigationBar(
                                 modifier = Modifier
                                     .size(iconSize)
                                     .graphicsLayer { alpha = iconAlpha },
-                                painter = painterResource(button.icon),
+                                painter = painterResource(button.icon(selected)),
                                 colorFilter = ColorFilter.tint(Color.White),
                                 contentDescription = null,
                             )
@@ -240,14 +240,18 @@ internal val NavBarButton.testTag: String
         NavBarButton.TipCard -> "nav_tipcard"
     }
 
-@get:DrawableRes
-private val NavBarButton.icon: Int
-    get() = when (this) {
-        NavBarButton.Scanner -> R.drawable.ic_nav_scan
-        NavBarButton.Wallet -> R.drawable.ic_nav_wallet
-        NavBarButton.Chats -> R.drawable.ic_nav_chat
-        NavBarButton.TipCard -> R.drawable.ic_nav_tipcard
-    }
+/**
+ * The glyph for [this] tab at the weight its selection calls for. Every tab is drawn as an outline
+ * until it is selected, where it fills in; the dimming on top of that is the caller's alpha. The
+ * unsuffixed drawable is the outline, so `ic_nav_scan` stays the outline the tutorial card reuses.
+ */
+@DrawableRes
+private fun NavBarButton.icon(selected: Boolean): Int = when (this) {
+    NavBarButton.Scanner -> if (selected) R.drawable.ic_nav_scan_selected else R.drawable.ic_nav_scan
+    NavBarButton.Wallet -> if (selected) R.drawable.ic_nav_wallet_selected else R.drawable.ic_nav_wallet
+    NavBarButton.Chats -> if (selected) R.drawable.ic_nav_chat_selected else R.drawable.ic_nav_chat
+    NavBarButton.TipCard -> if (selected) R.drawable.ic_nav_tipcard_selected else R.drawable.ic_nav_tipcard
+}
 
 @Preview
 @PreviewWrapper(FlipcashThemeWrapper::class)

apps/flipcash/core/src/main/res/drawable/ic_nav_chat_selected.xml

@@ -0,0 +1,14 @@
+<!-- IconChatBubbles, solid weight — Flipcash tab bar, selected (node 8966:99595). White fill,
+     tinted at the call site. The outline twin is ic_nav_chat. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+    <path
+        android:pathData="M20.6667 13.3333C25.3656 13.3333 29.3333 16.8313 29.3333 21.3333C29.3333 23.0019 28.7776 24.5443 27.8424 25.8177C27.9832 26.3908 28.178 26.9643 28.4115 27.5521C28.5377 27.8699 28.492 28.2307 28.2917 28.5079C28.0912 28.7848 27.7632 28.9396 27.4219 28.9193C26.4223 28.8597 25.4688 28.7168 24.5404 28.4869C23.3711 29.0271 22.0556 29.3333 20.6667 29.3333C15.9677 29.3333 12 25.8353 12 21.3333C12 16.8313 15.9677 13.3333 20.6667 13.3333Z"
+        android:fillColor="#FFFFFF" />
+    <path
+        android:pathData="M13.3333 2.66667C18.8613 2.66667 23.5036 6.64297 23.9596 11.8281C22.91 11.5069 21.8007 11.3333 20.6667 11.3333C15.0383 11.3333 10 15.5595 10 21.3333C10 21.6172 10.0152 21.8971 10.0391 22.1732C9.4974 22.0076 8.97331 21.8059 8.47265 21.5651C7.29149 21.8691 6.07677 22.0579 4.80079 22.1355C4.46065 22.1559 4.13307 22.0019 3.93229 21.7265C3.73157 21.4512 3.68509 21.0923 3.8086 20.7748C4.12399 19.9651 4.38675 19.1692 4.57031 18.3685C3.37456 16.7557 2.66667 14.7908 2.66667 12.6667C2.66667 7.07772 7.5108 2.66667 13.3333 2.66667Z"
+        android:fillColor="#FFFFFF" />
+</vector>

apps/flipcash/core/src/main/res/drawable/ic_nav_scan_selected.xml

@@ -0,0 +1,16 @@
+<!-- IconCapture, solid weight — Flipcash tab bar, selected (node 8966:1366). White fill,
+     tinted at the call site. The outline twin is ic_nav_scan. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+    <path
+        android:pathData="M7.66667 6C6.74619 6 6 6.74619 6 7.66667V11C6 11.5523 5.55228 12 5 12C4.44772 12 4 11.5523 4 11V7.66667C4 5.64163 5.64163 4 7.66667 4H11C11.5523 4 12 4.44772 12 5C12 5.55228 11.5523 6 11 6H7.66667ZM20 5C20 4.44772 20.4477 4 21 4H24.3333C26.3584 4 28 5.64163 28 7.66667V11C28 11.5523 27.5523 12 27 12C26.4477 12 26 11.5523 26 11V7.66667C26 6.74619 25.2539 6 24.3333 6H21C20.4477 6 20 5.55228 20 5ZM5 20C5.55228 20 6 20.4477 6 21V24.3333C6 25.2539 6.74619 26 7.66667 26H11C11.5523 26 12 26.4477 12 27C12 27.5523 11.5523 28 11 28H7.66667C5.64163 28 4 26.3584 4 24.3333V21C4 20.4477 4.44772 20 5 20ZM27 20C27.5523 20 28 20.4477 28 21V24.3333C28 26.3584 26.3584 28 24.3333 28H21C20.4477 28 20 27.5523 20 27C20 26.4477 20.4477 26 21 26H24.3333C25.2539 26 26 25.2539 26 24.3333V21C26 20.4477 26.4477 20 27 20Z"
+        android:fillColor="#FFFFFF"
+        android:fillType="evenOdd" />
+    <path
+        android:pathData="M13.0404 10.212C13.6031 9.6494 14.3661 9.33333 15.1617 9.33333H16.8383C17.6339 9.33333 18.3969 9.6494 18.9596 10.212L19.1548 10.4073C19.3209 10.5734 19.5461 10.6667 19.7811 10.6667C21.3747 10.6667 22.6667 11.9586 22.6667 13.5523V18.3333C22.6667 19.9901 21.3235 21.3333 19.6667 21.3333H12.3333C10.6765 21.3333 9.33333 19.9901 9.33333 18.3333V13.5523C9.33333 11.9586 10.6253 10.6667 12.2189 10.6667C12.4538 10.6667 12.6791 10.5734 12.8452 10.4073L13.0404 10.212ZM14 15.8C14 14.6955 14.8955 13.8 16 13.8C17.1045 13.8 18 14.6955 18 15.8C18 16.9045 17.1045 17.8 16 17.8C14.8955 17.8 14 16.9045 14 15.8Z"
+        android:fillColor="#FFFFFF"
+        android:fillType="evenOdd" />
+</vector>

apps/flipcash/core/src/main/res/drawable/ic_nav_tipcard_selected.xml

@@ -0,0 +1,11 @@
+<!-- IconTipCard, solid weight — Flipcash tab bar, selected with no profile photo (node
+     8966:2774). White fill, tinted at the call site. The outline twin is ic_nav_tipcard. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+    <path
+        android:pathData="M18.3096 2.49023C22.2298 2.49023 24.1901 2.49006 25.6875 3.25293C27.0046 3.92404 28.076 4.99537 28.7471 6.3125C29.5098 7.80982 29.5098 9.77046 29.5098 13.6904V18.3096C29.5098 22.2295 29.5098 24.1902 28.7471 25.6875C28.076 27.0046 27.0046 28.076 25.6875 28.7471C24.1901 29.5099 22.2298 29.5098 18.3096 29.5098H13.6904C9.77021 29.5098 7.80986 29.5099 6.3125 28.7471C4.99537 28.076 3.92404 27.0046 3.25293 25.6875C2.4902 24.1902 2.49023 22.2296 2.49023 18.3096V13.6904C2.49023 9.77047 2.49021 7.80982 3.25293 6.3125C3.92404 4.99537 4.99537 3.92404 6.3125 3.25293C7.80986 2.49006 9.77021 2.49023 13.6904 2.49023H18.3096ZM12.7666 24.001C12.5214 23.8973 12.2332 23.9646 12.0723 24.1777C11.8642 24.4535 11.9535 24.8505 12.2695 24.9873C13.6472 25.5836 15.1723 25.8536 16.7275 25.7305C17.0723 25.7031 17.2863 25.3539 17.1777 25.0254C17.0943 24.7729 16.8442 24.6169 16.5791 24.6357C15.2505 24.7303 13.9486 24.5011 12.7666 24.001ZM24.6074 18.0234C24.348 18.0277 24.1269 18.2111 24.0586 18.4619C23.5198 20.4437 22.2698 22.189 20.5225 23.3203C20.2999 23.4645 20.1926 23.7386 20.2754 23.9902C20.3837 24.3189 20.7634 24.4701 21.0557 24.2842C23.0855 22.9921 24.5341 20.9732 25.1387 18.6787C25.2286 18.3375 24.9594 18.0179 24.6074 18.0234ZM13.1387 21.3066C12.9436 21.1949 12.7011 21.1932 12.5137 21.3184C12.1935 21.5324 12.1797 21.9978 12.5098 22.1943C14.0413 23.1053 15.9212 23.4207 17.7754 22.9209C18.3053 22.778 18.8043 22.576 19.2666 22.3242C19.4739 22.2113 19.5667 21.9661 19.502 21.7393C19.4026 21.3917 18.9895 21.2462 18.6689 21.4141C18.3032 21.6056 17.9108 21.7603 17.4961 21.8721C15.9658 22.2845 14.4145 22.0381 13.1387 21.3066ZM8.33789 19.6016C8.20448 19.2923 7.83476 19.1494 7.54004 19.3135C7.30664 19.4436 7.20113 19.7257 7.30469 19.9717C7.65077 20.7938 8.10337 21.5463 8.6416 22.2178C8.85762 22.4873 9.26496 22.4658 9.47363 22.1895C9.63288 21.9783 9.62058 21.6855 9.45703 21.4785C9.0109 20.9139 8.63222 20.2852 8.33789 19.6016ZM16.0391 12.7871C14.1306 12.7873 12.583 14.333 12.583 16.2402C12.583 18.1474 14.1306 19.6932 16.0391 19.6934C17.9477 19.6934 19.4951 18.1475 19.4951 16.2402C19.4951 14.3329 17.9477 12.7871 16.0391 12.7871ZM11.9756 11.3379C11.784 11.1117 11.4444 11.0808 11.2314 11.2881C9.50024 12.9749 8.70437 15.5298 9.37207 18.0381C9.44059 18.2954 9.52265 18.5458 9.61719 18.7881C9.73675 19.0945 10.1098 19.1926 10.3838 19.0098C10.6096 18.8589 10.6885 18.5663 10.5928 18.3125C10.5248 18.1325 10.4656 17.9467 10.415 17.7568C9.8599 15.6712 10.505 13.5476 11.9238 12.126C12.1373 11.9121 12.1702 11.568 11.9756 11.3379ZM20.5107 11.0498C20.3045 10.8691 19.994 10.8984 19.8066 11.0996C19.5879 11.3349 19.6244 11.7073 19.8623 11.9219C20.6696 12.6495 21.2834 13.6133 21.585 14.7451C21.8849 15.8715 21.834 17.0097 21.501 18.042C21.4611 18.1656 21.4548 18.2981 21.4902 18.4229C21.6385 18.9447 22.3085 19.0156 22.4854 18.502C22.9185 17.2441 22.9951 15.8476 22.627 14.4648C22.2602 13.0878 21.5047 11.9204 20.5107 11.0498ZM8.33984 11.8223C8.0753 11.624 7.69565 11.7012 7.54785 11.998C6.80905 13.4838 6.45367 15.1676 6.57129 16.8906C6.59801 17.2807 7.02259 17.4891 7.36426 17.2988C7.56114 17.189 7.67167 16.9721 7.6582 16.7471C7.56978 15.2683 7.87603 13.8245 8.50195 12.5439C8.62416 12.294 8.56182 11.9887 8.33984 11.8223ZM24.5352 12.166C24.3983 11.8762 24.0361 11.7871 23.7676 11.9629C23.5276 12.1202 23.4488 12.4344 23.5693 12.6943C23.7725 13.1317 23.9418 13.5928 24.0703 14.0752C24.2735 14.8384 24.3642 15.6053 24.3545 16.3584C24.3504 16.6806 24.6041 16.9543 24.9258 16.9492C25.2084 16.9446 25.4434 16.7244 25.4492 16.4414C25.4668 15.5676 25.3649 14.6766 25.1289 13.79C24.9776 13.2217 24.7774 12.6792 24.5352 12.166ZM11.7236 8.51074C11.6152 8.1817 11.2349 8.03058 10.9424 8.2168C10.0362 8.79366 9.24561 9.51499 8.59473 10.3418C8.41121 10.5749 8.46479 10.9101 8.70117 11.0879C8.94948 11.2743 9.30236 11.2157 9.49707 10.9727C10.0511 10.2805 10.7167 9.67313 11.4756 9.18164C11.6984 9.03736 11.8063 8.76261 11.7236 8.51074ZM15.8604 9.34863C15.3191 9.35981 14.77 9.43571 14.2236 9.58301C13.7773 9.70337 13.3531 9.86514 12.9541 10.0635C12.6522 10.2135 12.5903 10.6064 12.8076 10.8633C12.9796 11.0663 13.2713 11.1139 13.5117 10.999C13.8248 10.8492 14.1561 10.7254 14.5029 10.6318C14.928 10.5172 15.3553 10.454 15.7773 10.4375C15.9426 10.431 16.1011 10.3646 16.2139 10.2432C16.5382 9.89399 16.3357 9.33895 15.8604 9.34863ZM23.1621 10.0449C22.9918 9.84447 22.6989 9.81143 22.4785 9.95605L22.4189 9.99512C22.1617 10.1639 22.1226 10.5254 22.3232 10.7578C22.4888 10.9495 22.7722 10.9986 22.9844 10.8594L23.0381 10.8232C23.3027 10.6496 23.3663 10.2857 23.1621 10.0449ZM21.1953 8.30762C19.4792 7.17232 17.4034 6.60193 15.2715 6.77051C14.9267 6.79784 14.7128 7.14708 14.8213 7.47559C14.9047 7.72805 15.1548 7.88411 15.4199 7.86523C17.2577 7.73426 19.0459 8.22273 20.5342 9.18945C20.7285 9.31562 20.9796 9.32272 21.1738 9.19531C21.4954 8.98414 21.5154 8.51937 21.1953 8.30762Z"
+        android:fillColor="#FFFFFF" />
+</vector>

apps/flipcash/core/src/main/res/drawable/ic_nav_wallet.xml

@@ -1,13 +1,20 @@
-<!-- IconWallet5 — Flipcash tab bar (node 8966:1665). White fill, tinted at the call site. -->
+<!-- IconWallet5, outline weight — Flipcash tab bar, unselected (node 9442:103674). White stroke,
+     tinted at the call site. The solid twin is ic_nav_wallet_selected. -->
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="32dp"
     android:height="32dp"
     android:viewportWidth="32"
     android:viewportHeight="32">
     <path
-        android:pathData="M28 5.33333C28.7364 5.33333 29.3333 5.93029 29.3333 6.66667V11.3333H22.6667C20.8257 11.3333 19.3333 12.8257 19.3333 14.6667V17.3333C19.3333 19.1743 20.8257 20.6667 22.6667 20.6667H29.3333V25.3333C29.3333 26.0697 28.7364 26.6667 28 26.6667H4C3.26363 26.6667 2.66667 26.0697 2.66667 25.3333V6.66667C2.66667 5.93029 3.26363 5.33333 4 5.33333H28Z"
-        android:fillColor="#FFFFFF" />
+        android:pathData="M28.3333 12V6.33333H3.66667V25.6667H28.3333V20"
+        android:strokeColor="#FFFFFF"
+        android:strokeWidth="2"
+        android:strokeLineCap="round"
+        android:strokeLineJoin="round" />
     <path
-        android:pathData="M21.3333 14.6667C21.3333 13.9303 21.9303 13.3333 22.6667 13.3333H29.3333C30.0697 13.3333 30.6667 13.9303 30.6667 14.6667V17.3333C30.6667 18.0697 30.0697 18.6667 29.3333 18.6667H22.6667C21.9303 18.6667 21.3333 18.0697 21.3333 17.3333V14.6667Z"
-        android:fillColor="#FFFFFF" />
+        android:pathData="M29.6667 13H19.6667V19H29.6667V13Z"
+        android:strokeColor="#FFFFFF"
+        android:strokeWidth="2"
+        android:strokeLineCap="round"
+        android:strokeLineJoin="round" />
 </vector>

apps/flipcash/core/src/main/res/drawable/ic_nav_wallet_selected.xml

@@ -0,0 +1,14 @@
+<!-- IconWallet5, solid weight — Flipcash tab bar, selected (node 8966:1665). White fill, tinted
+     at the call site. The outline twin is ic_nav_wallet. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+    <path
+        android:pathData="M28 5.33333C28.7364 5.33333 29.3333 5.93029 29.3333 6.66667V11.3333H22.6667C20.8257 11.3333 19.3333 12.8257 19.3333 14.6667V17.3333C19.3333 19.1743 20.8257 20.6667 22.6667 20.6667H29.3333V25.3333C29.3333 26.0697 28.7364 26.6667 28 26.6667H4C3.26363 26.6667 2.66667 26.0697 2.66667 25.3333V6.66667C2.66667 5.93029 3.26363 5.33333 4 5.33333H28Z"
+        android:fillColor="#FFFFFF" />
+    <path
+        android:pathData="M21.3333 14.6667C21.3333 13.9303 21.9303 13.3333 22.6667 13.3333H29.3333C30.0697 13.3333 30.6667 13.9303 30.6667 14.6667V17.3333C30.6667 18.0697 30.0697 18.6667 29.3333 18.6667H22.6667C21.9303 18.6667 21.3333 18.0697 21.3333 17.3333V14.6667Z"
+        android:fillColor="#FFFFFF" />
+</vector>