[#1216] Home screen tabs UI improvements

Closing #1216

CHANGELOG.md

@@ -11,7 +11,8 @@ directly impact users rather than highlighting other key architectural updates.*
 
 ### Fixed
 - Fixed character replacement in Zcash addresses on the Receive screen caused by ligatures in the app's primary font 
- using the secondary font. This will be revisited once a proper font is added. 
+ using the secondary font. This will be revisited once a proper font is added.
+- Improved spacing of titles of bottom navigation tabs so they work better on smaller screens 
 
 ## [0.2.0 (541)] - 2024-01-30
 - Update the Zcash SDK dependency to version 2.0.5, which improves the performance of block synchronization

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Text.kt

@@ -346,15 +346,34 @@ fun BodyWithFiatCurrencySymbol(
     )
 }
 
+@Preview
+@Composable
+private fun NavigationTabTextPreview() {
+    ZcashTheme(forceDarkMode = false) {
+        GradientSurface {
+            Column {
+                NavigationTabText(
+                    text = "Account",
+                    selected = false,
+                    modifier = Modifier,
+                    onClick = {}
+                )
+            }
+        }
+    }
+}
+
 @Composable
 fun NavigationTabText(
     text: String,
     selected: Boolean,
+    onClick: () -> Unit,
     modifier: Modifier = Modifier
 ) {
     Text(
         text = text,
         style = ZcashTheme.extendedTypography.textNavTab,
+        textAlign = TextAlign.Center,
         fontWeight =
             if (selected) {
                 FontWeight.Black
@@ -364,6 +383,10 @@ fun NavigationTabText(
         maxLines = 1,
         overflow = TextOverflow.Visible,
         color = ZcashTheme.colors.tabTextColor,
-        modifier = modifier
+        modifier =
+            Modifier
+                .clip(RoundedCornerShape(ZcashTheme.dimens.topAppBarActionRippleCorner))
+                .clickable { onClick() }
+                .then(modifier)
     )
 }

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/home/view/HomeView.kt

@@ -11,7 +11,6 @@ import androidx.compose.foundation.pager.PagerDefaults
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.Divider
 import androidx.compose.material3.DividerDefaults
-import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRow
 import androidx.compose.material3.TabRowDefaults
 import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
@@ -146,23 +145,25 @@ fun Home(
                 modifier =
                     Modifier
                         .navigationBarsPadding()
-                        .padding(all = ZcashTheme.dimens.spacingDefault)
+                        .padding(
+                            horizontal = ZcashTheme.dimens.spacingDefault,
+                            vertical = ZcashTheme.dimens.spacingSmall
+                        )
             ) {
                 subScreens.forEachIndexed { index, item ->
                     val selected = index == pagerState.currentPage
-                    Tab(
+
+                    NavigationTabText(
+                        text = item.title,
                         selected = selected,
-                        text = {
-                            NavigationTabText(
-                                text = item.title,
-                                selected = selected
-                            )
-                        },
+                        onClick = { coroutineScope.launch { pagerState.animateScrollToPage(index) } },
                         modifier =
                             Modifier
-                                .padding(all = 0.dp)
-                                .testTag(item.testTag),
-                        onClick = { coroutineScope.launch { pagerState.animateScrollToPage(index) } },
+                                .padding(
+                                    horizontal = ZcashTheme.dimens.spacingXtiny,
+                                    vertical = ZcashTheme.dimens.spacingDefault
+                                )
+                                .testTag(item.testTag)
                     )
                 }
             }