diff --git a/app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckScaffold.kt b/app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckScaffold.kt
index 4d8399c87..b3fc152c3 100644
--- a/app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckScaffold.kt
+++ b/app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckScaffold.kt
@@ -4,8 +4,10 @@
package org.mozilla.fenix.shopping.ui
-import androidx.compose.foundation.Image
+import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
@@ -13,21 +15,23 @@ 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.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
+import mozilla.components.ui.colors.PhotonColors
import org.mozilla.fenix.R
import org.mozilla.fenix.compose.BottomSheetHandle
+import org.mozilla.fenix.compose.annotation.LightDarkPreview
import org.mozilla.fenix.theme.FirefoxTheme
private val bottomSheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)
@@ -81,22 +85,54 @@ fun ReviewQualityCheckScaffold(
@Composable
private fun Header() {
+ val betaBorderColor: Color
+ val betaTextColor: Color
+ if (isSystemInDarkTheme()) {
+ betaBorderColor = PhotonColors.LightGrey10
+ betaTextColor = FirefoxTheme.colors.textActionPrimary
+ } else {
+ betaBorderColor = FirefoxTheme.colors.actionTertiary
+ betaTextColor = FirefoxTheme.colors.textSecondary
+ }
+
Row(
modifier = Modifier.semantics(mergeDescendants = true) {},
verticalAlignment = Alignment.CenterVertically,
) {
- Image(
- painter = painterResource(id = R.drawable.ic_firefox),
- contentDescription = null,
- modifier = Modifier.size(24.dp),
- )
-
- Spacer(modifier = Modifier.width(10.dp))
-
Text(
text = stringResource(R.string.review_quality_check_feature_name),
color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline6,
)
+
+ Spacer(modifier = Modifier.width(8.dp))
+
+ Card(
+ elevation = 0.dp,
+ shape = RoundedCornerShape(8.dp),
+ backgroundColor = Color.Transparent,
+ border = BorderStroke(2.dp, betaBorderColor),
+ ) {
+ Text(
+ text = stringResource(R.string.review_quality_check_beta_flag).uppercase(),
+ modifier = Modifier.padding(horizontal = 12.dp, vertical = 4.dp),
+ color = betaTextColor,
+ style = FirefoxTheme.typography.body2,
+ )
+ }
+ }
+}
+
+@LightDarkPreview
+@Composable
+private fun HeaderPreview() {
+ FirefoxTheme {
+ Box(
+ modifier = Modifier
+ .background(color = FirefoxTheme.colors.layer1)
+ .padding(16.dp),
+ ) {
+ Header()
+ }
}
}
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index f589ece16..32ae20842 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -2232,7 +2232,7 @@
Open review checker
- Beta
+ Beta
Open review checker