[fenix] For mozilla-mobile/fenix#27457 - Refactor Pocket category colors

mozilla-mobile · Nov 16, 2022 · d7299fa · d7299fa
1 parent 8e47aab
commit d7299fa
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 36 deletions.
diff --git a/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/PocketCategoriesViewHolder.kt b/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/PocketCategoriesViewHolder.kt
@@ -4,6 +4,7 @@
 
 package org.mozilla.fenix.home.pocket
 
+import android.content.res.Configuration
 import android.view.View
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Column
@@ -12,7 +13,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -25,7 +25,6 @@ import org.mozilla.fenix.components.components
 import org.mozilla.fenix.compose.ComposeViewHolder
 import org.mozilla.fenix.compose.home.HomeSectionHeader
 import org.mozilla.fenix.theme.FirefoxTheme
-import org.mozilla.fenix.theme.Theme
 import org.mozilla.fenix.wallpapers.WallpaperState
 
 internal const val POCKET_CATEGORIES_SELECTED_AT_A_TIME_COUNT = 8
@@ -61,10 +60,8 @@ class PocketCategoriesViewHolder(
         val wallpaperState = components.appStore
             .observeAsComposableState { state -> state.wallpaperState }.value ?: WallpaperState.default
 
-        var selectedBackgroundColor: Color? = null
-        var unselectedBackgroundColor: Color? = null
-        var selectedTextColor: Color? = null
-        var unselectedTextColor: Color? = null
+        var (selectedBackgroundColor, unselectedBackgroundColor, selectedTextColor, unselectedTextColor) =
+            PocketStoriesCategoryColors.buildColors()
         wallpaperState.composeRunIfWallpaperCardColorsAreAvailable { cardColorLight, cardColorDark ->
             if (isSystemInDarkTheme()) {
                 selectedBackgroundColor = cardColorDark
@@ -79,16 +76,20 @@ class PocketCategoriesViewHolder(
             }
         }
 
+        val categoryColors = PocketStoriesCategoryColors(
+            selectedTextColor = selectedTextColor,
+            unselectedTextColor = unselectedTextColor,
+            selectedBackgroundColor = selectedBackgroundColor,
+            unselectedBackgroundColor = unselectedBackgroundColor,
+        )
+
         // See the detailed comment in PocketStoriesViewHolder for reasoning behind this change.
         if (!homeScreenReady) return
         Column {
             Spacer(Modifier.height(24.dp))
 
             PocketTopics(
-                selectedBackgroundColor = selectedBackgroundColor,
-                unselectedBackgroundColor = unselectedBackgroundColor,
-                selectedTextColor = selectedTextColor,
-                unselectedTextColor = unselectedTextColor,
+                categoryColors = categoryColors,
                 categories = categories ?: emptyList(),
                 categoriesSelections = categoriesSelections ?: emptyList(),
                 onCategoryClick = interactor::onCategoryClicked,
@@ -103,12 +104,9 @@ class PocketCategoriesViewHolder(
 
 @Composable
 private fun PocketTopics(
-    selectedTextColor: Color? = null,
-    unselectedTextColor: Color? = null,
-    selectedBackgroundColor: Color? = null,
-    unselectedBackgroundColor: Color? = null,
     categories: List<PocketRecommendedStoriesCategory> = emptyList(),
     categoriesSelections: List<PocketRecommendedStoriesSelectedCategory> = emptyList(),
+    categoryColors: PocketStoriesCategoryColors = PocketStoriesCategoryColors.buildColors(),
     onCategoryClick: (PocketRecommendedStoriesCategory) -> Unit,
 ) {
     Column {
@@ -121,21 +119,18 @@ private fun PocketTopics(
         PocketStoriesCategories(
             categories = categories,
             selections = categoriesSelections,
-            selectedTextColor = selectedTextColor,
-            unselectedTextColor = unselectedTextColor,
-            selectedBackgroundColor = selectedBackgroundColor,
-            unselectedBackgroundColor = unselectedBackgroundColor,
+            modifier = Modifier.fillMaxWidth(),
+            categoryColors = categoryColors,
             onCategoryClick = onCategoryClick,
-            modifier = Modifier
-                .fillMaxWidth(),
         )
     }
 }
 
 @Composable
-@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 private fun PocketCategoriesViewHolderPreview() {
-    FirefoxTheme(theme = Theme.getTheme()) {
+    FirefoxTheme {
         PocketTopics(
             categories = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"
                 .split(" ")

diff --git a/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt b/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt
@@ -419,25 +419,19 @@ private fun Rect.getIntersectPercentage(realSize: IntSize, other: Rect): Float {
  *
  * @param categories The categories needed to be displayed.
  * @param selections List of categories currently selected.
- * @param selectedTextColor Text [Color] when the category is selected.
- * @param unselectedTextColor Text [Color] when the category is not selected.
- * @param selectedBackgroundColor Background [Color] when the category is selected.
- * @param unselectedBackgroundColor Background [Color] when the category is not selected.
- * @param onCategoryClick Callback for when the user taps a category.
  * @param modifier [Modifier] to be applied to the layout.
+ * @param categoryColors The color set defined by [PocketStoriesCategoryColors] used to style Pocket categories.
+ * @param onCategoryClick Callback for when the user taps a category.
  */
 @OptIn(ExperimentalComposeUiApi::class)
 @Suppress("LongParameterList")
 @Composable
 fun PocketStoriesCategories(
     categories: List<PocketRecommendedStoriesCategory>,
     selections: List<PocketRecommendedStoriesSelectedCategory>,
-    selectedTextColor: Color? = null,
-    unselectedTextColor: Color? = null,
-    selectedBackgroundColor: Color? = null,
-    unselectedBackgroundColor: Color? = null,
-    onCategoryClick: (PocketRecommendedStoriesCategory) -> Unit,
     modifier: Modifier = Modifier,
+    categoryColors: PocketStoriesCategoryColors = PocketStoriesCategoryColors.buildColors(),
+    onCategoryClick: (PocketRecommendedStoriesCategory) -> Unit,
 ) {
     Box(
         modifier = modifier.semantics {
@@ -453,10 +447,10 @@ fun PocketStoriesCategories(
                 SelectableChip(
                     text = category.name,
                     isSelected = selections.map { it.name }.contains(category.name),
-                    selectedTextColor = selectedTextColor,
-                    unselectedTextColor = unselectedTextColor,
-                    selectedBackgroundColor = selectedBackgroundColor,
-                    unselectedBackgroundColor = unselectedBackgroundColor,
+                    selectedTextColor = categoryColors.selectedTextColor,
+                    unselectedTextColor = categoryColors.unselectedTextColor,
+                    selectedBackgroundColor = categoryColors.selectedBackgroundColor,
+                    unselectedBackgroundColor = categoryColors.unselectedBackgroundColor,
                 ) {
                     onCategoryClick(category)
                 }
@@ -465,6 +459,40 @@ fun PocketStoriesCategories(
     }
 }
 
+/**
+ * Wrapper for the color parameters of [PocketStoriesCategories].
+ *
+ * @param selectedTextColor Text [Color] when the category is selected.
+ * @param unselectedTextColor Text [Color] when the category is not selected.
+ * @param selectedBackgroundColor Background [Color] when the category is selected.
+ * @param unselectedBackgroundColor Background [Color] when the category is not selected.
+ */
+data class PocketStoriesCategoryColors(
+    val selectedBackgroundColor: Color,
+    val unselectedBackgroundColor: Color,
+    val selectedTextColor: Color,
+    val unselectedTextColor: Color,
+) {
+    companion object {
+
+        /**
+         * Builder function used to construct an instance of [PocketStoriesCategoryColors].
+         */
+        @Composable
+        fun buildColors(
+            selectedBackgroundColor: Color = FirefoxTheme.colors.textActionPrimary,
+            unselectedBackgroundColor: Color = FirefoxTheme.colors.textActionTertiary,
+            selectedTextColor: Color = FirefoxTheme.colors.actionPrimary,
+            unselectedTextColor: Color = FirefoxTheme.colors.actionTertiary,
+        ) = PocketStoriesCategoryColors(
+                selectedTextColor = selectedTextColor,
+                unselectedTextColor = unselectedTextColor,
+                selectedBackgroundColor = selectedBackgroundColor,
+                unselectedBackgroundColor = unselectedBackgroundColor,
+            )
+    }
+}
+
 /**
  * Pocket feature section title.
  * Shows a default text about Pocket and offers a external link to learn more.