diff options
Diffstat (limited to 'src/screens/Messages/Conversation/MessageInput.tsx')
-rw-r--r-- | src/screens/Messages/Conversation/MessageInput.tsx | 21 |
1 files changed, 15 insertions, 6 deletions
diff --git a/src/screens/Messages/Conversation/MessageInput.tsx b/src/screens/Messages/Conversation/MessageInput.tsx index d937cc3e1..a6ec125b7 100644 --- a/src/screens/Messages/Conversation/MessageInput.tsx +++ b/src/screens/Messages/Conversation/MessageInput.tsx @@ -22,6 +22,7 @@ import { import {isIOS} from 'platform/detection' import * as Toast from '#/view/com/util/Toast' import {atoms as a, useTheme} from '#/alf' +import {useSharedInputStyles} from '#/components/forms/TextField' import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane' export function MessageInput({ @@ -41,8 +42,12 @@ export function MessageInput({ const {top: topInset} = useSafeAreaInsets() + const inputStyles = useSharedInputStyles() + const [isFocused, setIsFocused] = React.useState(false) const inputRef = React.useRef<TextInput>(null) + useSaveMessageDraft(message) + const onSubmit = React.useCallback(() => { if (message.trim() === '') { return @@ -76,19 +81,21 @@ export function MessageInput({ [scrollToEnd, topInset], ) - useSaveMessageDraft(message) - return ( <View style={a.p_md}> <View style={[ a.w_full, a.flex_row, - a.py_sm, - a.px_sm, - a.pl_md, t.atoms.bg_contrast_25, - {borderRadius: 23}, + { + padding: a.p_sm.padding - 2, + paddingLeft: a.p_md.padding - 2, + borderWidth: 2, + borderRadius: 23, + borderColor: 'transparent', + }, + isFocused && inputStyles.chromeFocus, ]}> <TextInput accessibilityLabel={_(msg`Message input field`)} @@ -108,6 +115,8 @@ export function MessageInput({ keyboardAppearance={t.name === 'light' ? 'light' : 'dark'} scrollEnabled={isInputScrollable} blurOnSubmit={false} + onFocus={() => setIsFocused(true)} + onBlur={() => setIsFocused(false)} onContentSizeChange={onInputLayout} ref={inputRef} hitSlop={HITSLOP_10} |