PM-10628: Update Pin Input Dialog UI (#4013)

app/src/main/java/com/x8bit/bitwarden/ui/platform/feature/settings/accountsecurity/PinInputDialog.kt

@@ -1,9 +1,9 @@
 package com.x8bit.bitwarden.ui.platform.feature.settings.accountsecurity
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -33,6 +33,7 @@ import androidx.compose.ui.window.Dialog
 import com.x8bit.bitwarden.R
 import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledButton
 import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton
+import com.x8bit.bitwarden.ui.platform.components.divider.BitwardenHorizontalDivider
 import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
 import com.x8bit.bitwarden.ui.platform.components.util.maxDialogHeight
 import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@@ -52,7 +53,7 @@ fun PinInputDialog(
     onSubmitClick: (String) -> Unit,
     onDismissRequest: () -> Unit,
 ) {
-    var pin by remember { mutableStateOf("") }
+    var pin by remember { mutableStateOf(value = "") }
     Dialog(
         onDismissRequest = onDismissRequest,
     ) {
@@ -74,38 +75,35 @@ fun PinInputDialog(
                 ),
             horizontalAlignment = Alignment.End,
         ) {
+            Spacer(modifier = Modifier.height(height = 24.dp))
             Text(
                 modifier = Modifier
-                    .testTag("AlertTitleText")
-                    .padding(24.dp)
+                    .testTag(tag = "AlertTitleText")
+                    .padding(horizontal = 24.dp)
                     .fillMaxWidth(),
                 text = stringResource(id = R.string.enter_pin),
                 color = MaterialTheme.colorScheme.onSurface,
                 style = BitwardenTheme.typography.headlineSmall,
             )
+            Spacer(modifier = Modifier.height(height = 16.dp))
             if (scrollState.canScrollBackward) {
-                Box(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .height(1.dp)
-                        .background(MaterialTheme.colorScheme.outlineVariant),
-                )
+                BitwardenHorizontalDivider()
             }
             Column(
                 modifier = Modifier
                     .weight(1f, fill = false)
-                    .verticalScroll(scrollState),
+                    .padding(horizontal = 24.dp)
+                    .verticalScroll(state = scrollState),
             ) {
                 Text(
                     modifier = Modifier
-                        .testTag("AlertContentText")
-                        .padding(24.dp)
+                        .testTag(tag = "AlertContentText")
                         .fillMaxWidth(),
                     text = stringResource(id = R.string.set_pin_description),
                     color = MaterialTheme.colorScheme.onSurfaceVariant,
                     style = BitwardenTheme.typography.bodyMedium,
                 )
-
+                Spacer(modifier = Modifier.height(height = 16.dp))
                 BitwardenTextField(
                     label = stringResource(id = R.string.pin),
                     value = pin,
@@ -113,35 +111,32 @@ fun PinInputDialog(
                     onValueChange = { pin = it },
                     keyboardType = KeyboardType.Number,
                     modifier = Modifier
-                        .testTag("AlertInputField")
-                        .padding(16.dp)
+                        .testTag(tag = "AlertInputField")
                         .fillMaxWidth(),
                 )
+                Spacer(modifier = Modifier.height(height = 16.dp))
             }
             if (scrollState.canScrollForward) {
-                Box(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .height(1.dp)
-                        .background(MaterialTheme.colorScheme.outlineVariant),
-                )
+                BitwardenHorizontalDivider()
             }
+            Spacer(modifier = Modifier.height(height = 16.dp))
             Row(
+                modifier = Modifier.padding(horizontal = 24.dp),
                 verticalAlignment = Alignment.CenterVertically,
-                modifier = Modifier.padding(24.dp),
             ) {
                 BitwardenTextButton(
                     label = stringResource(id = R.string.cancel),
                     onClick = onCancelClick,
-                    modifier = Modifier.testTag("DismissAlertButton"),
+                    modifier = Modifier.testTag(tag = "DismissAlertButton"),
                 )
 
                 BitwardenFilledButton(
                     label = stringResource(id = R.string.submit),
                     onClick = { onSubmitClick(pin) },
-                    modifier = Modifier.testTag("AcceptAlertButton"),
+                    modifier = Modifier.testTag(tag = "AcceptAlertButton"),
                 )
             }
+            Spacer(modifier = Modifier.height(height = 24.dp))
         }
     }
 }

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

@@ -21,7 +21,7 @@
   <string name="email_address">Email address</string>
   <string name="email_us">Email us</string>
   <string name="email_us_description">Email us directly to get help or leave feedback.</string>
-  <string name="enter_pin">Enter your PIN code.</string>
+  <string name="enter_pin">Enter your PIN code</string>
   <string name="favorites">Favorites</string>
   <string name="file_bug_report">File a bug report</string>
   <string name="file_bug_report_description">Open an issue at our GitHub repository.</string>

app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupUnlockScreenTest.kt

@@ -244,7 +244,7 @@ class SetupUnlockScreenTest : BaseComposeTest() {
             .performClick()
 
         composeTestRule
-            .onAllNodesWithText(text = "Enter your PIN code.")
+            .onAllNodesWithText(text = "Enter your PIN code")
             .filterToOne(hasAnyAncestor(isDialog()))
             .assertIsDisplayed()
         composeTestRule

app/src/test/java/com/x8bit/bitwarden/ui/platform/feature/settings/accountsecurity/AccountSecurityScreenTest.kt

@@ -270,7 +270,7 @@ class AccountSecurityScreenTest : BaseComposeTest() {
             .performClick()
 
         composeTestRule
-            .onAllNodesWithText("Enter your PIN code.")
+            .onAllNodesWithText("Enter your PIN code")
             .filterToOne(hasAnyAncestor(isDialog()))
             .assertIsDisplayed()
         composeTestRule

app/src/test/java/com/x8bit/bitwarden/ui/vault/feature/addedit/VaultAddEditScreenTest.kt

@@ -360,7 +360,7 @@ class VaultAddEditScreenTest : BaseComposeTest() {
 
     @Test
     fun `fido2 pin set up prompt dialog should display based on state`() {
-        val dialogMessage = "Enter your PIN code."
+        val dialogMessage = "Enter your PIN code"
         composeTestRule.onNode(isDialog()).assertDoesNotExist()
         composeTestRule.onNodeWithText(dialogMessage).assertDoesNotExist()
 

app/src/test/java/com/x8bit/bitwarden/ui/vault/feature/itemlisting/VaultItemListingScreenTest.kt

@@ -1678,7 +1678,7 @@ class VaultItemListingScreenTest : BaseComposeTest() {
     @Test
     fun `fido2 pin set up dialog should display and function according to state`() {
         val selectedCipherId = "selectedCipherId"
-        val dialogMessage = "Enter your PIN code."
+        val dialogMessage = "Enter your PIN code"
         composeTestRule.onNode(isDialog()).assertDoesNotExist()
         composeTestRule.onNodeWithText(dialogMessage).assertDoesNotExist()