SES-2219 Fix TextField styling

app/src/main/java/org/thoughtcrime/securesms/ui/color/Colors.kt

@@ -45,6 +45,10 @@ interface Colors {
     val primaryButtonFillText: Color
 }
 
+fun Colors.text(isError: Boolean): Color = if (isError) danger else text
+fun Colors.textSecondary(isError: Boolean): Color = if (isError) danger else textSecondary
+fun Colors.borders(isError: Boolean): Color = if (isError) danger else borders
+
 val Colors.textSelectionColors get() = TextSelectionColors(
     handleColor = primary,
     backgroundColor = primary.copy(alpha = 0.5f)

app/src/main/java/org/thoughtcrime/securesms/ui/components/Text.kt

@@ -2,68 +2,115 @@ package org.thoughtcrime.securesms.ui.components
 
 import androidx.annotation.DrawableRes
 import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.InlineTextContent
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.appendInlineContent
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.Placeholder
 import androidx.compose.ui.text.PlaceholderVerticalAlign
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.thoughtcrime.securesms.ui.LocalDimensions
+import org.thoughtcrime.securesms.ui.PreviewTheme
 import org.thoughtcrime.securesms.ui.base
 import org.thoughtcrime.securesms.ui.baseBold
 import org.thoughtcrime.securesms.ui.color.LocalColors
-import org.thoughtcrime.securesms.ui.color.outlinedTextFieldColors
+import org.thoughtcrime.securesms.ui.color.borders
+import org.thoughtcrime.securesms.ui.color.text
+import org.thoughtcrime.securesms.ui.color.textSecondary
+
+@Preview
+@Composable
+fun PreviewSessionOutlinedTextField() {
+    PreviewTheme {
+        Column(modifier = Modifier.padding(10.dp),
+            verticalArrangement = Arrangement.spacedBy(10.dp)) {
+            SessionOutlinedTextField(
+                text = "text",
+                placeholder = "placeholder"
+            )
+
+            SessionOutlinedTextField(
+                text = "",
+                placeholder = "placeholder"
+            )
+        }
+    }
+}
 
 @Composable
 fun SessionOutlinedTextField(
     text: String,
-        placeholder: String,
     modifier: Modifier = Modifier,
-        onChange: (String) -> Unit,
+    onChange: (String) -> Unit = {},
-        onContinue: () -> Unit,
+    textStyle: TextStyle = base,
+    placeholder: String = "",
+    onContinue: () -> Unit = {},
     error: String? = null
 ) {
     Column(modifier = modifier.animateContentSize()) {
-        OutlinedTextField(
+        Box(
-            value = text,
+            modifier = Modifier.border(
-            modifier = Modifier.fillMaxWidth(),
+                width = LocalDimensions.current.borderStroke,
-            textStyle = base,
+                color = LocalColors.current.borders(error != null),
-            onValueChange = { onChange(it) },
+                shape = MaterialTheme.shapes.small
-            placeholder = {
-                Text(
-                    placeholder,
-                    style = base
             )
-            },
+                .fillMaxWidth()
-            colors = LocalColors.current.outlinedTextFieldColors(error != null),
+                .wrapContentHeight()
-            singleLine = true,
+                .padding(top = 28.dp, bottom = 24.dp)
+                .padding(horizontal = 21.dp)
+        ) {
+            val mergedTextStyle = textStyle.merge(TextStyle(color = LocalColors.current.text(error != null)))
+
+            if (text.isEmpty()) {
+                Text(
+                    text = placeholder,
+                    style = base,
+                    color = LocalColors.current.textSecondary(error != null),
+                    modifier = Modifier.wrapContentSize()
+                        .align(Alignment.CenterStart)
+                        .wrapContentSize()
+                )
+            }
+
+            BasicTextField(
+                value = text,
+                onValueChange = onChange,
+                modifier = Modifier.wrapContentHeight().fillMaxWidth(),
+                textStyle = mergedTextStyle,
+                cursorBrush = SolidColor(LocalColors.current.text(error != null)),
                 keyboardActions = KeyboardActions(
                     onDone = { onContinue() },
                     onGo = { onContinue() },
                     onSearch = { onContinue() },
                     onSend = { onContinue() },
-            ),
-            isError = error != null,
-            shape = MaterialTheme.shapes.small
                 )
+            )
+        }
         error?.let {
             Spacer(modifier = Modifier.height(LocalDimensions.current.xsItemSpacing))
             Text(