Improve styles (#4916)

Co-authored-by: Hailey <me@haileyok.com>

src/view/shell/Drawer.tsx

@@ -33,6 +33,7 @@ import {NavSignupCard} from '#/view/shell/NavSignupCard'
 import {formatCountShortOnly} from 'view/com/util/numeric/format'
 import {Text} from 'view/com/util/text/Text'
 import {UserAvatar} from 'view/com/util/UserAvatar'
+import {atoms as a} from '#/alf'
 import {useTheme as useAlfTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {
@@ -96,29 +97,42 @@ let DrawerProfileCard = ({
         numberOfLines={1}>
         @{account.handle}
       </Text>
-      <Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
-        <Trans>
-          <Text type="xl-medium" style={pal.text}>
-            {formatCountShortOnly(profile?.followersCount ?? 0)}
-          </Text>{' '}
-          <Plural
-            value={profile?.followersCount || 0}
-            one="follower"
-            other="followers"
-          />
-        </Trans>{' '}
-        &middot;{' '}
-        <Trans>
-          <Text type="xl-medium" style={pal.text}>
-            {formatCountShortOnly(profile?.followsCount ?? 0)}
-          </Text>{' '}
-          <Plural
-            value={profile?.followsCount || 0}
-            one="following"
-            other="following"
-          />
-        </Trans>
-      </Text>
+      <View
+        style={[
+          styles.profileCardFollowers,
+          a.gap_xs,
+          a.flex_row,
+          a.align_center,
+          a.flex_wrap,
+        ]}>
+        <Text type="xl" style={pal.textLight}>
+          <Trans>
+            <Text type="xl-medium" style={pal.text}>
+              {formatCountShortOnly(profile?.followersCount ?? 0)}
+            </Text>{' '}
+            <Plural
+              value={profile?.followersCount || 0}
+              one="follower"
+              other="followers"
+            />
+          </Trans>
+        </Text>
+        <Text type="xl" style={pal.textLight}>
+          &middot;
+        </Text>
+        <Text type="xl" style={pal.textLight}>
+          <Trans>
+            <Text type="xl-medium" style={pal.text}>
+              {formatCountShortOnly(profile?.followsCount ?? 0)}
+            </Text>{' '}
+            <Plural
+              value={profile?.followsCount || 0}
+              one="following"
+              other="following"
+            />
+          </Trans>
+        </Text>
+      </View>
     </TouchableOpacity>
   )
 }
@@ -610,7 +624,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#1B1919',
   },
   main: {
-    paddingLeft: 20,
+    paddingHorizontal: 20,
     paddingTop: 20,
   },
   smallSpacer: {
@@ -627,14 +641,12 @@ const styles = StyleSheet.create({
   },
   profileCardFollowers: {
     marginTop: 16,
-    paddingRight: 10,
   },
 
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: 16,
-    paddingRight: 10,
   },
   menuItemIconWrapper: {
     width: 24,

src/view/shell/desktop/RightNav.tsx

@@ -11,6 +11,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {s} from 'lib/styles'
 import {TextLink} from 'view/com/util/Link'
 import {Text} from 'view/com/util/text/Text'
+import {atoms as a} from '#/alf'
 import {ProgressGuideList} from '#/components/ProgressGuide/List'
 import {DesktopFeeds} from './Feeds'
 import {DesktopSearch} from './Search'
@@ -56,7 +57,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               paddingTop: hasSession ? 0 : 18,
             },
           ]}>
-          <View style={[{flexWrap: 'wrap'}, s.flexRow]}>
+          <View style={[{flexWrap: 'wrap'}, s.flexRow, a.gap_xs]}>
             {hasSession && (
               <>
                 <TextLink
@@ -69,7 +70,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
                   text={_(msg`Feedback`)}
                 />
                 <Text type="md" style={pal.textLight}>
-                  &nbsp;&middot;&nbsp;
+                  &middot;
                 </Text>
               </>
             )}
@@ -80,7 +81,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               text={_(msg`Privacy`)}
             />
             <Text type="md" style={pal.textLight}>
-              &nbsp;&middot;&nbsp;
+              &middot;
             </Text>
             <TextLink
               type="md"
@@ -89,7 +90,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               text={_(msg`Terms`)}
             />
             <Text type="md" style={pal.textLight}>
-              &nbsp;&middot;&nbsp;
+              &middot;
             </Text>
             <TextLink
               type="md"

src/view/shell/desktop/Search.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {
   ActivityIndicator,
   StyleSheet,
-  TextInput,
   TouchableOpacity,
   View,
   ViewStyle,
@@ -12,7 +11,7 @@ import {
   moderateProfile,
   ModerationDecision,
 } from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {StackActions, useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
@@ -24,11 +23,11 @@ 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 {NavigationProp} from 'lib/routes/types'
 import {precacheProfile} from 'state/queries/profile'
 import {Link} from '#/view/com/util/Link'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {SearchInput} from 'view/com/util/forms/SearchInput'
 import {Text} from 'view/com/util/text/Text'
 import {atoms as a} from '#/alf'
 
@@ -183,47 +182,12 @@ export function DesktopSearch() {
 
   return (
     <View style={[styles.container, pal.view]}>
-      <View
-        style={[{backgroundColor: pal.colors.backgroundLight}, styles.search]}>
-        <View style={[styles.inputContainer]}>
-          <MagnifyingGlassIcon2
-            size={18}
-            style={[pal.textLight, styles.iconWrapper]}
-          />
-          <TextInput
-            testID="searchTextInput"
-            placeholder={_(msg`Search`)}
-            placeholderTextColor={pal.colors.textLight}
-            selectTextOnFocus
-            returnKeyType="search"
-            value={query}
-            style={[pal.textLight, styles.input]}
-            onChangeText={onChangeText}
-            onSubmitEditing={onSubmit}
-            accessibilityRole="search"
-            accessibilityLabel={_(msg`Search`)}
-            accessibilityHint=""
-            autoCorrect={false}
-            autoComplete="off"
-            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]}>
-                  <Trans>Cancel</Trans>
-                </Text>
-              </TouchableOpacity>
-            </View>
-          ) : undefined}
-        </View>
-      </View>
-
+      <SearchInput
+        query={query}
+        onChangeQuery={onChangeText}
+        onPressCancelSearch={onPressCancelSearch}
+        onSubmitQuery={onSubmit}
+      />
       {query !== '' && isActive && moderationOpts && (
         <View style={[pal.view, pal.borderDark, styles.resultsContainer]}>
           {isFetching && !autocompleteData?.length ? (
@@ -262,33 +226,6 @@ const styles = StyleSheet.create({
     position: 'relative',
     width: 300,
   },
-  search: {
-    paddingHorizontal: 16,
-    paddingVertical: 2,
-    width: 300,
-    borderRadius: 20,
-  },
-  inputContainer: {
-    flexDirection: 'row',
-  },
-  iconWrapper: {
-    position: 'relative',
-    top: 2,
-    paddingVertical: 7,
-    marginRight: 8,
-  },
-  input: {
-    flex: 1,
-    fontSize: 18,
-    width: '100%',
-    paddingTop: 7,
-    paddingBottom: 7,
-  },
-  cancelBtn: {
-    paddingRight: 4,
-    paddingLeft: 10,
-    paddingVertical: 7,
-  },
   resultsContainer: {
     marginTop: 10,
     flexDirection: 'column',
@@ -296,8 +233,4 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 6,
   },
-  noResults: {
-    textAlign: 'center',
-    paddingVertical: 10,
-  },
 })