For #21648: match Pocket sections on home to designs

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

@@ -14,8 +14,8 @@ 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 mozilla.components.ui.colors.PhotonColors
 
 /**
@@ -46,7 +46,6 @@ fun ClickableSubstringLink(
 
         addStyle(
             SpanStyle(
-                textDecoration = TextDecoration.Underline,
                 color = when (isSystemInDarkTheme()) {
                     true -> PhotonColors.Violet40
                     false -> PhotonColors.Violet70
@@ -62,6 +61,12 @@ fun ClickableSubstringLink(
             end = text.length
         )
 
+        addStyle(
+            SpanStyle(fontSize = 12.sp),
+            start = 0,
+            end = clickableEndIndex
+        )
+
         addStringAnnotation(
             tag = "link",
             annotation = "",

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

@@ -41,8 +41,39 @@ fun SectionHeader(
     )
 }
 
+/**
+ * Default layout for the header of a screen section.
+ *
+ * @param text [String] to be styled as header and displayed.
+ * @param modifier [Modifier] to be applied to the [Text].
+ */
+@Composable
+fun HomeSectionHeader(
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    Text(
+        modifier = modifier,
+        text = text,
+        style = TextStyle(
+            fontFamily = FontFamily(Font(R.font.metropolis_semibold)),
+            fontSize = 16.sp,
+            lineHeight = 20.sp
+        ),
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis,
+        color = FirefoxTheme.colors.textPrimary
+    )
+}
+
 @Composable
 @Preview
 private fun HeadingTextPreview() {
     SectionHeader(text = "Section title")
 }
+
+@Composable
+@Preview
+private fun HomeHeadingTextPreview() {
+    HomeSectionHeader(text = "Home section title")
+}

app/src/main/java/org/mozilla/fenix/home/recenttabs/view/RecentTabs.kt

@@ -29,7 +29,6 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.painter.BitmapPainter
 import androidx.compose.ui.layout.ContentScale
@@ -251,7 +250,7 @@ private fun RecentTabImage(
                 Box(
                     modifier = Modifier.background(
                         color = when (isSystemInDarkTheme()) {
-                            true -> Color(0xFF42414D) // DarkGrey30
+                            true -> PhotonColors.DarkGrey30
                             false -> PhotonColors.LightGrey30
                         }
                     )

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

@@ -8,13 +8,14 @@ package org.mozilla.fenix.home.sessioncontrol.viewholders.pocket
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.itemsIndexed
@@ -33,6 +34,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import mozilla.components.concept.fetch.Client
 import mozilla.components.service.pocket.PocketRecommendedStory
 import mozilla.components.ui.colors.PhotonColors
@@ -110,9 +112,14 @@ fun PocketStories(
     val listState = rememberLazyListState()
     val flingBehavior = EagerFlingBehavior(lazyRowState = listState)
 
-    LazyRow(state = listState, flingBehavior = flingBehavior) {
-        itemsIndexed(storiesToShow) { columnIndex, columnItems ->
-            Column(Modifier.padding(end = if (columnIndex < storiesToShow.size - 1) 8.dp else 0.dp)) {
+    LazyRow(
+        contentPadding = PaddingValues(start = 8.dp, end = 8.dp),
+        state = listState,
+        flingBehavior = flingBehavior,
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        itemsIndexed(storiesToShow) { _, columnItems ->
+            Column {
                 columnItems.forEachIndexed { rowIndex, story ->
                     if (story == placeholderStory) {
                         ListItemTabLargePlaceholder(stringResource(R.string.pocket_stories_placeholder_text)) {
@@ -195,7 +202,12 @@ fun PoweredByPocketHeader(
             Spacer(modifier = Modifier.width(16.dp))
 
             Column {
-                Text(text = stringResource(R.string.pocket_stories_feature_title), color = color)
+                Text(
+                    text = stringResource(R.string.pocket_stories_feature_title),
+                    color = color,
+                    fontSize = 12.sp,
+                    lineHeight = 16.sp
+                )
 
                 ClickableSubstringLink(text, color, linkStartIndex, linkEndIndex) {
                     onExternalLinkClicked("https://www.mozilla.org/en-US/firefox/pocket/")

app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/pocket/PocketStoriesViewHolder.kt

@@ -22,7 +22,7 @@ import mozilla.components.concept.fetch.Client
 import mozilla.components.lib.state.ext.observeAsComposableState
 import mozilla.components.service.pocket.PocketRecommendedStory
 import org.mozilla.fenix.R
-import org.mozilla.fenix.compose.SectionHeader
+import org.mozilla.fenix.compose.HomeSectionHeader
 import org.mozilla.fenix.home.HomeFragmentStore
 import org.mozilla.fenix.theme.FirefoxTheme
 
@@ -90,7 +90,7 @@ fun PocketStories(
     }
 
     Column(modifier = Modifier.padding(vertical = 48.dp)) {
-        SectionHeader(
+        HomeSectionHeader(
             text = stringResource(R.string.pocket_stories_header_1),
             modifier = Modifier
                 .fillMaxWidth()
@@ -102,7 +102,7 @@ fun PocketStories(
 
         Spacer(Modifier.height(24.dp))
 
-        SectionHeader(
+        HomeSectionHeader(
             text = stringResource(R.string.pocket_stories_categories_header),
             modifier = Modifier.fillMaxWidth()
         )

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

@@ -1983,7 +1983,7 @@
     <!-- Text of a button allowing users to access an external url for more Pocket recommendations. -->
     <string name="pocket_stories_placeholder_text">Discover more</string>
     <!-- Title of an app feature. Smaller than a heading.-->
-    <string name="pocket_stories_feature_title">Powered by Pocket</string>
+    <string name="pocket_stories_feature_title">Powered by Pocket.</string>
     <!-- Caption for describing a certain feature. The placeholder is for a clickable text (eg: Learn more) which will load an url in a new tab when clicked.  -->
     <string name="pocket_stories_feature_caption">Part of the Firefox family. %s</string>
     <!-- Clickable text for opening an external link for more information about Pocket. -->