For #27746 - Move top sites text outside of backplating

app/src/androidTest/java/org/mozilla/fenix/ui/TopSitesTest.kt

@@ -9,6 +9,7 @@ import androidx.test.uiautomator.UiDevice
 import okhttp3.mockwebserver.MockWebServer
 import org.junit.After
 import org.junit.Before
+import org.junit.Ignore
 import org.junit.Rule
 import org.junit.Test
 import org.mozilla.fenix.R
@@ -235,6 +236,7 @@ class TopSitesTest {
 
     @SmokeTest
     @Test
+    @Ignore("Design was reverted: https://github.com/mozilla-mobile/fenix/issues/27714")
     fun verifySponsoredShortcutsListTest() {
         homeScreen {
             var sponsoredShortcutTitle = getSponsoredShortcutTitle(2)
@@ -253,6 +255,7 @@ class TopSitesTest {
     }
 
     @Test
+    @Ignore("Design was reverted: https://github.com/mozilla-mobile/fenix/issues/27714")
     fun openSponsoredShortcutTest() {
         var sponsoredShortcutTitle = ""
 
@@ -264,6 +267,7 @@ class TopSitesTest {
     }
 
     @Test
+    @Ignore("Design was reverted: https://github.com/mozilla-mobile/fenix/issues/27714")
     fun openSponsoredShortcutInPrivateBrowsingTest() {
         var sponsoredShortcutTitle = ""
 
@@ -276,6 +280,7 @@ class TopSitesTest {
     }
 
     @Test
+    @Ignore("Design was reverted: https://github.com/mozilla-mobile/fenix/issues/27714")
     fun verifySponsoredShortcutsSponsorsAndPrivacyOptionTest() {
         var sponsoredShortcutTitle = ""
 
@@ -288,6 +293,7 @@ class TopSitesTest {
     }
 
     @Test
+    @Ignore("Design was reverted: https://github.com/mozilla-mobile/fenix/issues/27714")
     fun verifySponsoredShortcutsSettingsOptionTest() {
         var sponsoredShortcutTitle = ""
 

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

@@ -5,13 +5,17 @@
 package org.mozilla.fenix.home.topsites
 
 import android.annotation.SuppressLint
+import android.content.res.ColorStateList
 import android.view.MotionEvent
 import android.view.View
 import android.widget.PopupWindow
 import androidx.annotation.VisibleForTesting
 import androidx.appcompat.content.res.AppCompatResources.getDrawable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
 import androidx.core.content.ContextCompat
 import androidx.core.view.isVisible
+import androidx.core.widget.TextViewCompat
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.lifecycleScope
 import kotlinx.coroutines.Dispatchers.IO
@@ -21,6 +25,7 @@ import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import mozilla.components.feature.top.sites.TopSite
 import mozilla.components.lib.state.ext.flowScoped
+import mozilla.components.support.ktx.android.content.getColorFromAttr
 import mozilla.components.support.ktx.kotlinx.coroutines.flow.ifChanged
 import org.mozilla.fenix.GleanMetrics.Pings
 import org.mozilla.fenix.GleanMetrics.TopSites
@@ -92,7 +97,24 @@ class TopSiteItemViewHolder(
                         }
                     }
 
-                    binding.topSiteCard.setCardBackgroundColor(backgroundColor)
+                    binding.faviconCard.setCardBackgroundColor(backgroundColor)
+
+                    val textColor = currentState.currentWallpaper.textColor
+                    if (textColor != null) {
+                        val color = Color(textColor).toArgb()
+                        val colorList = ColorStateList.valueOf(color)
+                        binding.topSiteTitle.setTextColor(color)
+                        binding.topSiteSubtitle.setTextColor(color)
+                        TextViewCompat.setCompoundDrawableTintList(binding.topSiteTitle, colorList)
+                    } else {
+                        binding.topSiteTitle.setTextColor(
+                            view.context.getColorFromAttr(R.attr.textPrimary),
+                        )
+                        binding.topSiteSubtitle.setTextColor(
+                            view.context.getColorFromAttr(R.attr.textSecondary),
+                        )
+                        TextViewCompat.setCompoundDrawableTintList(binding.topSiteTitle, null)
+                    }
                 }
         }
     }

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

@@ -174,6 +174,7 @@
     <dimen name="top_sites_favicon_corner_size">4dp</dimen>
 
     <dimen name="top_sites_card_size">60dp</dimen>
+    <dimen name="top_sites_card_margin_top">4dp</dimen>
     <dimen name="top_sites_card_padding">12dp</dimen>
     <dimen name="top_sites_card_elevation">6dp</dimen>
     <dimen name="top_sites_card_radius">8dp</dimen>

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

@@ -677,6 +677,7 @@
     <style name="TopSite.FaviconCard" parent="Mozac.Widgets.Favicon">
         <item name="android:layout_width">@dimen/top_sites_card_size</item>
         <item name="android:layout_height">@dimen/top_sites_card_size</item>
+        <item name="android:layout_marginTop">@dimen/top_sites_card_margin_top</item>
         <item name="android:padding">@dimen/top_sites_card_padding</item>
         <item name="cardBackgroundColor">?mozac_widget_favicon_background_color</item>
         <item name="cardCornerRadius">@dimen/top_sites_card_radius</item>