[🐴] Input hover and focus styles (#4064)

* styles for native input * web focus/hover * nit
bluesky-social · May 16, 2024 · a84a14d · a84a14d
1 parent ba068c8
commit a84a14d
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 11 deletions.
diff --git 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}

diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/Conversation/MessageInput.web.tsx
@@ -12,6 +12,7 @@ import {
 } from '#/state/messages/message-drafts'
 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({
@@ -25,6 +26,10 @@ export function MessageInput({
   const {getDraft, clearDraft} = useMessageDraft()
   const [message, setMessage] = React.useState(getDraft)
 
+  const inputStyles = useSharedInputStyles()
+  const [isFocused, setIsFocused] = React.useState(false)
+  const [isHovered, setIsHovered] = React.useState(false)
+
   const onSubmit = React.useCallback(() => {
     if (message.trim() === '') {
       return
@@ -63,11 +68,20 @@ export function MessageInput({
       <View
         style={[
           a.flex_row,
-          a.px_sm,
-          a.pl_md,
           t.atoms.bg_contrast_25,
-          {borderRadius: 23},
-        ]}>
+          {
+            paddingHorizontal: a.p_sm.padding - 2,
+            paddingLeft: a.p_md.padding - 2,
+            borderWidth: 2,
+            borderRadius: 23,
+            borderColor: 'transparent',
+          },
+          isHovered && inputStyles.chromeHover,
+          isFocused && inputStyles.chromeFocus,
+        ]}
+        // @ts-expect-error web only
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}>
         <TextareaAutosize
           style={StyleSheet.flatten([
             a.flex_1,
@@ -87,6 +101,8 @@ export function MessageInput({
           value={message}
           dirName="ltr"
           autoFocus={true}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
           onChange={onChange}
           onKeyDown={onKeyDown}
         />
@@ -101,7 +117,7 @@ export function MessageInput({
             {
               height: 30,
               width: 30,
-              marginTop: 6,
+              marginTop: 5,
               backgroundColor: t.palette.primary_500,
             },
           ]}