Clean up desktop web header search

src/view/com/profile/ProfileCard.tsx

@@ -16,6 +16,7 @@ export function ProfileCard({
   avatar,
   description,
   isFollowedBy,
+  noBorder,
   renderButton,
 }: {
   handle: string
@@ -23,12 +24,18 @@ export function ProfileCard({
   avatar?: string
   description?: string
   isFollowedBy?: boolean
+  noBorder?: boolean
   renderButton?: () => JSX.Element
 }) {
   const pal = usePalette('default')
   return (
     <Link
-      style={[styles.outer, pal.view, pal.border]}
+      style={[
+        styles.outer,
+        pal.view,
+        pal.border,
+        noBorder && styles.outerNoBorder,
+      ]}
       href={`/profile/${handle}`}
       title={handle}
       noFeedback>
@@ -42,7 +49,11 @@ export function ProfileCard({
           />
         </View>
         <View style={styles.layoutContent}>
-          <Text type="lg" style={[s.bold, pal.text]} numberOfLines={1}>
+          <Text
+            type="lg"
+            style={[s.bold, pal.text]}
+            numberOfLines={1}
+            lineHeight={1.2}>
             {displayName || handle}
           </Text>
           <Text type="md" style={[pal.textLight]} numberOfLines={1}>
@@ -154,6 +165,9 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     paddingHorizontal: 6,
   },
+  outerNoBorder: {
+    borderTopWidth: 0,
+  },
   layout: {
     flexDirection: 'row',
     alignItems: 'center',

src/view/shell/web/DesktopHeader.tsx

@@ -203,29 +203,13 @@ const styles = StyleSheet.create({
     borderRadius: 6,
   },
 
-  search: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: 300,
-    borderRadius: 20,
-    paddingVertical: 8,
-    paddingHorizontal: 10,
-    borderWidth: 1,
-  },
-  searchIconWrapper: {
-    flexDirection: 'row',
-    width: 30,
-    justifyContent: 'center',
-    marginRight: 2,
-  },
-
   newPostBtn: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 24,
     paddingTop: 8,
-    paddingBottom: 9,
+    paddingBottom: 8,
     paddingHorizontal: 18,
     backgroundColor: colors.blue3,
   },

src/view/shell/web/DesktopSearch.tsx

@@ -34,20 +34,13 @@ export const DesktopSearch = observer(function DesktopSearch() {
   }
 
   return (
-    <View
+    <View style={styles.container}>
-      style={[
+      <View style={[pal.borderDark, pal.view, styles.search]}>
-        styles.searchContainer,
+        <View style={[styles.inputContainer]}>
-        pal.borderDark,
-        pal.view,
-        styles.container,
-        styles.search,
-      ]}>
-      <View style={[styles.container, styles.searchInputWrapper]}>
           <MagnifyingGlassIcon
             size={18}
-          style={[pal.textLight, styles.searchIconWrapper]}
+            style={[pal.textLight, styles.iconWrapper]}
           />
-
           <TextInput
             testID="searchTextInput"
             ref={textInput}
@@ -56,110 +49,91 @@ export const DesktopSearch = observer(function DesktopSearch() {
             selectTextOnFocus
             returnKeyType="search"
             value={query}
-          style={[pal.textLight, styles.headerSearchInput]}
+            style={[pal.textLight, styles.input]}
             onFocus={() => setIsInputFocused(true)}
             onBlur={() => setIsInputFocused(false)}
             onChangeText={onChangeQuery}
           />
-
           {query ? (
-          <View style={styles.headerCancelBtn}>
+            <View style={styles.cancelBtn}>
               <TouchableOpacity onPress={onPressCancelSearch}>
-              <Text>Cancel</Text>
+                <Text style={[pal.link]}>Cancel</Text>
               </TouchableOpacity>
             </View>
           ) : undefined}
         </View>
+      </View>
 
-      <View
+      {query !== '' && (
-        style={[
+        <View style={[pal.view, pal.borderDark, styles.resultsContainer]}>
-          {backgroundColor: pal.colors.background},
+          {autocompleteView.searchRes.length ? (
-          styles.searchResultsContainer,
-          styles.container,
-        ]}>
-        {query && autocompleteView.searchRes.length ? (
             <>
-            {autocompleteView.searchRes.map(item => (
+              {autocompleteView.searchRes.map((item, i) => (
                 <ProfileCard
                   key={item.did}
                   handle={item.handle}
                   displayName={item.displayName}
                   avatar={item.avatar}
+                  noBorder={i === 0}
                 />
               ))}
             </>
-        ) : query && !autocompleteView.searchRes.length ? (
+          ) : (
             <View>
-            <Text style={[pal.textLight, styles.searchPrompt]}>
+              <Text style={[pal.textLight, styles.noResults]}>
                 No results found for {autocompleteView.prefix}
               </Text>
             </View>
-        ) : isInputFocused ? (
+          )}
-          <View>
-            <Text style={[pal.textLight, styles.searchPrompt]}>
-              Search for users on the network
-            </Text>
-          </View>
-        ) : null}
         </View>
+      )}
     </View>
   )
 })
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    position: 'relative',
+    width: 300,
   },
   search: {
-    maxWidth: 300,
+    paddingHorizontal: 10,
+    width: 300,
     borderRadius: 20,
     borderWidth: 1,
   },
-  searchIconWrapper: {
+  inputContainer: {
-    flexDirection: 'row',
-    width: 30,
-    justifyContent: 'center',
-    marginRight: 2,
-  },
-  searchInputWrapper: {
     flexDirection: 'row',
   },
-  searchContainer: {
+  iconWrapper: {
-    flexWrap: 'wrap',
+    paddingVertical: 7,
-    position: 'relative',
+    marginRight: 4,
-    paddingHorizontal: 12,
-    paddingTop: 6,
-    paddingBottom: 6,
   },
-  headerMenuBtn: {
+  input: {
-    width: 40,
-    height: 30,
-    marginLeft: 6,
-  },
-  searchResultsContainer: {
-    position: 'fixed',
     flex: 1,
-    flexDirection: 'column',
+    fontSize: 16,
-    borderRadius: 30,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    marginTop: 50,
-  },
-  headerSearchIcon: {
-    marginRight: 6,
-    alignSelf: 'center',
-  },
-  headerSearchInput: {
-    flex: 1,
-    fontSize: 17,
     width: '100%',
+    paddingTop: 7,
+    paddingBottom: 7,
   },
-  headerCancelBtn: {
+  cancelBtn: {
-    width: 60,
+    paddingRight: 4,
     paddingLeft: 10,
+    paddingVertical: 7,
   },
-  searchPrompt: {
+  resultsContainer: {
+    // @ts-ignore supported by web
+    position: 'fixed',
+    marginTop: 40,
+
+    flexDirection: 'column',
+    width: 300,
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingVertical: 4,
+  },
+  noResults: {
     textAlign: 'center',
-    paddingTop: 10,
+    paddingVertical: 10,
   },
 })