PM-28522: Update the LoginWithDevice ui (#6221)

app/src/main/kotlin/com/x8bit/bitwarden/ui/auth/feature/loginwithdevice/LoginWithDeviceScreen.kt

@@ -27,18 +27,18 @@ import com.bitwarden.ui.platform.base.util.EventsEffect
 import com.bitwarden.ui.platform.base.util.standardHorizontalMargin
 import com.bitwarden.ui.platform.components.appbar.BitwardenTopAppBar
 import com.bitwarden.ui.platform.components.button.BitwardenOutlinedButton
+import com.bitwarden.ui.platform.components.card.BitwardenContentCard
 import com.bitwarden.ui.platform.components.content.BitwardenLoadingContent
+import com.bitwarden.ui.platform.components.content.model.ContentBlockData
 import com.bitwarden.ui.platform.components.dialog.BitwardenBasicDialog
 import com.bitwarden.ui.platform.components.dialog.BitwardenLoadingDialog
-import com.bitwarden.ui.platform.components.field.BitwardenTextField
-import com.bitwarden.ui.platform.components.field.model.TextToolbarType
-import com.bitwarden.ui.platform.components.model.CardStyle
 import com.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
 import com.bitwarden.ui.platform.components.text.BitwardenHyperTextLink
 import com.bitwarden.ui.platform.components.util.rememberVectorPainter
 import com.bitwarden.ui.platform.resource.BitwardenDrawable
 import com.bitwarden.ui.platform.resource.BitwardenString
 import com.bitwarden.ui.platform.theme.BitwardenTheme
+import kotlinx.collections.immutable.persistentListOf
 
 /**
  * The top level composable for the Login with Device screen.
@@ -156,18 +156,18 @@ private fun LoginWithDeviceScreenContent(
 
         Spacer(modifier = Modifier.height(24.dp))
 
-        BitwardenTextField(
+        BitwardenContentCard(
-            label = stringResource(id = BitwardenString.fingerprint_phrase),
+            contentItems = persistentListOf(
-            value = state.fingerprintPhrase,
+                ContentBlockData(
-            textFieldTestTag = "FingerprintPhraseValue",
+                    headerText = stringResource(id = BitwardenString.fingerprint_phrase),
-            onValueChange = { },
+                    subtitleText = state.fingerprintPhrase,
-            readOnly = true,
+                ),
-            singleLine = false,
+            ),
-            textToolbarType = TextToolbarType.NONE,
+            contentHeaderTextStyle = BitwardenTheme.typography.titleMedium,
-            textStyle = BitwardenTheme.typography.sensitiveInfoSmall,
+            contentSubtitleTextStyle = BitwardenTheme.typography.sensitiveInfoSmall,
-            textColor = BitwardenTheme.colorScheme.text.codePink,
+            contentSubtitleColor = BitwardenTheme.colorScheme.text.codePink,
-            cardStyle = CardStyle.Full,
             modifier = Modifier
+                .testTag(tag = "FingerprintPhraseValue")
                 .standardHorizontalMargin()
                 .fillMaxWidth(),
         )

ui/src/main/kotlin/com/bitwarden/ui/platform/components/card/BitwardenContentCard.kt

@@ -1,15 +1,15 @@
 package com.bitwarden.ui.platform.components.card
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
+import com.bitwarden.ui.platform.base.util.cardBackground
 import com.bitwarden.ui.platform.components.content.BitwardenContentBlock
 import com.bitwarden.ui.platform.components.content.model.ContentBlockData
+import com.bitwarden.ui.platform.components.model.CardStyle
 import com.bitwarden.ui.platform.theme.BitwardenTheme
 import kotlinx.collections.immutable.ImmutableList
 
@@ -20,6 +20,7 @@ import kotlinx.collections.immutable.ImmutableList
  * @param contentItems list of [ContentBlockData] items to display.
  * @param contentHeaderTextStyle the text style to use for the header text of the content.
  * @param contentSubtitleTextStyle the text style to use for the subtitle text of the content.
+ * @param contentSubtitleColor the color that should be applied to subtitle text of the content.
  * @param contentBackgroundColor the background color to use for the content.
  */
 @Composable
@@ -28,13 +29,13 @@ fun BitwardenContentCard(
     modifier: Modifier = Modifier,
     contentHeaderTextStyle: TextStyle = BitwardenTheme.typography.titleSmall,
     contentSubtitleTextStyle: TextStyle = BitwardenTheme.typography.bodyMedium,
+    contentSubtitleColor: Color = BitwardenTheme.colorScheme.text.secondary,
     contentBackgroundColor: Color = BitwardenTheme.colorScheme.background.secondary,
 ) {
     Column(
         modifier = modifier
             .fillMaxWidth()
-            .clip(shape = BitwardenTheme.shapes.content)
+            .cardBackground(cardStyle = CardStyle.Full, color = contentBackgroundColor),
-            .background(color = BitwardenTheme.colorScheme.background.secondary),
     ) {
         contentItems.forEachIndexed { index, item ->
             BitwardenContentBlock(
@@ -42,6 +43,7 @@ fun BitwardenContentCard(
                 showDivider = index != contentItems.lastIndex,
                 headerTextStyle = contentHeaderTextStyle,
                 subtitleTextStyle = contentSubtitleTextStyle,
+                subtitleColor = contentSubtitleColor,
                 backgroundColor = contentBackgroundColor,
             )
         }

ui/src/main/kotlin/com/bitwarden/ui/platform/components/content/BitwardenContentBlock.kt

@@ -35,6 +35,7 @@ fun BitwardenContentBlock(
     modifier: Modifier = Modifier,
     headerTextStyle: TextStyle = BitwardenTheme.typography.titleSmall,
     subtitleTextStyle: TextStyle = BitwardenTheme.typography.bodyMedium,
+    subtitleColor: Color = BitwardenTheme.colorScheme.text.secondary,
     backgroundColor: Color = BitwardenTheme.colorScheme.background.secondary,
     showDivider: Boolean = true,
 ) {
@@ -44,6 +45,7 @@ fun BitwardenContentBlock(
         headerTextStyle = headerTextStyle,
         subtitleText = data.subtitleText,
         subtitleTextStyle = subtitleTextStyle,
+        subtitleColor = subtitleColor,
         iconVectorResource = data.iconVectorResource,
         backgroundColor = backgroundColor,
         showDivider = showDivider,
@@ -61,6 +63,7 @@ private fun BitwardenContentBlock(
     headerTextStyle: TextStyle = BitwardenTheme.typography.titleSmall,
     subtitleText: AnnotatedString? = null,
     subtitleTextStyle: TextStyle = BitwardenTheme.typography.bodyMedium,
+    subtitleColor: Color = BitwardenTheme.colorScheme.text.secondary,
     showDivider: Boolean = true,
     @DrawableRes iconVectorResource: Int? = null,
     backgroundColor: Color = BitwardenTheme.colorScheme.background.secondary,
@@ -102,7 +105,7 @@ private fun BitwardenContentBlock(
                 Text(
                     text = it,
                     style = subtitleTextStyle,
-                    color = BitwardenTheme.colorScheme.text.secondary,
+                    color = subtitleColor,
                 )
             }
             Spacer(Modifier.height(12.dp))