search style

src/view/screens/Search/Search.tsx

@@ -783,7 +783,7 @@ let SearchInputBox = ({
       }}>
       <MagnifyingGlassIcon
         style={[pal.icon, styles.headerSearchIcon]}
-        size={21}
+        size={20}
       />
       <TextInput
         testID="searchTextInput"

src/view/shell/desktop/Search.tsx

@@ -12,7 +12,11 @@ import {
   moderateProfile,
   ModerationDecision,
 } from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {StackActions, useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
@@ -24,7 +28,7 @@ import {s} from '#/lib/styles'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
 import {usePalette} from 'lib/hooks/usePalette'
-import {MagnifyingGlassIcon2} from 'lib/icons'
+import {MagnifyingGlassIcon} from 'lib/icons'
 import {NavigationProp} from 'lib/routes/types'
 import {precacheProfile} from 'state/queries/profile'
 import {Link} from '#/view/com/util/Link'
@@ -185,11 +189,7 @@ export function DesktopSearch() {
     <View style={[styles.container, pal.view]}>
       <View
         style={[{backgroundColor: pal.colors.backgroundLight}, styles.search]}>
-        <View style={[styles.inputContainer]}>
+        <MagnifyingGlassIcon size={20} style={[pal.icon, styles.iconWrapper]} />
-          <MagnifyingGlassIcon2
-            size={18}
-            style={[pal.textLight, styles.iconWrapper]}
-          />
         <TextInput
           testID="searchTextInput"
           placeholder={_(msg`Search`)}
@@ -208,21 +208,20 @@ export function DesktopSearch() {
           autoCapitalize="none"
         />
         {query ? (
-            <View style={styles.cancelBtn}>
           <TouchableOpacity
             onPress={onPressCancelSearch}
             accessibilityRole="button"
             accessibilityLabel={_(msg`Cancel search`)}
             accessibilityHint={_(msg`Exits inputting search query`)}
             onAccessibilityEscape={onPressCancelSearch}>
-                <Text type="lg" style={[pal.link]}>
+            <FontAwesomeIcon
-                  <Trans>Cancel</Trans>
+              icon="xmark"
-                </Text>
+              size={16}
+              style={pal.textLight as FontAwesomeIconStyle}
+            />
           </TouchableOpacity>
-            </View>
         ) : undefined}
       </View>
-      </View>
 
       {query !== '' && isActive && moderationOpts && (
         <View style={[pal.view, pal.borderDark, styles.resultsContainer]}>
@@ -263,31 +262,20 @@ const styles = StyleSheet.create({
     width: 300,
   },
   search: {
-    paddingHorizontal: 16,
+    flex: 1,
-    paddingVertical: 2,
-    width: 300,
-    borderRadius: 20,
-  },
-  inputContainer: {
     flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 30,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
   },
   iconWrapper: {
-    position: 'relative',
+    marginRight: 6,
-    top: 2,
+    alignSelf: 'center',
-    paddingVertical: 7,
-    marginRight: 8,
   },
   input: {
     flex: 1,
-    fontSize: 18,
+    fontSize: 17,
-    width: '100%',
-    paddingTop: 7,
-    paddingBottom: 7,
-  },
-  cancelBtn: {
-    paddingRight: 4,
-    paddingLeft: 10,
-    paddingVertical: 7,
   },
   resultsContainer: {
     marginTop: 10,