For mozilla-mobile#26444: Use wallpaper adapted color for headers on …

…home screen.
mcarare · Aug 29, 2022 · 0fde61d · 0fde61d
1 parent d314c11
commit 0fde61d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/app/src/main/java/org/mozilla/fenix/compose/SectionHeader.kt b/app/src/main/java/org/mozilla/fenix/compose/SectionHeader.kt
@@ -7,8 +7,12 @@ package org.mozilla.fenix.compose
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
+import mozilla.components.lib.state.ext.observeAsComposableState
+import org.mozilla.fenix.components.AppStore
+import org.mozilla.fenix.components.components
 import org.mozilla.fenix.theme.FirefoxTheme
 
 /**
@@ -20,12 +24,18 @@ import org.mozilla.fenix.theme.FirefoxTheme
 @Composable
 fun SectionHeader(
     text: String,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    appStore: AppStore? = components.appStore
 ) {
+    val wallpaperState = appStore
+        ?.observeAsComposableState { state -> state.wallpaperState }?.value
+
+    val wallpaperAdaptedTextColor = wallpaperState?.currentWallpaper?.textColor?.let { Color(it) }
+
     Text(
         text = text,
         modifier = modifier,
-        color = FirefoxTheme.colors.textPrimary,
+        color = wallpaperAdaptedTextColor ?: FirefoxTheme.colors.textPrimary,
         overflow = TextOverflow.Ellipsis,
         maxLines = 2,
         style = FirefoxTheme.typography.headline7
@@ -35,5 +45,7 @@ fun SectionHeader(
 @Composable
 @Preview
 private fun HeadingTextPreview() {
-    SectionHeader(text = "Section title")
+    FirefoxTheme {
+        SectionHeader(text = "Section title", appStore = null)
+    }
 }
diff --git a/app/src/main/java/org/mozilla/fenix/compose/home/HomeSectionHeader.kt b/app/src/main/java/org/mozilla/fenix/compose/home/HomeSectionHeader.kt
@@ -94,14 +94,19 @@ private fun HomeSectionHeaderContent(
                 .wrapContentHeight(align = Alignment.Top)
         )
 
+        val wallpaperState = components.appStore
+            .observeAsComposableState { state -> state.wallpaperState }.value
+
+        val wallpaperAdaptedTextColor = wallpaperState?.currentWallpaper?.textColor?.let { Color(it) }
+
         ClickableText(
             text = AnnotatedString(text = stringResource(id = R.string.recent_tabs_show_all)),
             modifier = Modifier.padding(start = 16.dp)
                 .semantics {
                     contentDescription = description
                 },
             style = TextStyle(
-                color = showAllTextColor,
+                color = wallpaperAdaptedTextColor ?: showAllTextColor,
                 fontSize = 14.sp
             ),
             onClick = { onShowAllClick() }