PM-14179: Create and apply card style to UI (#4567)

Author: david-livefront

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupAutofillScreen.kt

@@ -42,6 +42,7 @@ import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenBasicDialog
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenTwoButtonDialog
 import com.x8bit.bitwarden.ui.platform.components.image.BitwardenGifImage
+import com.x8bit.bitwarden.ui.platform.components.model.CardStyle
 import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
 import com.x8bit.bitwarden.ui.platform.components.toggle.BitwardenSwitch
 import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
@@ -167,6 +168,7 @@ private fun SetupAutoFillContent(
             ),
             isChecked = state.autofillEnabled,
             onCheckedChange = onAutofillServiceChanged,
+            cardStyle = CardStyle.Full,
             modifier = Modifier
                 .fillMaxWidth()
                 .standardHorizontalMargin(),

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupUnlockScreen.kt

@@ -46,11 +46,13 @@ import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenBasicDialog
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenLoadingDialog
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenTwoButtonDialog
+import com.x8bit.bitwarden.ui.platform.components.model.CardStyle
 import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
 import com.x8bit.bitwarden.ui.platform.components.toggle.BitwardenUnlockWithBiometricsSwitch
 import com.x8bit.bitwarden.ui.platform.components.toggle.BitwardenUnlockWithPinSwitch
 import com.x8bit.bitwarden.ui.platform.components.util.rememberVectorPainter
 import com.x8bit.bitwarden.ui.platform.composition.LocalBiometricsManager
+import com.x8bit.bitwarden.ui.platform.manager.biometrics.BiometricSupportStatus
 import com.x8bit.bitwarden.ui.platform.manager.biometrics.BiometricsManager
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 import com.x8bit.bitwarden.ui.platform.util.isPortrait
@@ -156,11 +158,13 @@ private fun SetupUnlockScreenContent(
         }
 
         Spacer(modifier = Modifier.height(height = 24.dp))
+        val biometricSupportStatus = biometricsManager.biometricSupportStatus
         BitwardenUnlockWithBiometricsSwitch(
-            biometricSupportStatus = biometricsManager.biometricSupportStatus,
+            biometricSupportStatus = biometricSupportStatus,
             isChecked = state.isUnlockWithBiometricsEnabled || showBiometricsPrompt,
             onDisableBiometrics = handler.onDisableBiometrics,
             onEnableBiometrics = handler.onEnableBiometrics,
+            cardStyle = CardStyle.Top(),
             modifier = Modifier
                 .testTag(tag = "UnlockWithBiometricsSwitch")
                 .fillMaxWidth()
@@ -170,6 +174,11 @@ private fun SetupUnlockScreenContent(
             isUnlockWithPasswordEnabled = state.isUnlockWithPasswordEnabled,
             isUnlockWithPinEnabled = state.isUnlockWithPinEnabled,
             onUnlockWithPinToggleAction = handler.onUnlockWithPinToggle,
+            cardStyle = if (biometricSupportStatus == BiometricSupportStatus.NOT_SUPPORTED) {
+                CardStyle.Full
+            } else {
+                CardStyle.Bottom
+            },
             modifier = Modifier
                 .testTag(tag = "UnlockWithPinSwitch")
                 .fillMaxWidth()

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/completeregistration/CompleteRegistrationScreen.kt

@@ -5,6 +5,7 @@ import android.widget.Toast
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -52,6 +53,7 @@ import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenLoadingDialog
 import com.x8bit.bitwarden.ui.platform.components.dialog.BitwardenTwoButtonDialog
 import com.x8bit.bitwarden.ui.platform.components.field.BitwardenPasswordField
 import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
+import com.x8bit.bitwarden.ui.platform.components.model.CardStyle
 import com.x8bit.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
 import com.x8bit.bitwarden.ui.platform.components.text.BitwardenClickableText
 import com.x8bit.bitwarden.ui.platform.components.toggle.BitwardenSwitch
@@ -162,6 +164,7 @@ fun CompleteRegistrationScreen(
                 .fillMaxSize()
                 .verticalScroll(rememberScrollState()),
         ) {
+            Spacer(modifier = Modifier.height(height = 12.dp))
             CompleteRegistrationContent(
                 passwordInput = state.passwordInput,
                 passwordStrengthState = state.passwordStrengthState,
@@ -175,6 +178,7 @@ fun CompleteRegistrationScreen(
                 showNewOnboardingUi = state.onboardingEnabled,
                 userEmail = state.userEmail,
             )
+            Spacer(modifier = Modifier.height(height = 16.dp))
             Spacer(modifier = Modifier.navigationBarsPadding())
         }
     }
@@ -200,7 +204,6 @@ private fun CompleteRegistrationContent(
         modifier = modifier
             .fillMaxWidth(),
     ) {
-        Spacer(modifier = Modifier.height(8.dp))
         if (showNewOnboardingUi) {
             CompleteRegistrationContentHeader(
                 modifier = Modifier
@@ -242,23 +245,22 @@ private fun CompleteRegistrationContent(
             showPasswordChange = { showPassword = it },
             value = passwordInput,
             onValueChange = handler.onPasswordInputChange,
-            hint = stringResource(id = R.string.master_password_important_hint)
-                .takeIf { !showNewOnboardingUi },
+            showPasswordTestTag = "PasswordVisibilityToggle",
+            imeAction = ImeAction.Next,
+            supportingTextContent = {
+                PasswordStrengthIndicator(
+                    state = passwordStrengthState,
+                    currentCharacterCount = passwordInput.length,
+                    minimumCharacterCount = minimumPasswordLength.takeIf { showNewOnboardingUi },
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            },
+            cardStyle = CardStyle.Top(dividerPadding = 0.dp),
             modifier = Modifier
                 .testTag("MasterPasswordEntry")
                 .fillMaxWidth()
                 .standardHorizontalMargin(),
-            showPasswordTestTag = "PasswordVisibilityToggle",
-            imeAction = ImeAction.Next,
         )
-        Spacer(modifier = Modifier.height(8.dp))
-        PasswordStrengthIndicator(
-            state = passwordStrengthState,
-            currentCharacterCount = passwordInput.length,
-            minimumCharacterCount = minimumPasswordLength.takeIf { showNewOnboardingUi },
-            modifier = Modifier.standardHorizontalMargin(),
-        )
-        Spacer(modifier = Modifier.height(16.dp))
         BitwardenPasswordField(
             label = stringResource(
                 id = R.string.retype_master_password_required
@@ -269,13 +271,13 @@ private fun CompleteRegistrationContent(
             showPassword = showPassword,
             showPasswordChange = { showPassword = it },
             onValueChange = handler.onConfirmPasswordInputChange,
+            showPasswordTestTag = "ConfirmPasswordVisibilityToggle",
+            cardStyle = CardStyle.Middle(dividerPadding = 0.dp),
             modifier = Modifier
                 .testTag("ConfirmMasterPasswordEntry")
                 .fillMaxWidth()
                 .standardHorizontalMargin(),
-            showPasswordTestTag = "ConfirmPasswordVisibilityToggle",
         )
-        Spacer(modifier = Modifier.height(16.dp))
         BitwardenTextField(
             label = stringResource(
                 id = R.string.master_password_hint_not_specified
@@ -284,37 +286,46 @@ private fun CompleteRegistrationContent(
             ),
             value = passwordHintInput,
             onValueChange = handler.onPasswordHintChange,
-            hint = stringResource(
-                id = R.string.bitwarden_cannot_recover_a_lost_or_forgotten_master_password
-                    .takeIf { showNewOnboardingUi }
-                    ?: R.string.master_password_hint_description,
-            ),
+            supportingTextContent = {
+                Text(
+                    text = stringResource(
+                        id = R.string.bitwarden_cannot_recover_a_lost_or_forgotten_master_password
+                            .takeIf { showNewOnboardingUi }
+                            ?: R.string.master_password_hint_description,
+                    ),
+                    style = BitwardenTheme.typography.bodySmall,
+                    color = BitwardenTheme.colorScheme.text.secondary,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+                if (showNewOnboardingUi) {
+                    BitwardenClickableText(
+                        label = stringResource(
+                            id = R.string.learn_about_other_ways_to_prevent_account_lockout,
+                        ),
+                        onClick = handler.onLearnToPreventLockout,
+                        style = BitwardenTheme.typography.labelMedium,
+                        innerPadding = PaddingValues(vertical = 4.dp),
+                    )
+                }
+            },
+            textFieldTestTag = "MasterPasswordHintLabel",
+            cardStyle = CardStyle.Bottom,
             modifier = Modifier
                 .fillMaxWidth()
                 .standardHorizontalMargin(),
-            textFieldTestTag = "MasterPasswordHintLabel",
         )
-        if (showNewOnboardingUi) {
-            BitwardenClickableText(
-                label = stringResource(
-                    id = R.string.learn_about_other_ways_to_prevent_account_lockout,
-                ),
-                onClick = handler.onLearnToPreventLockout,
-                style = BitwardenTheme.typography.labelMedium,
-                modifier = Modifier.standardHorizontalMargin(),
-            )
-        }
-        Spacer(modifier = Modifier.height(24.dp))
+        Spacer(modifier = Modifier.height(height = 8.dp))
         BitwardenSwitch(
             label = stringResource(id = R.string.check_known_data_breaches_for_this_password),
             isChecked = isCheckDataBreachesToggled,
             onCheckedChange = handler.onCheckDataBreachesToggle,
+            cardStyle = CardStyle.Full,
             modifier = Modifier
                 .testTag("CheckExposedMasterPasswordToggle")
                 .standardHorizontalMargin(),
         )
         if (showNewOnboardingUi) {
-            Spacer(modifier = Modifier.height(24.dp))
+            Spacer(modifier = Modifier.height(height = 16.dp))
             BitwardenFilledButton(
                 label = callToActionText,
                 isEnabled = nextButtonEnabled,

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/completeregistration/PasswordStrengthIndicator.kt

@@ -20,6 +20,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.graphics.graphicsLayer
@@ -37,9 +38,9 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 @Suppress("LongMethod", "CyclomaticComplexMethod", "MagicNumber")
 @Composable
 fun PasswordStrengthIndicator(
-    modifier: Modifier = Modifier,
     state: PasswordStrengthState,
     currentCharacterCount: Int,
+    modifier: Modifier = Modifier,
     minimumCharacterCount: Int? = null,
 ) {
     val minimumRequirementMet = (minimumCharacterCount == null) ||
@@ -86,6 +87,7 @@ fun PasswordStrengthIndicator(
             Modifier
                 .fillMaxWidth()
                 .height(4.dp)
+                .clip(shape = BitwardenTheme.shapes.progressIndicator)
                 .background(BitwardenTheme.colorScheme.sliderButton.unfilled),
         ) {
             Box(