For #23433 - Align the provided top sites to the design spec

app/src/main/java/org/mozilla/fenix/home/topsites/TopSiteItemViewHolder.kt

@@ -9,6 +9,7 @@ import android.view.MotionEvent
 import android.view.View
 import android.widget.PopupWindow
 import androidx.appcompat.content.res.AppCompatResources.getDrawable
+import androidx.core.view.isVisible
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers.IO
 import kotlinx.coroutines.Dispatchers.Main
@@ -80,6 +81,8 @@ class TopSiteItemViewHolder(
         }
 
         if (topSite is TopSite.Provided) {
+            binding.topSiteSubtitle.isVisible = true
+
             CoroutineScope(IO).launch {
                 itemView.context.components.core.client.bitmapForUrl(topSite.imageUrl)?.let { bitmap ->
                     withContext(Main) {

app/src/main/res/layout/top_site_item.xml

@@ -7,7 +7,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/top_site_item"
     android:layout_width="match_parent"
-    android:layout_height="@dimen/top_sites_item_size"
+    android:layout_height="wrap_content"
     android:layout_marginTop="@dimen/top_sites_item_margin_top"
     android:layout_marginBottom="@dimen/top_sites_item_margin_bottom"
     android:orientation="vertical">
@@ -41,6 +41,26 @@
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toBottomOf="@id/favicon_card"
-        tools:ignore="RtlCompat,SmallSp" />
+        tools:ignore="RtlCompat,SmallSp"
+        tools:text="Mozilla"/>
+
+    <TextView
+        android:id="@+id/top_site_subtitle"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:maxWidth="84dp"
+        android:layout_gravity="center_horizontal"
+        android:gravity="center"
+        android:textAlignment="center"
+        android:singleLine="true"
+        android:text="@string/top_sites_sponsored_label"
+        android:textColor="@color/fx_mobile_text_color_secondary"
+        android:textSize="10sp"
+        android:visibility="invisible"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/top_site_title"
+        tools:ignore="RtlCompat,SmallSp"
+        tools:visibility="visible"/>
 
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/values/dimens.xml

@@ -183,10 +183,9 @@
     <dimen name="account_settings_device_name_min_height">48dp</dimen>
 
     <!-- Top sites  -->
-    <dimen name="top_sites_item_size">84dp</dimen>
     <dimen name="top_sites_item_margin_top">8dp</dimen>
     <dimen name="top_sites_item_margin_bottom">12dp</dimen>
-    <dimen name="top_sites_text_margin_top">8dp</dimen>
+    <dimen name="top_sites_text_margin_top">6dp</dimen>
     <dimen name="top_sites_favicon_size">36dp</dimen>
     <dimen name="top_sites_favicon_elevation">0dp</dimen>
     <dimen name="top_sites_favicon_corner_size">4dp</dimen>

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

@@ -1905,6 +1905,8 @@
     <string name="top_sites_menu_settings">Settings</string>
     <!-- Text for the menu button to navigate to sponsors and privacy support articles. '&amp;' is replaced with the ampersand symbol: & -->
     <string name="top_sites_menu_sponsor_privacy">Our sponsors &amp; your privacy</string>
+    <!-- Label text displayed for a sponsored top site. -->
+    <string name="top_sites_sponsored_label">Sponsored</string>
 
     <!-- Inactive tabs in the tabs tray -->
     <!-- Title text displayed in the tabs tray when a tab has been unused for 14 days. -->