Bug 1852928 - Update review quality check bottom sheet header

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()
+        }
     }
 }

app/src/main/res/values/strings.xml

@@ -2232,7 +2232,7 @@
     <!-- Text displayed in the second CFR presenting the review quality check feature that opens the review checker when clicked. -->
     <string name="review_quality_check_second_cfr_action" tools:ignore="UnusedResources">Open review checker</string>
     <!-- Flag showing that the review quality check feature is work in progress. -->
-    <string name="review_quality_check_beta_flag" tools:ignore="UnusedResources">Beta</string>
+    <string name="review_quality_check_beta_flag">Beta</string>
     <!-- Content description (not visible, for screen readers etc.) for opening browser menu button to open review quality check bottom sheet. -->
     <string name="review_quality_check_open_handle_content_description">Open review checker</string>
     <!-- Content description (not visible, for screen readers etc.) for closing browser menu button to open review quality check bottom sheet. -->