PM-17384 PM-17386 - Create Account Design Audit (#4647)

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreen.kt

@@ -185,7 +185,6 @@ fun LandingScreen(
             onCreateAccountClick = remember(viewModel) {
                 { viewModel.trySendAction(LandingAction.CreateAccountClick) }
             },
-            modifier = Modifier.fillMaxSize(),
         )
     }
 }
@@ -204,6 +203,7 @@ private fun LandingScreenContent(
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         modifier = modifier
+            .fillMaxSize()
             .imePadding()
             .verticalScroll(rememberScrollState())
             .statusBarsPadding(),

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/startregistration/StartRegistrationScreen.kt

@@ -13,7 +13,6 @@ import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -25,6 +24,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
@@ -157,30 +157,21 @@ fun StartRegistrationScreen(
             BitwardenTopAppBar(
                 title = stringResource(id = R.string.create_account),
                 scrollBehavior = scrollBehavior,
-                navigationIcon = rememberVectorPainter(id = R.drawable.ic_back),
-                navigationIconContentDescription = stringResource(id = R.string.back),
-                onNavigationIconClick = handler.onBackClick,
+                navigationIcon = rememberVectorPainter(id = R.drawable.ic_close),
+                navigationIconContentDescription = stringResource(id = R.string.close),
+                onNavigationIconClick = handler.onCloseClick,
             )
         },
     ) {
-        Column(
-            modifier = Modifier
-                .imePadding()
-                .fillMaxSize()
-                .verticalScroll(rememberScrollState()),
-        ) {
-            StartRegistrationContent(
-                emailInput = state.emailInput,
-                selectedEnvironmentType = state.selectedEnvironmentType,
-                nameInput = state.nameInput,
-                isReceiveMarketingEmailsToggled = state.isReceiveMarketingEmailsToggled,
-                isContinueButtonEnabled = state.isContinueButtonEnabled,
-                isNewOnboardingUiEnabled = state.showNewOnboardingUi,
-                handler = handler,
-            )
-            Spacer(modifier = Modifier.height(height = 16.dp))
-            Spacer(modifier = Modifier.navigationBarsPadding())
-        }
+        StartRegistrationContent(
+            emailInput = state.emailInput,
+            selectedEnvironmentType = state.selectedEnvironmentType,
+            nameInput = state.nameInput,
+            isReceiveMarketingEmailsToggled = state.isReceiveMarketingEmailsToggled,
+            isContinueButtonEnabled = state.isContinueButtonEnabled,
+            isNewOnboardingUiEnabled = state.showNewOnboardingUi,
+            handler = handler,
+        )
     }
 }
 
@@ -196,31 +187,31 @@ private fun StartRegistrationContent(
     isNewOnboardingUiEnabled: Boolean,
     modifier: Modifier = Modifier,
 ) {
-    Column(modifier = modifier) {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = modifier
+            .fillMaxSize()
+            .imePadding()
+            .verticalScroll(rememberScrollState()),
+    ) {
         Spacer(modifier = Modifier.height(height = 12.dp))
+
         if (isNewOnboardingUiEnabled) {
+            Spacer(modifier = Modifier.weight(1f))
             Image(
-                painter = rememberVectorPainter(id = R.drawable.vault),
+                painter = rememberVectorPainter(id = R.drawable.bitwarden_logo),
+                colorFilter = ColorFilter.tint(BitwardenTheme.colorScheme.icon.secondary),
                 contentDescription = null,
                 modifier = Modifier
-                    .size(132.dp)
-                    .align(Alignment.CenterHorizontally),
+                    .standardHorizontalMargin()
+                    .fillMaxWidth(),
             )
-            Spacer(modifier = Modifier.height(48.dp))
+            Spacer(modifier = Modifier.weight(1f))
         }
+        Spacer(modifier = Modifier.height(12.dp))
+
         BitwardenTextField(
-            label = stringResource(id = R.string.name),
-            value = nameInput,
-            onValueChange = handler.onNameInputChange,
-            textFieldTestTag = "NameEntry",
-            cardStyle = CardStyle.Top(dividerPadding = 0.dp),
-            modifier = Modifier
-                .fillMaxWidth()
-                .standardHorizontalMargin(),
-        )
-        BitwardenTextField(
-            label = stringResource(id = R.string.email_address),
-            placeholder = stringResource(R.string.email_address_required),
+            label = stringResource(id = R.string.email_address_required),
             value = emailInput,
             onValueChange = handler.onEmailInputChange,
             keyboardType = KeyboardType.Email,
@@ -252,14 +243,27 @@ private fun StartRegistrationContent(
                     }
                 }
             },
-            cardStyle = CardStyle.Bottom,
+            cardStyle = CardStyle.Full,
+            modifier = Modifier
+                .fillMaxWidth()
+                .standardHorizontalMargin(),
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        BitwardenTextField(
+            label = stringResource(id = R.string.name),
+            value = nameInput,
+            onValueChange = handler.onNameInputChange,
+            textFieldTestTag = "NameEntry",
+            cardStyle = CardStyle.Full,
             modifier = Modifier
                 .fillMaxWidth()
                 .standardHorizontalMargin(),
         )
-        Spacer(modifier = Modifier.height(24.dp))
 
         if (selectedEnvironmentType != Environment.Type.SELF_HOSTED) {
+            Spacer(modifier = Modifier.height(8.dp))
             ReceiveMarketingEmailsSwitch(
                 isChecked = isReceiveMarketingEmailsToggled,
                 onCheckedChange = handler.onReceiveMarketingEmailsToggle,
@@ -268,9 +272,10 @@ private fun StartRegistrationContent(
                     .fillMaxWidth()
                     .standardHorizontalMargin(),
             )
-            Spacer(modifier = Modifier.height(24.dp))
         }
 
+        Spacer(modifier = Modifier.height(24.dp))
+
         BitwardenFilledButton(
             label = stringResource(id = R.string.continue_text),
             onClick = handler.onContinueClick,
@@ -280,13 +285,17 @@ private fun StartRegistrationContent(
                 .standardHorizontalMargin()
                 .fillMaxWidth(),
         )
-        Spacer(modifier = Modifier.height(16.dp))
+
+        Spacer(modifier = Modifier.height(12.dp))
+
         TermsAndPrivacyText(
             onTermsClick = handler.onTermsClick,
             onPrivacyPolicyClick = handler.onPrivacyPolicyClick,
             modifier = Modifier.standardHorizontalMargin(),
         )
-        Spacer(modifier = Modifier.height(4.dp))
+
+        Spacer(modifier = Modifier.height(12.dp))
+        Spacer(modifier = Modifier.navigationBarsPadding())
     }
 }
 
@@ -395,7 +404,7 @@ private fun StartRegistrationContentFilledOut_preview() {
                 onReceiveMarketingEmailsToggle = {},
                 onUnsubscribeMarketingEmailsClick = {},
                 onServerGeologyHelpClick = {},
-                onBackClick = {},
+                onCloseClick = {},
             ),
         )
     }
@@ -422,7 +431,7 @@ private fun StartRegistrationContentEmpty_preview() {
                 onReceiveMarketingEmailsToggle = {},
                 onUnsubscribeMarketingEmailsClick = {},
                 onServerGeologyHelpClick = {},
-                onBackClick = {},
+                onCloseClick = {},
             ),
         )
     }
@@ -449,7 +458,7 @@ private fun StartRegistrationContentNewOnboardingUi_preview() {
                 onReceiveMarketingEmailsToggle = {},
                 onUnsubscribeMarketingEmailsClick = {},
                 onServerGeologyHelpClick = {},
-                onBackClick = {},
+                onCloseClick = {},
             ),
         )
     }

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/startregistration/StartRegistrationViewModel.kt

@@ -12,7 +12,7 @@ import com.x8bit.bitwarden.data.platform.manager.model.FlagKey
 import com.x8bit.bitwarden.data.platform.repository.EnvironmentRepository
 import com.x8bit.bitwarden.data.platform.repository.model.Environment
 import com.x8bit.bitwarden.data.platform.repository.model.Environment.Type
-import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.BackClick
+import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.CloseClick
 import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.ContinueClick
 import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.EmailInputChange
 import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.EnvironmentTypeSelect
@@ -94,7 +94,7 @@ class StartRegistrationViewModel @Inject constructor(
             is ContinueClick -> handleContinueClick()
             is EmailInputChange -> handleEmailInputChanged(action)
             is NameInputChange -> handleNameInputChanged(action)
-            is BackClick -> handleBackClick()
+            is CloseClick -> handleCloseClick()
             is ErrorDialogDismiss -> handleDialogDismiss()
             is ReceiveMarketingEmailsToggle -> handleReceiveMarketingEmailsToggle(
                 action,
@@ -173,7 +173,7 @@ class StartRegistrationViewModel @Inject constructor(
         }
     }
 
-    private fun handleBackClick() {
+    private fun handleCloseClick() {
         sendEvent(StartRegistrationEvent.NavigateBack)
     }
 
@@ -383,9 +383,9 @@ sealed class StartRegistrationAction {
     data object ContinueClick : StartRegistrationAction()
 
     /**
-     * User clicked back.
+     * Indicates that the top-bar close button was clicked.
      */
-    data object BackClick : StartRegistrationAction()
+    data object CloseClick : StartRegistrationAction()
 
     /**
      * Email input changed.

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/startregistration/handlers/StartRegistrationHandler.kt

@@ -20,7 +20,7 @@ data class StartRegistrationHandler(
     val onReceiveMarketingEmailsToggle: (Boolean) -> Unit,
     val onUnsubscribeMarketingEmailsClick: () -> Unit,
     val onServerGeologyHelpClick: () -> Unit,
-    val onBackClick: () -> Unit,
+    val onCloseClick: () -> Unit,
 ) {
     @Suppress("UndocumentedPublicClass")
     companion object {
@@ -71,7 +71,9 @@ data class StartRegistrationHandler(
                 onServerGeologyHelpClick = {
                     viewModel.trySendAction(StartRegistrationAction.ServerGeologyHelpClick)
                 },
-                onBackClick = { viewModel.trySendAction(StartRegistrationAction.BackClick) },
+                onCloseClick = {
+                    viewModel.trySendAction(StartRegistrationAction.CloseClick)
+                },
             )
         }
     }

app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/startregistration/StartRegistrationScreenTest.kt

@@ -14,7 +14,7 @@ import androidx.compose.ui.test.performTextInput
 import androidx.core.net.toUri
 import com.x8bit.bitwarden.data.platform.repository.model.Environment
 import com.x8bit.bitwarden.data.platform.repository.util.bufferedMutableSharedFlow
-import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.BackClick
+import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.CloseClick
 import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.EmailInputChange
 import com.x8bit.bitwarden.ui.platform.base.BaseComposeTest
 import com.x8bit.bitwarden.ui.platform.base.util.asText
@@ -69,9 +69,9 @@ class StartRegistrationScreenTest : BaseComposeTest() {
     }
 
     @Test
-    fun `close click should send BackClick action`() {
-        composeTestRule.onNodeWithContentDescription("Back").performClick()
-        verify { viewModel.trySendAction(BackClick) }
+    fun `close click should send CloseClick action`() {
+        composeTestRule.onNodeWithContentDescription("Close").performClick()
+        verify { viewModel.trySendAction(CloseClick) }
     }
 
     @Test
@@ -133,7 +133,7 @@ class StartRegistrationScreenTest : BaseComposeTest() {
 
     @Test
     fun `email input change should send EmailInputChange action`() {
-        composeTestRule.onNodeWithText("Email address").performTextInput(TEST_INPUT)
+        composeTestRule.onNodeWithText("Email address (required)").performTextInput(TEST_INPUT)
         verify { viewModel.trySendAction(EmailInputChange(TEST_INPUT)) }
     }
 

app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/startregistration/StartRegistrationViewModelTest.kt

@@ -11,7 +11,7 @@ import com.x8bit.bitwarden.data.platform.manager.FeatureFlagManager
 import com.x8bit.bitwarden.data.platform.manager.model.FlagKey
 import com.x8bit.bitwarden.data.platform.repository.model.Environment
 import com.x8bit.bitwarden.data.platform.repository.util.FakeEnvironmentRepository
-import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.BackClick
+import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.CloseClick
 import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.ContinueClick
 import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.EmailInputChange
 import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.EnvironmentTypeSelect
@@ -308,7 +308,7 @@ class StartRegistrationViewModelTest : BaseViewModelTest() {
             featureFlagManager = featureFlagManager,
         )
         viewModel.eventFlow.test {
-            viewModel.trySendAction(BackClick)
+            viewModel.trySendAction(CloseClick)
             assertEquals(NavigateBack, awaitItem())
         }
     }