fix: UI issues on the new search modal (#11162)

* fix: paddings on search input

* fix: update font variant on empty state

* fix: update gap between notifications and input

* chore: do not hide header on scroll

* fix: analytics qa issues

* Update src/app/Components/GlobalSearchInput/useSearch.ts

Co-authored-by: Ole <[email protected]>

---------

Co-authored-by: Ole <[email protected]>

src/app/Components/GlobalSearchInput/GlobalSearchInputOverlayEmptyState.tsx

@@ -20,7 +20,7 @@ export const GlobalSearchInputOverlayEmptyState = () => {
       <Text selectable={false} variant="lg-display" textAlign="center">
         Find the art you love
       </Text>
-      <Text selectable={false} variant="sm-display" textAlign="center" mt={1} color="black60">
+      <Text selectable={false} variant="sm" textAlign="center" mt={1} color="black60">
         Search for artists, artworks, galleries, and more. Save for later or add alerts.
       </Text>
     </Flex>

src/app/Components/GlobalSearchInput/useSearch.ts

@@ -7,6 +7,7 @@ import { getContextModuleByPillName } from "app/Scenes/Search/helpers"
 import { PillType } from "app/Scenes/Search/types"
 import { useRefetchWhenQueryChanged } from "app/Scenes/Search/useRefetchWhenQueryChanged"
 import { useSearchQuery } from "app/Scenes/Search/useSearchQuery"
+import { useSelectedTab } from "app/utils/hooks/useSelectedTab"
 import { Schema } from "app/utils/track"
 import { useEffect, useRef, useState } from "react"
 import { ScrollView } from "react-native"
@@ -15,6 +16,9 @@ import { useThrottle } from "react-use"
 
 export const useSearch = ({ query }: { query: string }) => {
   const throttledQuery = useThrottle(query, SEARCH_THROTTLE_INTERVAL)
+  const selectedTab = useSelectedTab()
+
+  const contextScreenOwnerType = selectedTab === "home" ? OwnerType.home : OwnerType.search
 
   const didMount = useRef(false)
   const searchPillsRef = useRef<ScrollView>(null)
@@ -39,7 +43,7 @@ export const useSearch = ({ query }: { query: string }) => {
     const contextModule = getContextModuleByPillName(selectedPill.displayName)
 
     setSelectedPill(pill)
-    trackEvent(tracks.tappedPill(contextModule, pill.displayName, query))
+    trackEvent(tracks.tappedPill(contextModule, contextScreenOwnerType, pill.displayName, query))
   }
 
   useEffect(() => {
@@ -49,18 +53,13 @@ export const useSearch = ({ query }: { query: string }) => {
     }
 
     if (query.length === 0) {
-      trackEvent({
-        action_type: Schema.ActionNames.ARAnalyticsSearchCleared,
-      })
+      trackEvent(tracks.trackSearchCleared(contextScreenOwnerType))
       handleResetSearchInput()
 
       return
     }
 
-    trackEvent({
-      action_type: Schema.ActionNames.ARAnalyticsSearchStartedQuery,
-      query: query,
-    })
+    trackEvent(tracks.trackSearchStarted(contextScreenOwnerType, query))
   }, [query.trim()])
 
   const handleResetSearchInput = () => {
@@ -86,12 +85,26 @@ export const useSearch = ({ query }: { query: string }) => {
 }
 
 const tracks = {
-  tappedPill: (contextModule: ContextModule, subject: string, query: string) => ({
-    context_screen_owner_type: OwnerType.search,
-    context_screen: Schema.PageNames.Search,
+  tappedPill: (
+    contextModule: ContextModule,
+    contextScreenOwnerType: OwnerType,
+    subject: string,
+    query: string
+  ) => ({
+    context_screen_owner_type: contextScreenOwnerType,
+    context_screen: contextScreenOwnerType,
     context_module: contextModule,
     subject,
     query,
     action: ActionType.tappedNavigationTab,
   }),
+  trackSearchStarted: (contextScreenOwnerType: OwnerType, query: string) => ({
+    context_screen_owner_type: contextScreenOwnerType,
+    action_type: Schema.ActionNames.ARAnalyticsSearchStartedQuery,
+    query,
+  }),
+  trackSearchCleared: (contextScreenOwnerType: OwnerType) => ({
+    action_type: Schema.ActionNames.ARAnalyticsSearchCleared,
+    context_screen_owner_type: contextScreenOwnerType,
+  }),
 }

src/app/Scenes/HomeView/Components/HomeHeader.tsx

@@ -22,11 +22,11 @@ export const HomeHeader: React.FC = () => {
             <PaymentFailureBanner />
           </Suspense>
         )}
-        <Flex py={2}>
+        <Flex pb={1} pt={2}>
           <Flex
             flexDirection="row"
             px={2}
-            gap={2}
+            gap={1}
             justifyContent="space-around"
             alignItems="center"
           >

src/app/Scenes/HomeView/HomeView.tsx

@@ -20,7 +20,6 @@ import { getRelayEnvironment } from "app/system/relay/defaultEnvironment"
 import { useBottomTabsScrollToTop } from "app/utils/bottomTabsHelper"
 import { useExperimentVariant } from "app/utils/experiments/hooks"
 import { extractNodes } from "app/utils/extractNodes"
-import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { ProvidePlaceholderContext } from "app/utils/placeholders"
 import { usePrefetch } from "app/utils/queryPrefetching"
 import { requestPushNotificationsPermission } from "app/utils/requestPushNotificationsPermission"
@@ -36,7 +35,6 @@ export const homeViewScreenQueryVariables = () => ({
 })
 
 export const HomeView: React.FC = () => {
-  const enableNewSearchModal = useFeatureFlag("AREnableNewSearchModal")
   const flashlistRef = useBottomTabsScrollToTop("home")
   const [isRefreshing, setIsRefreshing] = useState(false)
 
@@ -144,13 +142,6 @@ export const HomeView: React.FC = () => {
     })
   }
 
-  const stickyHeaderProps = enableNewSearchModal
-    ? {
-        stickyHeaderHiddenOnScroll: true,
-        stickyHeaderIndices: [0],
-      }
-    : {}
-
   return (
     <Screen safeArea={true}>
       <Screen.Body fullwidth>
@@ -176,7 +167,7 @@ export const HomeView: React.FC = () => {
           }
           refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />}
           onEndReachedThreshold={2}
-          {...stickyHeaderProps}
+          stickyHeaderIndices={[0]}
         />
         {!!data?.me && <EmailConfirmationBannerFragmentContainer me={data.me} />}
       </Screen.Body>

src/app/Scenes/Search/Search.tsx

@@ -133,7 +133,7 @@ export const Search: React.FC = () => {
   return (
     <SearchContext.Provider value={searchProviderValues}>
       <ArtsyKeyboardAvoidingView>
-        <Flex p={2} pb={0}>
+        <Flex p={2} pb={enableNewSearchModal ? 1 : 0}>
           {enableNewSearchModal ? (
             <GlobalSearchInput ownerType={OwnerType.search} />
           ) : (