From b84d39320813fff04e576f2ac3a29beacb4274e3 Mon Sep 17 00:00:00 2001 From: Phil Cappelli <150719757+phil-livefront@users.noreply.github.com> Date: Fri, 24 Jan 2025 16:02:21 -0500 Subject: [PATCH] [PM-17374] [PM-17375] [PM-17379] - `LandingScreen` Design Audit (#4611) --- .../ui/auth/feature/landing/LandingScreen.kt | 36 +++++++-------- .../auth/feature/landing/LandingViewModel.kt | 6 +++ app/src/main/res/drawable/bitwarden_logo.xml | 44 +++++++++++++++++++ app/src/main/res/drawable/logo.xml | 44 ------------------- app/src/main/res/values/strings.xml | 5 ++- .../auth/feature/landing/LandingScreenTest.kt | 2 +- 6 files changed, 69 insertions(+), 68 deletions(-) create mode 100644 app/src/main/res/drawable/bitwarden_logo.xml delete mode 100644 app/src/main/res/drawable/logo.xml diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreen.kt b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreen.kt index 15e07035ac..a9570b9615 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreen.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreen.kt @@ -10,7 +10,7 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.layout.navigationBarsPadding -import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.statusBarsPadding import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll @@ -121,18 +121,18 @@ fun LandingScreen( null -> Unit } - val isAppBarVisible = state.accountSummaries.isNotEmpty() var isAccountMenuVisible by rememberSaveable { mutableStateOf(false) } val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior( state = rememberTopAppBarState(), canScroll = { !isAccountMenuVisible }, ) + BitwardenScaffold( modifier = Modifier .fillMaxSize() .nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { - if (isAppBarVisible) { + if (state.isAppBarVisible) { BitwardenTopAppBar( title = "", scrollBehavior = scrollBehavior, @@ -170,7 +170,6 @@ fun LandingScreen( ) { LandingScreenContent( state = state, - isAppBarVisible = isAppBarVisible, onEmailInputChange = remember(viewModel) { { viewModel.trySendAction(LandingAction.EmailInputChanged(it)) } }, @@ -195,7 +194,6 @@ fun LandingScreen( @Composable private fun LandingScreenContent( state: LandingState, - isAppBarVisible: Boolean, onEmailInputChange: (String) -> Unit, onEnvironmentTypeSelect: (Environment.Type) -> Unit, onRememberMeToggle: (Boolean) -> Unit, @@ -207,28 +205,26 @@ private fun LandingScreenContent( horizontalAlignment = Alignment.CenterHorizontally, modifier = modifier .imePadding() - .verticalScroll(rememberScrollState()), + .verticalScroll(rememberScrollState()) + .statusBarsPadding(), ) { - val topPadding = if (isAppBarVisible) 40.dp else 104.dp - Spacer(modifier = Modifier.height(topPadding)) + Spacer(modifier = Modifier.height(height = 12.dp)) + Spacer(modifier = Modifier.weight(1f)) Image( - painter = rememberVectorPainter(id = R.drawable.logo), + painter = rememberVectorPainter(id = R.drawable.bitwarden_logo), colorFilter = ColorFilter.tint(BitwardenTheme.colorScheme.icon.secondary), contentDescription = null, modifier = Modifier .standardHorizontalMargin() - .width(220.dp) - .height(74.dp) .fillMaxWidth(), ) - Spacer(modifier = Modifier.height(16.dp)) - Spacer(modifier = Modifier.weight(1f)) + Spacer(modifier = Modifier.height(height = 12.dp)) Text( - text = stringResource(id = R.string.login_or_create_new_account), + text = stringResource(id = R.string.login_to_bitwarden), textAlign = TextAlign.Center, style = BitwardenTheme.typography.headlineSmall, color = BitwardenTheme.colorScheme.text.primary, @@ -237,9 +233,7 @@ private fun LandingScreenContent( .wrapContentHeight(), ) - Spacer(modifier = Modifier.weight(1f)) - - Spacer(modifier = Modifier.height(40.dp)) + Spacer(modifier = Modifier.height(height = 24.dp)) BitwardenTextField( modifier = Modifier @@ -299,20 +293,20 @@ private fun LandingScreenContent( .wrapContentHeight(), ) { Text( - text = stringResource(id = R.string.new_around_here), + text = stringResource(id = R.string.new_to_bitwarden), style = BitwardenTheme.typography.bodyMedium, - color = BitwardenTheme.colorScheme.text.primary, + color = BitwardenTheme.colorScheme.text.secondary, ) BitwardenTextButton( - label = stringResource(id = R.string.create_account), + label = stringResource(id = R.string.create_an_account), onClick = onCreateAccountClick, modifier = Modifier .testTag("CreateAccountLabel"), ) } - Spacer(modifier = Modifier.height(height = 16.dp)) + Spacer(modifier = Modifier.height(height = 12.dp)) Spacer(modifier = Modifier.navigationBarsPadding()) } } diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingViewModel.kt b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingViewModel.kt index 2a8a9e099e..1499f1e218 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingViewModel.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingViewModel.kt @@ -267,6 +267,12 @@ data class LandingState( val dialog: DialogState?, val accountSummaries: List, ) : Parcelable { + /** + * Determines whether the app bar should be visible based on the presence of account summaries. + */ + val isAppBarVisible: Boolean + get() = accountSummaries.isNotEmpty() + /** * Represents the current state of any dialogs on screen. */ diff --git a/app/src/main/res/drawable/bitwarden_logo.xml b/app/src/main/res/drawable/bitwarden_logo.xml new file mode 100644 index 0000000000..bda4b67b02 --- /dev/null +++ b/app/src/main/res/drawable/bitwarden_logo.xml @@ -0,0 +1,44 @@ + + + + + + + + + + + + + diff --git a/app/src/main/res/drawable/logo.xml b/app/src/main/res/drawable/logo.xml deleted file mode 100644 index 835d4e5b31..0000000000 --- a/app/src/main/res/drawable/logo.xml +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - - diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index f4f4cc745e..ef6ddd91e9 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -103,6 +103,7 @@ Close Continue Create account + Create an account Creating account... Edit item Allow automatic syncing @@ -136,7 +137,7 @@ Vault timeout action Logging out will remove all access to your vault and requires online authentication after the timeout period. Are you sure you want to use this setting? Logging in... - Log in or create a new account to access your secure vault. + Log in to Bitwarden Manage Password confirmation is not correct. The master password is the password you use to access your vault. It is very important that you do not forget your master password. There is no way to recover the password in the event that you forget it. @@ -752,7 +753,7 @@ select Add TOTP to store the key safely Login attempt from: %1$s Do you want to switch to this account? - New around here? + New to Bitwarden? Get master password hint Logging in as %1$s on %2$s Not you? diff --git a/app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreenTest.kt b/app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreenTest.kt index badeb8b8fb..19ce772706 100644 --- a/app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreenTest.kt +++ b/app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreenTest.kt @@ -264,7 +264,7 @@ class LandingScreenTest : BaseComposeTest() { @Test fun `create account click should send CreateAccountClick action`() { - composeTestRule.onNodeWithText("Create account").performScrollTo().performClick() + composeTestRule.onNodeWithText("Create an account").performScrollTo().performClick() verify { viewModel.trySendAction(LandingAction.CreateAccountClick) }