From 895b6396ba5f6ec64e5051db4acc69779109079b Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Fri, 4 Feb 2022 12:59:20 -0500
Subject: [PATCH] [fenix] For
 https://github.com/mozilla-mobile/fenix/issues/23575 - Use design system
 colors for the Pocket filter and Customize homepage buttons

---
 .../mozilla/fenix/compose/SelectableChip.kt   | 38 +++++++++----------
 .../CustomizeHomeButtonViewHolder.kt          | 15 +++-----
 2 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/app/src/main/java/org/mozilla/fenix/compose/SelectableChip.kt b/app/src/main/java/org/mozilla/fenix/compose/SelectableChip.kt
index 37757ea968..141cbe97a4 100644
--- a/app/src/main/java/org/mozilla/fenix/compose/SelectableChip.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/SelectableChip.kt
@@ -7,7 +7,6 @@ package org.mozilla.fenix.compose
 import android.content.res.Configuration.UI_MODE_NIGHT_NO
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
 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.Row
@@ -25,7 +24,6 @@ import androidx.compose.ui.text.intl.Locale
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.theme.FirefoxTheme
 
 /**
@@ -41,27 +39,27 @@ fun SelectableChip(
     isSelected: Boolean,
     onClick: () -> Unit
 ) {
-    val backgroundColor = when (isSystemInDarkTheme()) {
-        true -> if (isSelected) PhotonColors.Violet50 else PhotonColors.DarkGrey50
-        false -> if (isSelected) PhotonColors.Ink20 else PhotonColors.LightGrey40
-    }
-
     Box(
         modifier = Modifier
             .selectable(isSelected) { onClick() }
             .clip(MaterialTheme.shapes.small)
-            .background(backgroundColor)
-            .padding(16.dp, 10.dp)
+            .background(
+                color = if (isSelected) {
+                    FirefoxTheme.colors.actionPrimary
+                } else {
+                    FirefoxTheme.colors.actionTertiary
+                }
+            )
+            .padding(horizontal = 16.dp, vertical = 10.dp)
     ) {
-        val contentColor = when {
-            isSystemInDarkTheme() || isSelected -> PhotonColors.LightGrey10
-            else -> PhotonColors.DarkGrey90
-        }
-
         Text(
             text = text.capitalize(Locale.current),
             style = TextStyle(fontSize = 14.sp),
-            color = contentColor
+            color = if (isSelected) {
+                FirefoxTheme.colors.textActionPrimary
+            } else {
+                FirefoxTheme.colors.textActionTertiary
+            }
         )
     }
 }
@@ -71,10 +69,12 @@ fun SelectableChip(
 private fun SelectableChipDarkThemePreview() {
     FirefoxTheme {
         Row(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(FirefoxTheme.colors.layer1),
             horizontalArrangement = Arrangement.SpaceEvenly
         ) {
-            SelectableChip("Chirp", false) { }
+            SelectableChip(text = "Chirp", isSelected = false) { }
             SelectableChip(text = "Chirp", isSelected = true) { }
         }
     }
@@ -87,10 +87,10 @@ private fun SelectableChipLightThemePreview() {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .background(FirefoxTheme.colors.layer2),
+                .background(FirefoxTheme.colors.layer1),
             horizontalArrangement = Arrangement.SpaceEvenly
         ) {
-            SelectableChip("Chirp", false) { }
+            SelectableChip(text = "Chirp", isSelected = false) { }
             SelectableChip(text = "Chirp", isSelected = true) { }
         }
     }
diff --git a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/CustomizeHomeButtonViewHolder.kt b/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/CustomizeHomeButtonViewHolder.kt
index 15f96a6945..e9ff614d0b 100644
--- a/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/CustomizeHomeButtonViewHolder.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/sessioncontrol/viewholders/CustomizeHomeButtonViewHolder.kt
@@ -5,7 +5,6 @@
 package org.mozilla.fenix.home.sessioncontrol.viewholders
 
 import android.view.View
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -25,7 +24,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.LifecycleOwner
-import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.ComposeViewHolder
 import org.mozilla.fenix.home.sessioncontrol.CustomizeHomeIteractor
@@ -62,11 +60,6 @@ class CustomizeHomeButtonViewHolder(
 fun CustomizeHomeButton(
     onButtonClick: () -> Unit
 ) {
-    val backgroundColor = when (isSystemInDarkTheme()) {
-        true -> PhotonColors.DarkGrey50
-        false -> PhotonColors.LightGrey40
-    }
-
     Button(
         onClick = { onButtonClick() },
         modifier = Modifier
@@ -75,8 +68,8 @@ fun CustomizeHomeButton(
             .height(36.dp),
         elevation = ButtonDefaults.elevation(defaultElevation = 0.dp, pressedElevation = 0.dp),
         colors = outlinedButtonColors(
-            backgroundColor = backgroundColor,
-            contentColor = FirefoxTheme.colors.textPrimary
+            backgroundColor = FirefoxTheme.colors.actionTertiary,
+            contentColor = FirefoxTheme.colors.textActionTertiary
         )
     ) {
         Text(
@@ -93,5 +86,7 @@ fun CustomizeHomeButton(
 @Composable
 @Preview
 fun CustomizeHomeButtonPreview() {
-    CustomizeHomeButton(onButtonClick = {})
+    FirefoxTheme {
+        CustomizeHomeButton(onButtonClick = {})
+    }
 }