Improved search page (#7590)

* search input revamp

* fix web

* rm "useThemeNew"

* fix overlap during transition

* animate header properly

* reduce gap

* animate cancel button in

* don't move search bar when focused

* remove cancel button animation

src/components/Layout/Header/index.tsx

@@ -1,5 +1,5 @@
 import {createContext, useCallback, useContext} from 'react'
-import {GestureResponderEvent, View} from 'react-native'
+import {GestureResponderEvent, Keyboard, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -140,6 +140,7 @@ export function MenuButton() {
   const {gtMobile} = useBreakpoints()
 
   const onPress = useCallback(() => {
+    Keyboard.dismiss()
     setDrawerOpen(true)
   }, [setDrawerOpen])
 

src/components/forms/TextField.tsx

@@ -226,6 +226,7 @@ export function createInput(Component: typeof TextInput) {
       <>
         <Component
           accessibilityHint={undefined}
+          hitSlop={HITSLOP_20}
           {...rest}
           accessibilityLabel={label}
           ref={refs}
@@ -242,7 +243,6 @@ export function createInput(Component: typeof TextInput) {
           placeholder={placeholder || label}
           placeholderTextColor={t.palette.contrast_500}
           keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
-          hitSlop={HITSLOP_20}
           style={flattened}
         />