[Clipclop] Input polish (#3819)

* tweak input styles + add min-shell mode

* android tweaks + hitslop

1 files changed, 43 insertions, 37 deletions

diff --git a/src/screens/Messages/Conversation/MessageInput.tsx b/src/screens/Messages/Conversation/MessageInput.tsx
index 3848bcab3..d477a20c1 100644
--- a/src/screens/Messages/Conversation/MessageInput.tsx
+++ b/src/screens/Messages/Conversation/MessageInput.tsx
@@ -12,6 +12,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {HITSLOP_10} from '#/lib/constants'
 import {atoms as a, useTheme} from '#/alf'
 import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane'
 
@@ -60,44 +61,49 @@ export function MessageInput({
   )
 
   return (
-    <View
-      style={[
-        a.flex_row,
-        a.py_sm,
-        a.px_sm,
-        a.pl_md,
-        a.mt_sm,
-        t.atoms.bg_contrast_25,
-        {borderRadius: 23},
-      ]}>
-      <TextInput
-        accessibilityLabel={_(msg`Message input field`)}
-        accessibilityHint={_(msg`Type your message here`)}
-        placeholder={_(msg`Write a message`)}
-        placeholderTextColor={t.palette.contrast_500}
-        value={message}
-        multiline={true}
-        onChangeText={setMessage}
-        style={[a.flex_1, a.text_md, a.px_sm, t.atoms.text, {maxHeight}]}
-        keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
-        scrollEnabled={isInputScrollable}
-        blurOnSubmit={false}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onContentSizeChange={onInputLayout}
-        ref={inputRef}
-      />
-      <Pressable
-        accessibilityRole="button"
+    <View style={a.p_sm}>
+      <View
         style={[
-          a.rounded_full,
-          a.align_center,
-          a.justify_center,
-          {height: 30, width: 30, backgroundColor: t.palette.primary_500},
-        ]}
-        onPress={onSubmit}>
-        <PaperPlane fill={t.palette.white} />
-      </Pressable>
+          a.w_full,
+          a.flex_row,
+          a.py_sm,
+          a.px_sm,
+          a.pl_md,
+          t.atoms.bg_contrast_25,
+          {borderRadius: 23},
+        ]}>
+        <TextInput
+          accessibilityLabel={_(msg`Message input field`)}
+          accessibilityHint={_(msg`Type your message here`)}
+          placeholder={_(msg`Write a message`)}
+          placeholderTextColor={t.palette.contrast_500}
+          value={message}
+          multiline={true}
+          onChangeText={setMessage}
+          style={[a.flex_1, a.text_md, a.px_sm, t.atoms.text, {maxHeight}]}
+          keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
+          scrollEnabled={isInputScrollable}
+          blurOnSubmit={false}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onContentSizeChange={onInputLayout}
+          ref={inputRef}
+        />
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={_(msg`Send message`)}
+          accessibilityHint=""
+          hitSlop={HITSLOP_10}
+          style={[
+            a.rounded_full,
+            a.align_center,
+            a.justify_center,
+            {height: 30, width: 30, backgroundColor: t.palette.primary_500},
+          ]}
+          onPress={onSubmit}>
+          <PaperPlane fill={t.palette.white} />
+        </Pressable>
+      </View>
     </View>
   )
 }