diff --git a/apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/DisplayTextInput.kt b/apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/DisplayTextInput.kt
index 846c4fd444..1a53a9b2dc 100644
--- a/apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/DisplayTextInput.kt
+++ b/apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/ui/DisplayTextInput.kt
@@ -1,9 +1,12 @@
package com.flipcash.app.core.ui
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.input.InputTransformation
import androidx.compose.foundation.text.input.KeyboardActionHandler
import androidx.compose.foundation.text.input.TextFieldState
+import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
@@ -30,11 +33,15 @@ fun DisplayTextInput(
placeholder: String,
modifier: Modifier = Modifier,
textModifier: Modifier = Modifier,
+ sublabel: String? = null,
style: TextStyle = CodeTheme.typography.displayMedium.copy(
color = CodeTheme.colors.textMain,
fontWeight = FontWeight.SemiBold,
),
placeholderStyle: TextStyle = style.copy(color = CodeTheme.colors.textTertiary),
+ sublabelStyle: TextStyle = CodeTheme.typography.textSmall.copy(
+ color = CodeTheme.colors.textSecondary,
+ ),
minLines: Int = 1,
maxLines: Int = 1,
enabled: Boolean = true,
@@ -42,27 +49,36 @@ fun DisplayTextInput(
onKeyboardAction: KeyboardActionHandler? = null,
inputTransformation: InputTransformation? = null,
) {
- TextInput(
- state = state,
- modifier = modifier,
- textModifier = textModifier,
- placeholder = placeholder,
- style = style,
- placeholderStyle = placeholderStyle,
- textFieldAlignment = Alignment.TopStart,
- maxLines = maxLines,
- minLines = minLines,
- minHeight = 0.dp,
- shape = RectangleShape,
- enabled = enabled,
- colors = inputColors(
- backgroundColor = Color.Transparent,
- borderColor = Color.Transparent,
- unfocusedBorderColor = Color.Transparent,
- placeholderColor = placeholderStyle.color,
- ),
- keyboardOptions = keyboardOptions,
- onKeyboardAction = onKeyboardAction,
- inputTransformation = inputTransformation,
- )
+ Column(verticalArrangement = Arrangement.spacedBy(CodeTheme.dimens.grid.x2)) {
+ TextInput(
+ state = state,
+ modifier = modifier,
+ textModifier = textModifier,
+ placeholder = placeholder,
+ style = style,
+ placeholderStyle = placeholderStyle,
+ textFieldAlignment = Alignment.TopStart,
+ maxLines = maxLines,
+ minLines = minLines,
+ minHeight = 0.dp,
+ shape = RectangleShape,
+ enabled = enabled,
+ colors = inputColors(
+ backgroundColor = Color.Transparent,
+ borderColor = Color.Transparent,
+ unfocusedBorderColor = Color.Transparent,
+ placeholderColor = placeholderStyle.color,
+ ),
+ keyboardOptions = keyboardOptions,
+ onKeyboardAction = onKeyboardAction,
+ inputTransformation = inputTransformation,
+ )
+
+ if (sublabel != null) {
+ Text(
+ text = sublabel,
+ style = sublabelStyle,
+ )
+ }
+ }
}
diff --git a/apps/flipcash/core/src/main/res/values/strings.xml b/apps/flipcash/core/src/main/res/values/strings.xml
index 3e91705fdf..a866509dbe 100644
--- a/apps/flipcash/core/src/main/res/values/strings.xml
+++ b/apps/flipcash/core/src/main/res/values/strings.xml
@@ -887,6 +887,7 @@
Start Receiving Tips
What is your name?
+ This is how you\'ll appear to others
Your Name
This Name is Not Allowed
Try a different name
diff --git a/apps/flipcash/features/user-profile/src/main/kotlin/com/flipcash/app/userprofile/internal/name/NameEntryScreen.kt b/apps/flipcash/features/user-profile/src/main/kotlin/com/flipcash/app/userprofile/internal/name/NameEntryScreen.kt
index 44dfa619b2..fd21dc810c 100644
--- a/apps/flipcash/features/user-profile/src/main/kotlin/com/flipcash/app/userprofile/internal/name/NameEntryScreen.kt
+++ b/apps/flipcash/features/user-profile/src/main/kotlin/com/flipcash/app/userprofile/internal/name/NameEntryScreen.kt
@@ -122,27 +122,32 @@ private fun NameEntryScreenContent(
}
) { padding ->
val focusRequester = remember { FocusRequester() }
- DisplayTextInput(
- state = state.nameFieldState,
- placeholder = stringResource(R.string.hint_profileName),
- modifier = Modifier
- .fillMaxWidth()
- .padding(padding)
- .focusRequester(focusRequester),
- textModifier = Modifier.sharedElementTransition(
- transition = SharedTransition.CurrencyName,
- ),
- keyboardOptions = KeyboardOptions(
- capitalization = KeyboardCapitalization.Words,
- keyboardType = KeyboardType.Text,
- imeAction = ImeAction.Done,
- ),
- onKeyboardAction = {
- keyboard.hideIfVisible {
- dispatchEvent(NameEntryViewModel.Event.CheckName)
- }
- },
- )
+ // Apply the scaffold's content padding to the wrapper, not the field —
+ // padding on the field itself inflates its box and pushes the sublabel
+ // far below the entered text instead of letting it sit just underneath.
+ Column(modifier = Modifier.padding(padding)) {
+ DisplayTextInput(
+ state = state.nameFieldState,
+ placeholder = stringResource(R.string.hint_profileName),
+ sublabel = stringResource(R.string.subtitle_profileNameSelection),
+ modifier = Modifier
+ .fillMaxWidth()
+ .focusRequester(focusRequester),
+ textModifier = Modifier.sharedElementTransition(
+ transition = SharedTransition.CurrencyName,
+ ),
+ keyboardOptions = KeyboardOptions(
+ capitalization = KeyboardCapitalization.Words,
+ keyboardType = KeyboardType.Text,
+ imeAction = ImeAction.Done,
+ ),
+ onKeyboardAction = {
+ keyboard.hideIfVisible {
+ dispatchEvent(NameEntryViewModel.Event.CheckName)
+ }
+ },
+ )
+ }
LaunchedEffect(Unit) {
focusRequester.requestFocus()