[fenix] For https://github.com/mozilla-mobile/fenix/issues/26743: Update the URL text styling in ClickableSubstringLink used by PoweredByPocketHeader

Co-authored-by: Gabriel Luong <gabriel.luong@gmail.com>

app/src/main/java/org/mozilla/fenix/compose/ClickableSubstringLink.kt

@@ -13,6 +13,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.theme.FirefoxTheme
@@ -23,6 +24,8 @@ import org.mozilla.fenix.theme.Theme
  *
  * @param text Full text that will be displayed
  * @param textColor [Color] of the normal text. The URL substring will have a default URL style applied.
+ * @param linkTextColor [Color] of the link text.
+ * @param linkTextDecoration The decorations to paint on the link text (e.g., an underline).
  * @param clickableStartIndex [text] index at which the URL substring starts.
  * @param clickableEndIndex [text] index at which the URL substring ends.
  * @param onClick Callback to be invoked only when the URL substring is clicked.
@@ -30,7 +33,9 @@ import org.mozilla.fenix.theme.Theme
 @Composable
 fun ClickableSubstringLink(
     text: String,
-    textColor: Color,
+    textColor: Color = FirefoxTheme.colors.textPrimary,
+    linkTextColor: Color = FirefoxTheme.colors.textAccent,
+    linkTextDecoration: TextDecoration? = null,
     clickableStartIndex: Int,
     clickableEndIndex: Int,
     onClick: () -> Unit,
@@ -45,7 +50,10 @@ fun ClickableSubstringLink(
         )
 
         addStyle(
-            SpanStyle(color = FirefoxTheme.colors.textAccent),
+            SpanStyle(
+                color = linkTextColor,
+                textDecoration = linkTextDecoration,
+            ),
             start = clickableStartIndex,
             end = clickableEndIndex,
         )
@@ -91,7 +99,7 @@ private fun ClickableSubstringTextPreview() {
         Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
             ClickableSubstringLink(
                 text = text,
-                textColor = FirefoxTheme.colors.textPrimary,
+                linkTextDecoration = TextDecoration.Underline,
                 clickableStartIndex = text.indexOf("link"),
                 clickableEndIndex = text.length,
             ) { }

app/src/main/java/org/mozilla/fenix/home/pocket/PocketRecommendationsHeaderViewHolder.kt

@@ -6,7 +6,10 @@
 
 package org.mozilla.fenix.home.pocket
 
+import android.content.res.Configuration
 import android.view.View
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -47,7 +50,17 @@ class PocketRecommendationsHeaderViewHolder(
 
         val wallpaperState = components.appStore
             .observeAsComposableState { state -> state.wallpaperState }.value
-        val wallpaperAdaptedTextColor = wallpaperState?.currentWallpaper?.textColor?.let { Color(it) }
+
+        var textColor = FirefoxTheme.colors.textPrimary
+        var linkTextColor = FirefoxTheme.colors.textAccent
+
+        wallpaperState?.currentWallpaper?.let { currentWallpaper ->
+            currentWallpaper.textColor?.let {
+                val wallpaperAdaptedTextColor = Color(it)
+                textColor = wallpaperAdaptedTextColor
+                linkTextColor = wallpaperAdaptedTextColor
+            }
+        }
 
         Column {
             Spacer(Modifier.height(24.dp))
@@ -55,7 +68,8 @@ class PocketRecommendationsHeaderViewHolder(
             PoweredByPocketHeader(
                 onLearnMoreClicked = interactor::onLearnMoreClicked,
                 modifier = Modifier.fillMaxWidth(),
-                textColor = wallpaperAdaptedTextColor ?: FirefoxTheme.colors.textPrimary,
+                textColor = textColor,
+                linkTextColor = linkTextColor,
             )
         }
     }
@@ -66,11 +80,14 @@ class PocketRecommendationsHeaderViewHolder(
 }
 
 @Composable
-@Preview
-fun PocketRecommendationsFooterViewHolderPreview() {
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+private fun PocketRecommendationsFooterViewHolderPreview() {
     FirefoxTheme(theme = Theme.getTheme()) {
-        PoweredByPocketHeader(
-            onLearnMoreClicked = {},
-        )
+        Box(modifier = Modifier.background(color = FirefoxTheme.colors.layer1)) {
+            PoweredByPocketHeader(
+                onLearnMoreClicked = {},
+            )
+        }
     }
 }

app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt

@@ -44,6 +44,7 @@ import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
@@ -391,12 +392,14 @@ fun PocketStoriesCategories(
  * Contains the full URL for where the user should be navigated to.
  * @param modifier [Modifier] to be applied to the layout.
  * @param textColor [Color] to be applied to the text.
+ * @param linkTextColor [Color] of the link text.
  */
 @Composable
 fun PoweredByPocketHeader(
     onLearnMoreClicked: (String) -> Unit,
     modifier: Modifier = Modifier,
     textColor: Color = FirefoxTheme.colors.textPrimary,
+    linkTextColor: Color = FirefoxTheme.colors.textAccent,
 ) {
     val link = stringResource(R.string.pocket_stories_feature_learn_more)
     val text = stringResource(R.string.pocket_stories_feature_caption, link)
@@ -433,6 +436,8 @@ fun PoweredByPocketHeader(
                 ClickableSubstringLink(
                     text = text,
                     textColor = textColor,
+                    linkTextColor = linkTextColor,
+                    linkTextDecoration = TextDecoration.Underline,
                     clickableStartIndex = linkStartIndex,
                     clickableEndIndex = linkEndIndex,
                 ) {