[Clipclop] Input polish (#3819)

* tweak input styles + add min-shell mode

* android tweaks + hitslop

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
+    <View style={a.p_sm}>
-      style={[
+      <View
-        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"
         style={[
-          a.rounded_full,
+          a.w_full,
-          a.align_center,
+          a.flex_row,
-          a.justify_center,
+          a.py_sm,
-          {height: 30, width: 30, backgroundColor: t.palette.primary_500},
+          a.px_sm,
-        ]}
+          a.pl_md,
-        onPress={onSubmit}>
+          t.atoms.bg_contrast_25,
-        <PaperPlane fill={t.palette.white} />
+          {borderRadius: 23},
-      </Pressable>
+        ]}>
+        <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>
   )
 }

src/screens/Messages/Conversation/MessageInput.web.tsx

@@ -45,47 +45,48 @@ export function MessageInput({
   )
 
   return (
-    <View
+    <View style={a.p_sm}>
-      style={[
+      <View
-        a.flex_row,
-        a.py_sm,
-        a.px_sm,
-        a.pl_md,
-        a.mt_sm,
-        t.atoms.bg_contrast_25,
-        {borderRadius: 23},
-      ]}>
-      <TextareaAutosize
-        style={StyleSheet.flatten([
-          a.flex_1,
-          a.px_sm,
-          a.border_0,
-          t.atoms.text,
-          {
-            backgroundColor: 'transparent',
-            resize: 'none',
-            paddingTop: 6,
-          },
-        ])}
-        maxRows={12}
-        placeholder={_(msg`Write a message`)}
-        defaultValue=""
-        value={message}
-        dirName="ltr"
-        autoFocus={true}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-      />
-      <Pressable
-        accessibilityRole="button"
         style={[
-          a.rounded_full,
+          a.flex_row,
-          a.align_center,
+          a.py_sm,
-          a.justify_center,
+          a.px_sm,
-          {height: 30, width: 30, backgroundColor: t.palette.primary_500},
+          a.pl_md,
+          t.atoms.bg_contrast_25,
+          {borderRadius: 23},
         ]}>
-        <PaperPlane fill={t.palette.white} />
+        <TextareaAutosize
-      </Pressable>
+          style={StyleSheet.flatten([
+            a.flex_1,
+            a.px_sm,
+            a.border_0,
+            t.atoms.text,
+            {
+              backgroundColor: 'transparent',
+              resize: 'none',
+              paddingTop: 4,
+            },
+          ])}
+          maxRows={12}
+          placeholder={_(msg`Write a message`)}
+          defaultValue=""
+          value={message}
+          dirName="ltr"
+          autoFocus={true}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+        />
+        <Pressable
+          accessibilityRole="button"
+          style={[
+            a.rounded_full,
+            a.align_center,
+            a.justify_center,
+            {height: 30, width: 30, backgroundColor: t.palette.primary_500},
+          ]}>
+          <PaperPlane fill={t.palette.white} />
+        </Pressable>
+      </View>
     </View>
   )
 }

src/screens/Messages/Conversation/MessageItem.tsx

@@ -153,7 +153,7 @@ function Metadata({
           style={[
             t.atoms.text_contrast_medium,
             a.text_xs,
-            a.mt_xs,
+            a.mt_2xs,
             a.mb_lg,
             style,
           ]}>

src/screens/Messages/Conversation/MessagesList.tsx

@@ -6,14 +6,18 @@ import {
   View,
 } from 'react-native'
 import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useFocusEffect} from '@react-navigation/native'
 
+import {isIOS} from '#/platform/detection'
 import {useChat} from '#/state/messages'
 import {ConvoItem, ConvoStatus} from '#/state/messages/convo'
-import {isWeb} from 'platform/detection'
+import {useSetMinimalShellMode} from '#/state/shell'
 import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
 import {MessageItem} from '#/screens/Messages/Conversation/MessageItem'
+import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
@@ -112,13 +116,24 @@ export function MessagesList() {
     [],
   )
 
+  const setMinShellMode = useSetMinimalShellMode()
+  useFocusEffect(
+    useCallback(() => {
+      setMinShellMode(true)
+      return () => setMinShellMode(false)
+    }, [setMinShellMode]),
+  )
+
+  const {bottom: bottomInset} = useSafeAreaInsets()
+
   return (
     <KeyboardAvoidingView
-      style={{flex: 1, marginBottom: isWeb ? 20 : 85}}
+      style={[a.flex_1, {marginBottom: bottomInset}]}
+      keyboardVerticalOffset={isIOS ? 60 : 25}
       behavior="padding"
-      keyboardVerticalOffset={70}
+      contentContainerStyle={a.flex_1}>
-      contentContainerStyle={{flex: 1}}>
       <FlatList
+        ref={flatListRef}
         data={
           chat.state.status === ConvoStatus.Ready ? chat.state.items : undefined
         }
@@ -150,17 +165,13 @@ export function MessagesList() {
           />
         }
         removeClippedSubviews={true}
-        ref={flatListRef}
+        keyboardDismissMode="on-drag"
-        keyboardDismissMode="none"
+      />
+      <MessageInput
+        onSendMessage={onSendMessage}
+        onFocus={onInputFocus}
+        onBlur={onInputBlur}
       />
-
-      <View style={{paddingHorizontal: 10}}>
-        <MessageInput
-          onSendMessage={onSendMessage}
-          onFocus={onInputFocus}
-          onBlur={onInputBlur}
-        />
-      </View>
     </KeyboardAvoidingView>
   )
 }