tor-browser

commit 3157db2a5b406bd617543b88f1edd5457cab81f9
parent 939077064896a1fb6524aa72d563bdf4d5757aec
Author: Devota Aabel <daabel@mozilla.com>
Date:   Thu,  9 Oct 2025 16:38:11 +0000

Bug 1988204- Update Stories Discover More screen to match figma. r=android-reviewers,007

Differential Revision: https://phabricator.services.mozilla.com/D265167

Diffstat:
M
mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/ui/StoriesScreen.kt
 | 
44
++++++++++++++++++++++++--------------------
M
mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/ui/StoryCard.kt
 | 
1
+

2 files changed, 25 insertions(+), 20 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/ui/StoriesScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/ui/StoriesScreen.kt
@@ -8,14 +8,16 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.itemsIndexed
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
@@ -23,6 +25,7 @@ import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -49,23 +52,25 @@ fun StoriesScreen(
         onNavigationIconClick()
     }
 
+    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
     Scaffold(
         topBar = {
             TopAppBar(
                 title = {
                     Text(
                         text = stringResource(R.string.pocket_stories_header_2),
-                        color = FirefoxTheme.colors.textPrimary,
-                        style = FirefoxTheme.typography.headline6,
+                        color = MaterialTheme.colorScheme.onSurface,
+                        style = FirefoxTheme.typography.headline5,
                     )
                 },
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .fillMaxWidth(),
                 navigationIcon = {
                     IconButton(onClick = onNavigationIconClick) {
                         Icon(
                             painter = painterResource(iconsR.drawable.mozac_ic_back_24),
                             contentDescription = stringResource(R.string.stories_back_button_content_description),
-                            tint = FirefoxTheme.colors.iconPrimary,
+                            tint = MaterialTheme.colorScheme.onSurface,
                         )
                     }
                 },
@@ -73,10 +78,13 @@ fun StoriesScreen(
                     top = 0.dp,
                     bottom = 0.dp,
                 ),
-                colors = TopAppBarDefaults.topAppBarColors(containerColor = FirefoxTheme.colors.layer1),
+                scrollBehavior = scrollBehavior,
             )
         },
-        containerColor = FirefoxTheme.colors.layer1,
+        containerColor = MaterialTheme.colorScheme.surface,
+        modifier = Modifier
+            .fillMaxSize()
+            .nestedScroll(scrollBehavior.nestedScrollConnection),
     ) { paddingValues ->
         StoriesScreenContent(
             state = state,
@@ -93,9 +101,7 @@ private fun StoriesScreenContent(
     interactor: PocketStoriesInteractor,
 ) {
     Column(
-        modifier = Modifier
-            .padding(paddingValues)
-            .imePadding(),
+        modifier = Modifier.padding(top = paddingValues.calculateTopPadding()),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         Stories(
@@ -112,17 +118,15 @@ private fun Stories(
 ) {
     LazyVerticalGrid(
         columns = GridCells.Fixed(1),
-        verticalArrangement = Arrangement.spacedBy(20.dp),
-        horizontalArrangement = Arrangement.Center,
-        modifier = Modifier.padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
     ) {
-        state.pocketStories.forEachIndexed { index, story ->
-            item {
-                StoryCard(
-                    story = story,
-                    onClick = interactor::onStoryClicked,
-                )
-            }
+        itemsIndexed(state.pocketStories) { index, story ->
+            StoryCard(
+                modifier = Modifier.padding(horizontal = 16.dp),
+                story = story,
+                onClick = interactor::onStoryClicked,
+            )
         }
     }
 }
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/ui/StoryCard.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/ui/StoryCard.kt
@@ -55,6 +55,7 @@ internal fun StoryCard(
         },
         modifier = modifier,
         shape = cardShape,
+        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp),
         colors = CardDefaults.cardColors(containerColor = FirefoxTheme.colors.layer2),
     ) {
         Column(