Use consistent tab styling across the app

WordPress/src/jetpack/res/values-night/colors_base.xml

@@ -8,7 +8,6 @@
     <color name="colorPrimaryEditor">@color/colorPrimary</color>
 
     <color name="nav_bar">@color/white</color>
-    <color name="tab_indicator">@color/white</color>
 
     <color name="fab_container">#4F378B</color>
     <color name="fab_on_container">#EADDFF</color>

WordPress/src/jetpack/res/values/colors_base.xml

@@ -18,7 +18,6 @@
     <color name="primary_dark">@color/jetpack_green_80</color>
 
     <color name="nav_bar">@color/black</color>
-    <color name="tab_indicator">@color/black</color>
 
     <color name="fab_container">#EADDFF</color>
     <color name="fab_on_container">#21005D</color>

WordPress/src/main/java/org/wordpress/android/ui/jetpack/scan/history/ScanHistoryFragment.kt

@@ -28,7 +28,6 @@ import org.wordpress.android.ui.jetpack.scan.history.ScanHistoryViewModel.UiStat
 import org.wordpress.android.ui.mysite.jetpackbadge.JetpackPoweredBottomSheetFragment
 import org.wordpress.android.ui.utils.UiHelpers
 import org.wordpress.android.util.JetpackBrandingUtils
-import org.wordpress.android.util.LocaleManagerWrapper
 import org.wordpress.android.util.extensions.getSerializableCompat
 import org.wordpress.android.util.extensions.getSerializableExtraCompat
 import javax.inject.Inject
@@ -39,9 +38,6 @@ class ScanHistoryFragment : Fragment(R.layout.scan_history_fragment), MenuProvid
     @Inject
     lateinit var uiHelpers: UiHelpers
 
-    @Inject
-    lateinit var localeManagerWrapper: LocaleManagerWrapper
-
     @Inject
     lateinit var jetpackBrandingUtils: JetpackBrandingUtils
     private val viewModel: ScanHistoryViewModel by activityViewModels()
@@ -105,8 +101,6 @@ class ScanHistoryFragment : Fragment(R.layout.scan_history_fragment), MenuProvid
 
         TabLayoutMediator(tabLayout, viewPager) { tab, position ->
             tab.text = uiHelpers.getTextOfUiString(requireContext(), list[position].label)
-                .toString()
-                .uppercase(localeManagerWrapper.getLocale())
         }.attach()
         tabLayout.addOnTabSelectedListener(onTabSelectedListener)
     }

WordPress/src/main/java/org/wordpress/android/ui/mysite/personalization/PersonalizationActivity.kt

@@ -120,13 +120,12 @@ class PersonalizationActivity : BaseAppCompatActivity() {
         Column(modifier = modifier.fillMaxWidth()) {
             PrimaryTabRow(
                 selectedTabIndex = tabIndex,
-                containerColor = MaterialTheme.colorScheme.surface,
-                contentColor = MaterialTheme.colorScheme.onSurface,
             ) {
                 tabs.forEachIndexed { index, title ->
-                    Tab(text = { Text(stringResource(id = title).uppercase()) },
+                    Tab(text = { Text(stringResource(id = title)) },
                         selected = tabIndex == index,
-                        onClick = { tabIndex = index }
+                        onClick = { tabIndex = index },
+                        unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant
                     )
                 }
             }

WordPress/src/main/java/org/wordpress/android/ui/newstats/NewStatsActivity.kt

@@ -34,7 +34,7 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.PrimaryTabRow
+import androidx.compose.material3.PrimaryScrollableTabRow
 import androidx.compose.material3.Tab
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
@@ -339,7 +339,7 @@ private fun NewStatsScreen(
                 .padding(contentPadding)
         ) {
             if (tabs.size > 1) {
-                PrimaryTabRow(selectedTabIndex = pagerState.currentPage) {
+                PrimaryScrollableTabRow(selectedTabIndex = pagerState.currentPage) {
                     tabs.forEachIndexed { index, tab ->
                         Tab(
                             selected = pagerState.currentPage == index,
@@ -348,6 +348,7 @@ private fun NewStatsScreen(
                                     pagerState.animateScrollToPage(index)
                                 }
                             },
+                            unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
                             text = {
                                 Text(
                                     text = stringResource(id = tab.titleResId)

WordPress/src/main/java/org/wordpress/android/ui/postsrs/screens/PostRsListScreen.kt

@@ -219,6 +219,7 @@ fun PostRsListScreen(
                             onClick = {
                                 coroutineScope.launch { pagerState.animateScrollToPage(index) }
                             },
+                            unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
                             text = { Text(text = stringResource(tab.labelResId)) }
                         )
                     }

WordPress/src/main/java/org/wordpress/android/ui/sitemonitor/SiteMonitorParentActivity.kt

@@ -29,7 +29,6 @@ import androidx.compose.material3.PrimaryTabRow
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Tab
-import androidx.compose.material3.TabRowDefaults
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.pulltorefresh.PullToRefreshBox
@@ -189,21 +188,12 @@ class SiteMonitorParentActivity : BaseAppCompatActivity(), SiteMonitorWebViewCli
         Column(modifier = modifier.fillMaxWidth()) {
             PrimaryTabRow(
                 selectedTabIndex = tabIndex,
-                containerColor = MaterialTheme.colorScheme.surface,
-                contentColor = MaterialTheme.colorScheme.onSurface,
-                indicator = {
-                    TabRowDefaults.SecondaryIndicator(
-                        color = MaterialTheme.colorScheme.onSurface,
-                        height = 2.0.dp,
-                        modifier = Modifier.tabIndicatorOffset(tabIndex)
-                    )
-                }
             ) {
                 tabs.forEachIndexed { index, item ->
                     Tab(
                         text = {
                             Text(
-                                text = stringResource(item.title).uppercase(),
+                                text = stringResource(item.title),
                                 maxLines = 1,
                                 overflow = TextOverflow.Ellipsis,
                                 fontWeight = FontWeight.Normal
@@ -214,6 +204,7 @@ class SiteMonitorParentActivity : BaseAppCompatActivity(), SiteMonitorWebViewCli
                             siteMonitorUtils.trackTabLoaded(tabs[index].siteMonitorType)
                             tabIndex = index
                         },
+                        unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
                     )
                 }
             }

WordPress/src/main/res/layout/notifications_list_fragment.xml

@@ -34,7 +34,6 @@
             android:layout_height="?attr/actionBarSize"
             android:visibility="visible"
             app:layout_scrollFlags="scroll|enterAlways"
-            app:tabGravity="fill"
             app:tabMode="scrollable" />
 
         <LinearLayout

WordPress/src/main/res/layout/pages_fragment.xml

@@ -59,7 +59,6 @@
                 android:layout_marginBottom="0dp"
                 android:background="@null"
                 android:clipToPadding="false"
-                app:tabGravity="fill"
                 app:tabMode="scrollable"
                 tools:paddingEnd="0dp"
                 tools:paddingStart="@dimen/page_list_tab_layout_fading_edge_width" />

WordPress/src/main/res/layout/post_list_activity.xml

@@ -36,7 +36,6 @@
                 android:background="@null"
                 android:clipToPadding="false"
                 android:importantForAccessibility="no"
-                app:tabGravity="fill"
                 app:tabMode="scrollable"
                 tools:paddingEnd="0dp"
                 tools:paddingStart="0dp" />

WordPress/src/main/res/layout/reader_discover_tabs_fragment.xml

@@ -1,18 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">
 
     <com.google.android.material.tabs.TabLayout
         android:id="@+id/tabLayout"
-        style="@style/WordPress.TabLayout.Material3"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        app:tabGravity="fill"
-        app:tabMaxWidth="0dp"
-        app:tabMode="fixed" />
+        android:layout_height="wrap_content" />
 
     <androidx.viewpager2.widget.ViewPager2
         android:id="@+id/viewPager"

WordPress/src/main/res/layout/reader_search_tabs.xml

@@ -1,12 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <com.google.android.material.tabs.TabLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    app:tabGravity="fill"
-    app:tabMaxWidth="0dp"
-    app:tabMode="fixed">
+    android:layout_height="wrap_content">
 
     <com.google.android.material.tabs.TabItem
         android:layout_width="wrap_content"

WordPress/src/main/res/layout/stats_block_tabs_item.xml

@@ -11,12 +11,9 @@
         android:layout_height="wrap_content"
         android:layout_gravity="top"
         android:background="?attr/colorSurface"
-        app:tabGravity="fill"
-        app:tabIndicatorColor="?attr/colorPrimary"
         app:tabMode="scrollable"
         app:tabPaddingEnd="@dimen/margin_extra_large"
-        app:tabPaddingStart="@dimen/margin_extra_large"
-        app:tabTextColor="?attr/colorPrimary" />
+        app:tabPaddingStart="@dimen/margin_extra_large" />
 
     <View
         android:layout_width="match_parent"

WordPress/src/main/res/layout/stats_fragment.xml

@@ -51,7 +51,6 @@
                 android:layout_width="match_parent"
                 android:layout_height="48dp"
                 android:layout_gravity="start"
-                app:tabGravity="fill"
                 app:tabMode="scrollable"
                 app:tabPaddingEnd="16dp"
                 app:tabPaddingStart="16dp" />

WordPress/src/main/res/layout/stats_view_all_fragment.xml

@@ -53,7 +53,6 @@
                 android:layout_height="48dp"
                 android:layout_gravity="start"
                 android:visibility="gone"
-                app:tabGravity="fill"
                 app:tabMode="scrollable"
                 app:tabPaddingEnd="16dp"
                 app:tabPaddingStart="16dp" />

WordPress/src/main/res/values-night/colors_base.xml

@@ -8,7 +8,6 @@
     <color name="colorPrimaryEditor">@color/colorPrimary</color>
 
     <color name="nav_bar">@color/colorPrimary</color>
-    <color name="tab_indicator">@color/colorPrimary</color>
 
     <color name="fab_container">@color/blue_70</color>
     <color name="fab_on_container">@color/blue_5</color>

WordPress/src/main/res/values/colors_base.xml

@@ -18,7 +18,6 @@
     <color name="primary_dark">@color/blue_80</color>
 
     <color name="nav_bar">@color/colorPrimary</color>
-    <color name="tab_indicator">@color/colorPrimary</color>
 
     <color name="fab_container">@color/blue_5</color>
     <color name="fab_on_container">@color/blue_80</color>

WordPress/src/main/res/values/styles.xml

@@ -461,25 +461,21 @@
         <item name="android:background">@drawable/tab_layout_background</item>
         <item name="android:elevation">0dp</item>
         <item name="android:duplicateParentState">true</item>
+        <item name="tabMode">auto</item>
+        <item name="tabGravity">fill</item>
+        <item name="tabInlineLabel">true</item>
+        <item name="tabMaxWidth">0dp</item>
+        <item name="tabTextAppearance">@style/TextAppearance.WordPress.Tab</item>
         <item name="tabTextColor">?attr/wpColorOnSurfaceMedium</item>
-        <item name="tabSelectedTextColor">?attr/colorOnSurface</item>
-        <item name="tabIndicatorColor">@color/tab_indicator</item>
+        <item name="tabSelectedTextColor">?attr/colorPrimary</item>
+        <item name="tabIndicatorColor">?attr/colorPrimary</item>
         <item name="tabBackground">@drawable/tab_indicator_color</item>
         <item name="android:layout_marginBottom">@dimen/bottom_tabs_divider_size</item>
     </style>
 
-    <style name="WordPress.TabLayout.Material3" parent="Widget.MaterialComponents.TabLayout">
-        <item name="android:background">?attr/colorSurface</item>
-        <item name="android:elevation">0dp</item>
-        <item name="tabIndicatorAnimationMode">elastic</item>
-        <item name="tabIndicatorFullWidth">false</item>
-        <item name="tabIndicatorHeight">3dp</item>
-        <item name="tabIndicator">@drawable/tab_indicator_md3</item>
-        <item name="tabIndicatorColor">?attr/colorPrimary</item>
-        <item name="tabTextColor">?attr/colorPrimary</item>
-        <item name="tabSelectedTextColor">?attr/colorPrimary</item>
-        <item name="tabTextAppearance">@style/TextAppearance.Material3.TitleSmall</item>
-        <item name="tabRippleColor">@null</item>
+    <style name="TextAppearance.WordPress.Tab" parent="TextAppearance.Design.Tab">
+        <item name="android:textAllCaps">false</item>
+        <item name="textAllCaps">false</item>
     </style>
 
     <style name="ActionButton.CloseMode.WordPress" parent="android:Widget.Material.ActionButton.CloseMode">