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 65961bcdd..7df24cf69 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
@@ -2,6 +2,7 @@ package com.x8bit.bitwarden.ui.auth.feature.landing
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
@@ -16,7 +17,9 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
@@ -31,6 +34,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.res.painterResource
@@ -262,7 +266,7 @@ private fun LandingScreenContent(
keyboardType = KeyboardType.Email,
)
- Spacer(modifier = Modifier.height(10.dp))
+ Spacer(modifier = Modifier.height(2.dp))
EnvironmentSelector(
selectedOption = state.selectedEnvironmentType,
@@ -273,8 +277,6 @@ private fun LandingScreenContent(
.fillMaxWidth(),
)
- Spacer(modifier = Modifier.height(8.dp))
-
BitwardenSwitch(
label = stringResource(id = R.string.remember_me),
isChecked = state.isRememberMeEnabled,
@@ -345,15 +347,25 @@ private fun EnvironmentSelector(
onOptionSelected: (Environment.Type) -> Unit,
modifier: Modifier,
) {
- val options = Environment.Type.values()
+ val options = Environment.Type.entries.toTypedArray()
var shouldShowDialog by rememberSaveable { mutableStateOf(false) }
Box(modifier = modifier) {
Row(
modifier = Modifier
- .clickable { shouldShowDialog = !shouldShowDialog }
- .fillMaxWidth()
- .padding(start = 16.dp),
+ .clip(RoundedCornerShape(28.dp))
+ .clickable(
+ indication = rememberRipple(
+ bounded = true,
+ color = MaterialTheme.colorScheme.primary,
+ ),
+ interactionSource = remember { MutableInteractionSource() },
+ onClick = { shouldShowDialog = !shouldShowDialog },
+ )
+ .padding(
+ vertical = 8.dp,
+ horizontal = 16.dp,
+ ),
verticalAlignment = Alignment.CenterVertically,
) {
Text(
diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/login/LoginScreen.kt b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/login/LoginScreen.kt
index ffaad0058..e9d4728a8 100644
--- a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/login/LoginScreen.kt
+++ b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/login/LoginScreen.kt
@@ -1,8 +1,8 @@
package com.x8bit.bitwarden.ui.auth.feature.login
import android.widget.Toast
-import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
@@ -230,20 +230,13 @@ private fun LoginScreenContent(
showPasswordTestTag = "PasswordVisibilityToggle",
)
- // TODO: Need to figure out better handling for very small clickable text (BIT-724)
- Text(
- text = stringResource(id = R.string.get_password_hint),
+ BitwardenClickableText(
+ label = stringResource(id = R.string.get_password_hint),
+ onClick = onMasterPasswordClick,
style = MaterialTheme.typography.bodySmall,
- color = MaterialTheme.colorScheme.primary,
modifier = Modifier
- .semantics { testTag = "GetMasterPasswordHintLabel" }
.padding(horizontal = 16.dp)
- .fillMaxWidth()
- .clickable { onMasterPasswordClick() }
- .padding(
- vertical = 4.dp,
- horizontal = 16.dp,
- ),
+ .semantics { testTag = "GetMasterPasswordHintLabel" },
)
Spacer(modifier = Modifier.height(20.dp))
@@ -301,14 +294,12 @@ private fun LoginScreenContent(
.fillMaxWidth(),
)
- Spacer(modifier = Modifier.height(8.dp))
-
BitwardenClickableText(
- modifier = Modifier
- .semantics { testTag = "NotYouLabel" }
- .padding(horizontal = 16.dp),
- onClick = onNotYouButtonClick,
label = stringResource(id = R.string.not_you),
+ onClick = onNotYouButtonClick,
+ style = MaterialTheme.typography.labelLarge,
+ innerPadding = PaddingValues(vertical = 8.dp, horizontal = 16.dp),
+ modifier = Modifier.semantics { testTag = "NotYouLabel" },
)
Spacer(modifier = Modifier.navigationBarsPadding())
}
diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/loginwithdevice/LoginWithDeviceScreen.kt b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/loginwithdevice/LoginWithDeviceScreen.kt
index 3b5bc9fd5..f46e5552c 100644
--- a/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/loginwithdevice/LoginWithDeviceScreen.kt
+++ b/app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/loginwithdevice/LoginWithDeviceScreen.kt
@@ -2,6 +2,7 @@ package com.x8bit.bitwarden.ui.auth.feature.loginwithdevice
import android.widget.Toast
import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxSize
@@ -137,7 +138,6 @@ private fun LoginWithDeviceScreenContent(
modifier: Modifier = Modifier,
) {
Column(
- horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier
.imePadding()
.verticalScroll(rememberScrollState()),
@@ -202,11 +202,11 @@ private fun LoginWithDeviceScreenContent(
.fillMaxWidth(),
)
- Spacer(modifier = Modifier.height(24.dp))
+ Spacer(modifier = Modifier.height(16.dp))
Column(
modifier = Modifier
- .defaultMinSize(minHeight = 32.dp)
+ .defaultMinSize(minHeight = 36.dp)
.align(Alignment.Start),
) {
if (state.isResendNotificationLoading) {
@@ -217,17 +217,16 @@ private fun LoginWithDeviceScreenContent(
)
} else {
BitwardenClickableText(
- modifier = Modifier
- .padding(horizontal = 16.dp)
- .semantics { testTag = "ResendNotificationButton" }
- .fillMaxWidth(),
+ modifier = Modifier.semantics { testTag = "ResendNotificationButton" },
label = stringResource(id = R.string.resend_notification),
+ style = MaterialTheme.typography.labelLarge,
+ innerPadding = PaddingValues(vertical = 8.dp, horizontal = 16.dp),
onClick = onResendNotificationClick,
)
}
}
- Spacer(modifier = Modifier.height(24.dp))
+ Spacer(modifier = Modifier.height(28.dp))
Text(
text = stringResource(id = R.string.need_another_option),
@@ -239,14 +238,11 @@ private fun LoginWithDeviceScreenContent(
.fillMaxWidth(),
)
- Spacer(modifier = Modifier.height(8.dp))
-
BitwardenClickableText(
- modifier = Modifier
- .padding(horizontal = 16.dp)
- .semantics { testTag = "ViewAllLoginOptionsButton" }
- .fillMaxWidth(),
+ modifier = Modifier.semantics { testTag = "ViewAllLoginOptionsButton" },
label = stringResource(id = R.string.view_all_login_options),
+ innerPadding = PaddingValues(vertical = 8.dp, horizontal = 16.dp),
+ style = MaterialTheme.typography.labelLarge,
onClick = onViewAllLogInOptionsClick,
)
diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenClickableText.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenClickableText.kt
index 6521cb175..8d0889b7c 100644
--- a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenClickableText.kt
+++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenClickableText.kt
@@ -1,12 +1,23 @@
package com.x8bit.bitwarden.ui.platform.components
import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
/**
* Represents a Bitwarden-styled clickable text.
@@ -19,16 +30,28 @@ import androidx.compose.ui.tooling.preview.Preview
fun BitwardenClickableText(
label: String,
onClick: () -> Unit,
+ style: TextStyle,
modifier: Modifier = Modifier,
+ innerPadding: PaddingValues = PaddingValues(vertical = 4.dp, horizontal = 16.dp),
+ cornerSize: Dp = 28.dp,
+ color: Color = MaterialTheme.colorScheme.primary,
) {
Text(
modifier = modifier
- // TODO: Need to figure out better handling for very small clickable text (BIT-724)
- .clickable { onClick() },
+ .clip(RoundedCornerShape(cornerSize))
+ .clickable(
+ indication = rememberRipple(
+ bounded = true,
+ color = MaterialTheme.colorScheme.primary,
+ ),
+ interactionSource = remember { MutableInteractionSource() },
+ onClick = onClick,
+ )
+ .padding(innerPadding),
text = label,
textAlign = TextAlign.Start,
- color = MaterialTheme.colorScheme.primary,
- style = MaterialTheme.typography.labelLarge,
+ color = color,
+ style = style,
)
}