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