Improve styling of SearchRouter

Expensify · Sep 10, 2024 · 0966fad · 0966fad
1 parent 4e1b90c
commit 0966fad
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 37 deletions.
diff --git 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/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
@@ -3587,31 +3587,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,
         },