BIT-724: Update touch targets (#986)

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(

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())
     }

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,
         )
 

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,
     )
 }