Skip to content

Commit

Permalink
[PM-17374] [PM-17375] [PM-17379] - LandingScreen Design Audit (#4611)
Browse files Browse the repository at this point in the history
  • Loading branch information
@phil-livefront
phil-livefront authored Jan 24, 2025
1 parent 464f8de commit b84d393
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 68 deletions.
36 changes: 15 additions & 21 deletions app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -170,7 +170,6 @@ fun LandingScreen(
) {
LandingScreenContent(
state = state,
isAppBarVisible = isAppBarVisible,
onEmailInputChange = remember(viewModel) {
{ viewModel.trySendAction(LandingAction.EmailInputChanged(it)) }
},
Expand All @@ -195,7 +194,6 @@ fun LandingScreen(
@Composable
private fun LandingScreenContent(
state: LandingState,
isAppBarVisible: Boolean,
onEmailInputChange: (String) -> Unit,
onEnvironmentTypeSelect: (Environment.Type) -> Unit,
onRememberMeToggle: (Boolean) -> Unit,
Expand All @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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())
}
}
6 changes: 6 additions & 0 deletions app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/landing/LandingViewModel.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,12 @@ data class LandingState(
val dialog: DialogState?,
val accountSummaries: List<AccountSummary>,
) : 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.
*/
Expand Down
44 changes: 44 additions & 0 deletions app/src/main/res/drawable/bitwarden_logo.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="218dp"
android:height="34dp"
android:viewportWidth="218"
android:viewportHeight="34">
<path
android:pathData="M58.34,11C56.91,9.04 54.97,8.09 52.47,8.09C49.85,8.09 47.83,9.16 46.52,11.2H46.28C46.44,9.31 46.52,7.94 46.52,7.07V1.02C46.52,0.63 46.2,0.31 45.8,0.31H41.52C41.12,0.31 40.8,0.63 40.8,1.02V28.64C40.8,29.04 41.12,29.35 41.52,29.35H44.69C44.97,29.35 45.25,29.19 45.37,28.92L46.12,27.07H46.52C47.95,28.88 49.85,29.74 52.35,29.74C54.85,29.74 56.83,28.84 58.3,26.92C59.77,25.03 60.48,22.36 60.48,18.9C60.48,15.56 59.77,12.93 58.34,11ZM47.51,13.99C48.18,13.12 49.26,12.69 50.64,12.69C51.83,12.69 52.83,13.2 53.54,14.22C54.22,15.25 54.57,16.78 54.57,18.82C54.57,20.82 54.22,22.44 53.54,23.5C52.87,24.6 51.87,25.15 50.72,25.15C49.26,25.15 48.18,24.64 47.51,23.69C46.84,22.75 46.52,21.14 46.52,18.9V18.27C46.52,16.31 46.88,14.85 47.51,13.99Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
<path
android:pathData="M65.64,29.39H69.93C70.32,29.39 70.68,29 70.64,28.64V9.23C70.64,8.84 70.32,8.53 69.93,8.53H65.64C65.25,8.53 64.93,8.84 64.93,9.23V28.68C64.93,29.08 65.25,29.39 65.64,29.39Z"
android:fillColor="#175DDC"/>
<path
android:pathData="M88.61,24.71C87.42,25.03 86.43,25.19 85.6,25.19C84.89,25.19 84.25,24.99 83.85,24.56C83.42,24.2 83.18,23.58 83.18,22.79V12.81H88.57C88.85,12.81 89.05,12.61 89.05,12.34V8.8C89.05,8.68 88.93,8.57 88.81,8.57H83.14V4.6C83.14,4.32 82.94,4.13 82.66,4.13H79.81C79.61,4.13 79.45,4.24 79.37,4.44L77.82,8.53L74.69,10.37C74.69,10.39 74.68,10.41 74.67,10.43C74.66,10.45 74.65,10.47 74.65,10.49V12.34C74.65,12.61 74.85,12.81 75.12,12.81H77.39V22.83C77.39,25.11 77.94,26.84 78.97,27.98C80,29.15 81.67,29.7 83.97,29.7C85.88,29.7 87.58,29.43 88.93,28.88C89.09,28.8 89.21,28.64 89.21,28.45V25.19C89.21,24.87 88.93,24.64 88.61,24.71Z"
android:fillColor="#175DDC"/>
<path
android:pathData="M111.07,28.53C111.31,29.04 111.75,29.39 112.3,29.39H112.46C113.06,29.39 113.53,29.04 113.69,28.49L118.69,10.22C118.85,9.63 118.41,9.08 117.82,9.08C117.42,9.08 117.06,9.35 116.94,9.74L113.97,20.71C113.06,24.24 112.58,26.44 112.46,27.23H112.34C112.14,26.25 111.59,24.36 110.68,21.41L106.94,9.86C106.79,9.39 106.35,9.08 105.83,9.08C105.28,9.08 104.84,9.39 104.68,9.86L100.68,21.49C100.32,22.48 99.76,24.4 99.05,27.31H98.93C98.69,25.89 98.18,23.77 97.42,20.86L94.33,9.74C94.21,9.35 93.85,9.08 93.46,9.08H93.34C92.7,9.08 92.26,9.67 92.42,10.22L97.7,28.49C97.86,29.04 98.34,29.39 98.89,29.39C99.45,29.39 99.92,29.08 100.08,28.57L104.41,15.87L105.24,13.2L105.64,11.79H105.75C105.86,12.19 105.97,12.58 106.07,12.94C106.39,14.16 106.65,15.14 106.87,15.83L111.07,28.53Z"
android:fillColor="#175DDC"/>
<path
android:pathData="M135.15,28.76C135.2,29.12 135.51,29.39 135.87,29.39C136.27,29.39 136.62,29 136.66,28.76V15.99C136.66,13.6 136.11,11.75 135,10.61C133.85,9.43 132.18,8.84 129.92,8.84C127.93,8.84 125.99,9.27 124.01,10.06C123.57,10.22 123.37,10.73 123.57,11.16C123.77,11.59 124.28,11.79 124.72,11.59C126.47,10.77 128.13,10.37 129.8,10.37C131.54,10.37 132.77,10.84 133.61,11.83C134.44,12.81 134.84,14.22 134.84,16.19V17.52L130.95,17.64C127.74,17.64 125.36,18.31 123.65,19.41C121.98,20.55 121.11,22.51 121.27,24.56C121.35,26.09 121.9,27.31 122.89,28.21C124.01,29.23 125.55,29.74 127.58,29.74C129.04,29.74 130.35,29.51 131.43,28.96C132.54,28.41 133.57,27.47 134.6,26.17H134.8L135.15,28.76ZM132.81,26.21C131.58,27.43 129.88,28.05 127.66,28.05C126.23,28.05 125.12,27.7 124.24,27.11C123.49,26.4 123.09,25.38 123.09,24.13C123.09,22.55 123.73,21.34 124.96,20.59C126.23,19.84 128.25,19.37 131.15,19.25L134.72,19.1V21.06C134.72,23.22 134.08,24.99 132.81,26.21Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
<path
android:pathData="M153.01,8.8C152.34,8.72 151.74,8.68 151.15,8.68C149.8,8.68 148.65,9 147.73,9.63C146.78,10.22 145.87,11.28 145.04,12.77H144.92L144.76,9.86C144.76,9.43 144.4,9.12 143.96,9.12C143.53,9.12 143.17,9.47 143.17,9.9V28.37C143.17,28.88 143.57,29.27 144.08,29.27C144.6,29.27 144.99,28.88 144.99,28.37V18.07C144.99,15.87 145.55,13.99 146.66,12.53C147.77,11.08 149.2,10.33 150.95,10.33C151.54,10.33 152.14,10.41 152.73,10.49C153.21,10.57 153.68,10.29 153.76,9.82C153.84,9.35 153.53,8.88 153.01,8.8Z"
android:fillColor="#175DDC"/>
<path
android:pathData="M168.96,9.47C167.89,8.96 166.58,8.68 165.11,8.68C162.25,8.68 160.11,9.63 158.6,11.32C157.1,13.2 156.38,15.87 156.38,19.37C156.38,22.71 157.18,25.23 158.64,26.99C160.19,28.76 162.29,29.63 165.15,29.63C168.05,29.63 170.31,28.49 171.86,26.17H172.01L172.41,28.72C172.45,29.08 172.73,29.31 173.05,29.31C173.4,29.31 173.68,29.04 173.68,28.68V1.22C173.68,0.71 173.29,0.31 172.77,0.31C172.25,0.31 171.86,0.71 171.86,1.22V7.62C171.86,9.12 171.9,10.61 171.98,12.22H171.86C171.02,10.92 170.07,9.98 168.96,9.47ZM160.03,12.73C161.18,11.16 162.85,10.37 165.11,10.37C167.49,10.37 169.2,11.04 170.23,12.46C171.34,13.79 171.86,16.03 171.86,19.17V19.49C171.86,22.55 171.34,24.75 170.23,26.09C169.16,27.43 167.49,28.09 165.15,28.09C160.63,28.09 158.37,25.23 158.37,19.49C158.37,16.5 158.92,14.26 160.03,12.73Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
<path
android:pathData="M181.89,26.99C183.6,28.84 185.9,29.74 188.88,29.74C190.07,29.74 191.14,29.67 192.13,29.39C192.96,29.23 193.88,29 194.83,28.6C195.15,28.49 195.35,28.17 195.35,27.86C195.35,27.31 194.79,26.92 194.27,27.11C193.36,27.43 192.61,27.62 191.97,27.74C191.1,27.9 190.03,27.98 188.88,27.98C186.46,27.98 184.63,27.31 183.32,25.82C182.01,24.32 181.38,22.2 181.34,19.41H196.1V17.92C196.1,15.05 195.42,12.77 194,11.12C192.65,9.47 190.7,8.64 188.32,8.64C185.58,8.64 183.44,9.63 181.82,11.59C180.19,13.52 179.4,16.11 179.4,19.37C179.4,22.63 180.23,25.19 181.89,26.99ZM183.56,12.26C184.75,10.96 186.34,10.33 188.32,10.33C190.15,10.33 191.57,11 192.61,12.3C193.64,13.6 194.15,15.48 194.15,17.8H181.46C181.7,15.4 182.37,13.52 183.56,12.26Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
<path
android:pathData="M216.13,28.49C216.13,29 216.53,29.39 217.05,29.39C217.52,29.39 217.96,28.96 218,28.41V16.07C218,11.12 215.66,8.64 211.02,8.64C207.6,8.64 205.26,9.71 203.91,11.83H203.8L203.56,9.78C203.48,9.39 203.16,9.08 202.73,9.08C202.25,9.08 201.89,9.43 201.89,9.9V28.41C201.89,28.92 202.29,29.31 202.8,29.31C203.32,29.31 203.72,28.92 203.72,28.41V18.11C203.72,15.4 204.35,13.4 205.46,12.18C206.57,10.92 208.36,10.33 210.82,10.33C212.64,10.33 213.95,10.84 214.87,11.75C215.7,12.65 216.13,14.15 216.13,16.19V28.49Z"
android:fillColor="#175DDC"/>
<path
android:pathData="M64.45,3.18C64.45,1.41 65.96,0 67.82,0C69.65,0 71.2,1.41 71.2,3.22V3.5C71.2,5.23 69.65,6.68 67.82,6.68C66,6.68 64.45,5.23 64.45,3.5V3.18Z"
android:fillColor="#175DDC"/>
<path
android:pathData="M28.34,18.55V1.69C28.34,1.31 28.2,0.98 27.92,0.7C27.64,0.42 27.3,0.28 26.92,0.28H1.42C1.03,0.28 0.7,0.42 0.42,0.7C0.14,0.98 0,1.31 0,1.69V18.55C0,19.8 0.25,21.05 0.74,22.29C1.24,23.52 1.85,24.62 2.58,25.58C3.31,26.54 4.18,27.47 5.19,28.38C6.2,29.29 7.14,30.04 7.99,30.64C8.85,31.24 9.74,31.81 10.67,32.34C11.6,32.88 12.26,33.24 12.65,33.43C13.04,33.62 13.36,33.77 13.59,33.87C13.77,33.96 13.96,34 14.17,34C14.37,34 14.57,33.96 14.74,33.87C14.98,33.77 15.29,33.62 15.68,33.43C16.08,33.24 16.74,32.88 17.67,32.34C18.6,31.81 19.49,31.24 20.34,30.64C21.2,30.04 22.13,29.29 23.15,28.38C24.16,27.47 25.03,26.54 25.76,25.58C26.49,24.62 27.1,23.52 27.59,22.29C28.09,21.05 28.34,19.8 28.34,18.55ZM24.09,4.5V18.55C24.09,21.12 22.35,23.76 18.88,26.45C17.5,27.53 15.92,28.53 14.17,29.46V4.5H24.09Z"
android:fillColor="#175DDC"
android:fillType="evenOdd"/>
</vector>
Loading

0 comments on commit b84d393

Please sign in to comment.