From 2a2796b2dfd4899749d1763548f1e7f69b97b4f5 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Tue, 10 Sep 2024 11:53:18 +0200
Subject: [PATCH] Improve styling of SearchRouter

---
 src/components/Search/SearchPageHeader.tsx    |  2 +-
 .../Search/SearchRouter/SearchRouter.tsx      |  2 +-
 .../SearchRouter/SearchRouterContext.tsx      | 14 ++++++----
 .../Search/SearchRouter/SearchRouterInput.tsx | 22 ++++------------
 src/styles/index.ts                           | 26 +++++--------------
 5 files changed, 23 insertions(+), 43 deletions(-)

diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx
index 9c4d1b50cce3..066fb7616499 100644
--- a/src/components/Search/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader.tsx
@@ -10,7 +10,6 @@ import type HeaderWithBackButtonProps from '@components/HeaderWithBackButton/typ
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
-import SearchButton from '@components/Search/SearchRouter/SearchButton';
 import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
@@ -32,6 +31,7 @@ import type {SearchDataTypes, SearchReport} from '@src/types/onyx/SearchResults'
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type IconAsset from '@src/types/utils/IconAsset';
 import {useSearchContext} from './SearchContext';
+import SearchButton from './SearchRouter/SearchButton';
 import type {SearchQueryJSON} from './types';
 
 type HeaderWrapperProps = Pick<HeaderWithBackButtonProps, 'title' | 'subtitle' | 'icon' | 'children'> & {
diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 6ec1145cf4c4..39d0b4d7d1c1 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -52,7 +52,7 @@ function SearchRouter({type}: SearchRouterProps) {
                 toggleSearchRouter();
             }}
         >
-            <View style={[styles.flex1, styles.p5]}>
+            <View style={[styles.flex1, styles.p3]}>
                 <SearchRouterInput onSearch={onSearch} />
             </View>
         </Modal>
diff --git a/src/components/Search/SearchRouter/SearchRouterContext.tsx b/src/components/Search/SearchRouter/SearchRouterContext.tsx
index 02206c0be004..0383f018f2ad 100644
--- a/src/components/Search/SearchRouter/SearchRouterContext.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterContext.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useState} from 'react';
+import React, {useCallback, useContext, useMemo, useState} from 'react';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
 const defaultSearchContext = {
@@ -17,10 +17,14 @@ function SearchRouterContextProvider({children}: ChildrenProps) {
         setIsSearchRouterDisplayed(!isSearchRouterDisplayed);
     }, [isSearchRouterDisplayed]);
 
-    const routerContext = {
-        isSearchRouterDisplayed,
-        toggleSearchRouter,
-    };
+    const routerContext = useMemo(
+        () => ({
+            isSearchRouterDisplayed,
+            toggleSearchRouter,
+        }),
+        [isSearchRouterDisplayed, toggleSearchRouter],
+    );
+
     return <Context.Provider value={routerContext}>{children}</Context.Provider>;
 }
 
diff --git a/src/components/Search/SearchRouter/SearchRouterInput.tsx b/src/components/Search/SearchRouter/SearchRouterInput.tsx
index b0b999cb86b3..136b45239eb1 100644
--- a/src/components/Search/SearchRouter/SearchRouterInput.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterInput.tsx
@@ -1,8 +1,8 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import TextInput from '@components/TextInput';
-import useTheme from '@hooks/useTheme';
+import BaseTextInput from '@components/TextInput/BaseTextInput';
 import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
 type SearchRouterInputProps = {
@@ -11,7 +11,6 @@ type SearchRouterInputProps = {
 
 function SearchRouterInput({onSearch}: SearchRouterInputProps) {
     const styles = useThemeStyles();
-    const theme = useTheme();
 
     const [value, setValue] = useState('');
 
@@ -22,23 +21,12 @@ function SearchRouterInput({onSearch}: SearchRouterInputProps) {
 
     return (
         <View style={[]}>
-            <TextInput
+            <BaseTextInput
                 value={value}
                 onChangeText={onChangeText}
-                textInputContainerStyles={[{borderWidth: 0}]}
-                containerStyles={[]}
                 hideFocusedState
-                inputStyle={[
-                    styles.w80,
-                    styles.h13,
-                    styles.ph4,
-                    {
-                        width: 400,
-                        borderRadius: 8,
-                        borderWidth: 4,
-                        borderColor: theme.borderFocus,
-                    },
-                ]}
+                textInputContainerStyles={[{borderBottomWidth: 0, width: variables.popoverWidth}]}
+                inputStyle={[styles.searchInputStyle, styles.searchRouterInputStyle, styles.ph2]}
                 role={CONST.ROLE.PRESENTATION}
             />
         </View>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 5c813998267b..599b958e36c2 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3593,31 +3593,19 @@ const styles = (theme: ThemeColors) =>
             flex: 1,
         },
 
-        searchPressable: {
-            height: variables.componentSizeNormal,
-        },
-
-        searchContainer: {
-            flex: 1,
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 8,
-            paddingHorizontal: 24,
-            backgroundColor: theme.hoverComponentBG,
-            borderRadius: variables.componentBorderRadiusRounded,
-            justifyContent: 'center',
-        },
-
-        searchContainerHovered: {
-            backgroundColor: theme.border,
-        },
-
         searchInputStyle: {
             color: theme.textSupporting,
             fontSize: 13,
             lineHeight: 16,
         },
 
+        searchRouterInputStyle: {
+            borderRadius: variables.componentBorderRadiusSmall,
+            borderWidth: 2,
+            borderColor: theme.borderFocus,
+            paddingHorizontal: 8,
+        },
+
         searchTableHeaderActive: {
             fontWeight: FontUtils.fontWeight.bold,
         },