Worked on OTP backspace logic, removing previous item and focus on previous textfield

app/src/main/java/com/fastest/pass/forgotpassword/presentation/ui/components/ForgotPasswordScreen.kt

@@ -82,7 +82,7 @@ fun ForgotPasswordScreen(clickType: (ClickType) -> Unit) {
                         colorResource(id = R.color.light_gray_login),
                     )
             ) {
-                ForgotText()
+                ForgotPasswordText(R.string.email_associated_account)
                 LoginTextFieldFP(keyboardController = keyboardController, focusManager = focusManager)
                 Spacer(modifier = Modifier.height(25.dp))
                 SendCodeButton(buttonText = R.string.send_code) { clickType ->
@@ -150,6 +150,35 @@ fun ColumnScope.ForgotText() {
 }
 
 @Composable
+fun ColumnScope.ForgotPasswordText(
+    forgotText: Int,
+) {
+    Text(
+        text = stringResource(id = R.string.enter_email_address),
+        color = colorResource(id = R.color.gray_splash),
+        style = MaterialTheme.typography.headlineLarge.copy(
+            fontSize = 26.sp
+        ),
+        lineHeight = 20.sp,
+        modifier = Modifier
+            .align(Alignment.Start)
+            .padding(start = 30.dp, top = 35.dp)
+    )
+    Text(
+        text = stringResource(id = forgotText),
+        color = colorResource(id = R.color.gray_splash),
+        style = MaterialTheme.typography.displayLarge.copy(
+            fontSize = 18.sp
+        ),
+        lineHeight = 25.sp,
+        modifier = Modifier
+            .align(Alignment.Start)
+            .padding(start = 30.dp, top = 5.dp, end = 50.dp)
+
+    )
+}
+
+@Composable
 fun ColumnScope.LoginTextFieldFP(
     keyboardController: SoftwareKeyboardController?,
     focusManager: FocusManager

app/src/main/java/com/fastest/pass/forgotpassword/presentation/ui/components/ForgotPasswordVerifyScreen.kt

@@ -1,5 +1,6 @@
 package com.fastest.pass.forgotpassword.presentation.ui.components
 
+import android.util.Log
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
@@ -20,6 +21,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.ClickableText
+import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
@@ -177,7 +179,7 @@ fun ColumnScope.OTPFields() {
     val otpLength = 4
     val keyboardController = LocalSoftwareKeyboardController.current
     val focusManager = LocalFocusManager.current
-    var otpValues = remember { mutableStateListOf(*Array(otpLength) {""}) }
+    val otpValues = remember { mutableStateListOf(*Array(otpLength) {""}) }
 
     Row(
         modifier = Modifier
@@ -193,16 +195,26 @@ fun ColumnScope.OTPFields() {
                 onValueChange = { newValue ->
                     if (newValue.length <= 1) {
                         otpValues[index] = newValue
-
                         if (newValue.isNotEmpty() && index < otpLength - 1) {
+                            Log.d("test_otp_event", "newValue = ${otpValues[index]}")
                             focusManager.moveFocus(FocusDirection.Next)
                         }
+//                        else if (index == otpLength -1) {
+//                            focusManager.clearFocus()
+//                            keyboardController?.hide()
+//                        }
                     }
                 },
                 keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
+                keyboardActions = KeyboardActions(
+                    onDone = {
+                        focusManager.clearFocus()
+                        keyboardController?.hide()
+                    }
+                ),
                 singleLine = true,
                 maxLines = 1,
-                textStyle = MaterialTheme.typography.displaySmall,
+                textStyle = MaterialTheme.typography.headlineSmall,
                 modifier = Modifier
                     .padding(horizontal = 6.dp)
                     .width(50.dp)
@@ -211,18 +223,29 @@ fun ColumnScope.OTPFields() {
                         1.dp,
                         color = colorResource(id = R.color.gray_border_textfield),
                         shape = RoundedCornerShape(8.dp)
-                    ),
-//                    .onKeyEvent { event ->
-//                        if (event.type == KeyEventType.KeyDown && event.key == Key.Backspace) {
-//                            if (otpValues[index].isEmpty() && index > 0) {
-//                                focusManager.moveFocus(FocusDirection.Previous)
-//                                otpValues[index - 1] = ""
-//                            }
-//                            true
-//                        } else {
-//                            false
-//                        }
-//                    },
+                    )
+                    .onKeyEvent { event ->
+                        if (event.key == Key.Backspace) {
+                            if (index > 0) {
+                                Log.d("test_otp_event", "Inside otp event")
+                                if (index < otpLength) {
+                                    focusManager.moveFocus(FocusDirection.Previous)
+                                    otpValues[index - 1] = ""
+                                }
+//                                else if (otpValues[index].isNotEmpty()) {
+//                                    otpValues[index] = ""
+//                                } else {
+//                                    focusManager.moveFocus(FocusDirection.Previous)
+//                                    otpValues[index - 1] = ""
+//                                }
+                            }
+                            true
+                        }
+                        else {
+                            false
+                        }
+                    }
+                        ,
                 colors = TextFieldDefaults.colors(
                     focusedLabelColor = colorResource(id = R.color.gray_splash),
                     unfocusedContainerColor = colorResource(id = R.color.transparent),

app/src/main/java/com/fastest/pass/ui/theme/Type.kt

@@ -46,7 +46,8 @@ val Typography = Typography(
     headlineSmall = TextStyle(
         fontFamily = outfitFontFamily,
         fontWeight = FontWeight.Normal,
-        fontSize = 12.sp,
+        textAlign = TextAlign.Center,
+        fontSize = 20.sp,
     ),
     headlineMedium = TextStyle(
         fontFamily = outfitFontFamily,

app/src/main/java/com/fastest/pass/welcome/presentation/ui/component/WelcomeScreen.kt

@@ -168,7 +168,7 @@ fun WelcomePage(
             ) {
                 Text(
                     text = description,
-                    style = Typography.displaySmall.copy(textAlign = TextAlign.Center, fontSize = TextUnit(14f,
+                    style = Typography.displaySmall.copy(textAlign = TextAlign.Center, fontSize = TextUnit(15f,
                         TextUnitType.Sp)),
                     color = Gray_Splash,
                     textAlign = TextAlign.Center,