PM-15067 - Design Audit - Prevent Account Lockout Screen (#4361)

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/preventaccountlockout/PreventAccountLockoutScreen.kt

@@ -1,33 +1,24 @@
 package com.x8bit.bitwarden.ui.auth.feature.preventaccountlockout
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBarsPadding
 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.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -35,10 +26,12 @@ import com.x8bit.bitwarden.R
 import com.x8bit.bitwarden.ui.platform.base.util.EventsEffect
 import com.x8bit.bitwarden.ui.platform.base.util.standardHorizontalMargin
 import com.x8bit.bitwarden.ui.platform.components.appbar.BitwardenTopAppBar
-import com.x8bit.bitwarden.ui.platform.components.divider.BitwardenHorizontalDivider
+import com.x8bit.bitwarden.ui.platform.components.card.BitwardenContentCard
+import com.x8bit.bitwarden.ui.platform.components.model.ContentBlockData
 import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
 import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
+import kotlinx.collections.immutable.persistentListOf
 
 /**
  * Top level screen component for the prevent account lockout info screen.
@@ -75,102 +68,57 @@ fun PreventAccountLockoutScreen(
             )
         },
     ) {
-        Column(
+        PreventAccountLockoutContent(
             modifier = Modifier
                 .fillMaxWidth()
                 .standardHorizontalMargin()
                 .verticalScroll(rememberScrollState()),
-        ) {
-            NeverLoseAccessContent()
-            Spacer(modifier = Modifier.navigationBarsPadding())
-        }
+        )
     }
 }
 
 @Composable
-private fun NeverLoseAccessContent(
-    modifier: Modifier = Modifier,
-) {
-    Column(
-        modifier = modifier
-            .fillMaxWidth()
-            .clip(RoundedCornerShape(size = 4.dp))
-            .background(BitwardenTheme.colorScheme.background.tertiary),
-    ) {
+private fun PreventAccountLockoutContent(modifier: Modifier = Modifier) {
+    Column(modifier = modifier) {
         Spacer(modifier = Modifier.height(24.dp))
         Text(
             text = stringResource(R.string.never_lose_access_to_your_vault),
+            textAlign = TextAlign.Center,
             style = BitwardenTheme.typography.titleMedium,
             color = BitwardenTheme.colorScheme.text.primary,
-            modifier = Modifier.padding(horizontal = 24.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 12.dp),
         )
         Spacer(modifier = Modifier.height(8.dp))
         Text(
             text = stringResource(
                 R.string.the_best_way_to_make_sure_you_can_always_access_your_account,
             ),
+            textAlign = TextAlign.Center,
             style = BitwardenTheme.typography.bodyMedium,
             color = BitwardenTheme.colorScheme.text.primary,
-            modifier = Modifier.padding(horizontal = 24.dp),
+            modifier = Modifier.padding(horizontal = 12.dp),
         )
         Spacer(modifier = Modifier.height(24.dp))
-        BitwardenHorizontalDivider()
-        Spacer(modifier = Modifier.height(16.dp))
-        AccountRecoveryTipRow(
-            title = stringResource(R.string.create_a_hint),
-            description = stringResource(
-                R.string.your_hint_will_be_send_to_you_via_email_when_you_request_it,
+        BitwardenContentCard(
+            contentItems = persistentListOf(
+                ContentBlockData(
+                    headerText = stringResource(R.string.create_a_hint),
+                    subtitleText = stringResource(
+                        R.string.your_hint_will_be_send_to_you_via_email_when_you_request_it,
+                    ),
+                    iconVectorResource = R.drawable.ic_light_bulb,
+                ),
+                ContentBlockData(
+                    headerText = stringResource(R.string.write_your_password_down),
+                    subtitleText = stringResource(R.string.keep_it_secret_keep_it_safe),
+                    iconVectorResource = R.drawable.ic_pencil,
+                ),
             ),
-            icon = rememberVectorPainter(id = R.drawable.ic_light_bulb),
-            modifier = Modifier.padding(horizontal = 16.dp),
         )
-        Spacer(modifier = Modifier.height(16.dp))
-        BitwardenHorizontalDivider()
-        Spacer(modifier = Modifier.height(16.dp))
-        AccountRecoveryTipRow(
-            title = stringResource(R.string.write_your_password_down),
-            description = stringResource(R.string.keep_it_secret_keep_it_safe),
-            icon = rememberVectorPainter(id = R.drawable.ic_pencil),
-            modifier = Modifier.padding(horizontal = 16.dp),
-        )
-        Spacer(modifier = Modifier.height(16.dp))
-    }
-}
-
-@Composable
-private fun AccountRecoveryTipRow(
-    title: String,
-    description: String,
-    icon: Painter,
-    modifier: Modifier = Modifier,
-) {
-    Row(
-        modifier = modifier,
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        Icon(
-            painter = icon,
-            contentDescription = null,
-            tint = BitwardenTheme.colorScheme.icon.primary,
-            modifier = Modifier
-                .size(32.dp)
-                .clearAndSetSemantics { },
-        )
-        Spacer(modifier = Modifier.width(8.dp))
-        Column {
-            Text(
-                text = title,
-                style = BitwardenTheme.typography.titleSmall,
-                color = BitwardenTheme.colorScheme.text.primary,
-            )
-            Spacer(modifier = Modifier.height(4.dp))
-            Text(
-                text = description,
-                style = BitwardenTheme.typography.bodyMedium,
-                color = BitwardenTheme.colorScheme.text.primary,
-            )
-        }
     }
+    Spacer(modifier = Modifier.navigationBarsPadding())
 }
 
 @Preview

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/content/BitwardenContentBlock.kt

@@ -107,7 +107,7 @@ private fun BitwardenContentBlock(
                 ?: Spacer(Modifier.width(16.dp))
         }
 
-        Column {
+        Column(modifier = Modifier.weight(weight = 1f, fill = false)) {
             Spacer(Modifier.height(12.dp))
             Text(
                 text = headerText,
@@ -123,7 +123,7 @@ private fun BitwardenContentBlock(
             }
             Spacer(Modifier.height(12.dp))
         }
-        Spacer(Modifier.width(12.dp))
+        Spacer(Modifier.width(16.dp))
     }
 }