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,132 +34,106 @@ 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,
+          <MagnifyingGlassIcon
-        pal.view,
+            size={18}
-        styles.container,
+            style={[pal.textLight, styles.iconWrapper]}
-        styles.search,
+          />
-      ]}>
+          <TextInput
-      <View style={[styles.container, styles.searchInputWrapper]}>
+            testID="searchTextInput"
-        <MagnifyingGlassIcon
+            ref={textInput}
-          size={18}
+            placeholder="Search"
-          style={[pal.textLight, styles.searchIconWrapper]}
+            placeholderTextColor={pal.colors.textLight}
-        />
+            selectTextOnFocus
-
+            returnKeyType="search"
-        <TextInput
+            value={query}
-          testID="searchTextInput"
+            style={[pal.textLight, styles.input]}
-          ref={textInput}
+            onFocus={() => setIsInputFocused(true)}
-          placeholder="Search"
+            onBlur={() => setIsInputFocused(false)}
-          placeholderTextColor={pal.colors.textLight}
+            onChangeText={onChangeQuery}
-          selectTextOnFocus
+          />
-          returnKeyType="search"
+          {query ? (
-          value={query}
+            <View style={styles.cancelBtn}>
-          style={[pal.textLight, styles.headerSearchInput]}
+              <TouchableOpacity onPress={onPressCancelSearch}>
-          onFocus={() => setIsInputFocused(true)}
+                <Text style={[pal.link]}>Cancel</Text>
-          onBlur={() => setIsInputFocused(false)}
+              </TouchableOpacity>
-          onChangeText={onChangeQuery}
+            </View>
-        />
+          ) : undefined}
-
+        </View>
-        {query ? (
-          <View style={styles.headerCancelBtn}>
-            <TouchableOpacity onPress={onPressCancelSearch}>
-              <Text>Cancel</Text>
-            </TouchableOpacity>
-          </View>
-        ) : undefined}
       </View>
 
-      <View
+      {query !== '' && (
-        style={[
+        <View style={[pal.view, pal.borderDark, styles.resultsContainer]}>
-          {backgroundColor: pal.colors.background},
+          {autocompleteView.searchRes.length ? (
-          styles.searchResultsContainer,
+            <>
-          styles.container,
+              {autocompleteView.searchRes.map((item, i) => (
-        ]}>
+                <ProfileCard
-        {query && autocompleteView.searchRes.length ? (
+                  key={item.did}
-          <>
+                  handle={item.handle}
-            {autocompleteView.searchRes.map(item => (
+                  displayName={item.displayName}
-              <ProfileCard
+                  avatar={item.avatar}
-                key={item.did}
+                  noBorder={i === 0}
-                handle={item.handle}
+                />
-                displayName={item.displayName}
+              ))}
-                avatar={item.avatar}
+            </>
-              />
+          ) : (
-            ))}
+            <View>
-          </>
+              <Text style={[pal.textLight, styles.noResults]}>
-        ) : query && !autocompleteView.searchRes.length ? (
+                No results found for {autocompleteView.prefix}
-          <View>
+              </Text>
-            <Text style={[pal.textLight, styles.searchPrompt]}>
+            </View>
-              No results found for {autocompleteView.prefix}
+          )}
-            </Text>
+        </View>
-          </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,
   },
 })