diff --git a/app/src/main/java/org/mozilla/fenix/compose/ClickableSubstringLink.kt b/app/src/main/java/org/mozilla/fenix/compose/ClickableSubstringLink.kt index 2c314bccbb..33a43fa7ba 100644 --- a/app/src/main/java/org/mozilla/fenix/compose/ClickableSubstringLink.kt +++ b/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, ) { } diff --git a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketRecommendationsHeaderViewHolder.kt b/app/src/main/java/org/mozilla/fenix/home/pocket/PocketRecommendationsHeaderViewHolder.kt index 31c46bb2ac..bc03291945 100644 --- a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketRecommendationsHeaderViewHolder.kt +++ b/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 = {}, + ) + } } } diff --git a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt b/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt index 7c13cd0cfc..5e65bdd561 100644 --- a/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt +++ b/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, ) {