Clean up module spacing and borders

(cherry picked from commit 63d19b6c2d67e226e0e14709b1047a1f88b3ce1c)
(cherry picked from commit 62d7d394ab1dc31b40b9c2cf59075adbf94737a1)

src/components/FeedCard.tsx

@@ -80,11 +80,11 @@ export function Link({
 }
 
 export function Outer({children}: {children: React.ReactNode}) {
-  return <View style={[a.w_full, a.gap_md]}>{children}</View>
+  return <View style={[a.w_full, a.gap_sm]}>{children}</View>
 }
 
 export function Header({children}: {children: React.ReactNode}) {
-  return <View style={[a.flex_row, a.align_center, a.gap_md]}>{children}</View>
+  return <View style={[a.flex_row, a.align_center, a.gap_sm]}>{children}</View>
 }
 
 export type AvatarProps = {src: string | undefined; size?: number}

src/components/ProfileCard.tsx

@@ -138,7 +138,7 @@ export function Avatar({
 
   return (
     <UserAvatar
-      size={42}
+      size={40}
       avatar={profile.avatar}
       type={profile.associated?.labeler ? 'labeler' : 'user'}
       moderation={moderation.ui('avatar')}
@@ -154,8 +154,8 @@ export function AvatarPlaceholder() {
         a.rounded_full,
         t.atoms.bg_contrast_50,
         {
-          width: 42,
+          width: 40,
-          height: 42,
+          height: 40,
         },
       ]}
     />

src/screens/Search/Explore.tsx

@@ -44,42 +44,40 @@ function LoadMore({item}: {item: ExploreScreenItems & {type: 'loadMore'}}) {
   const {_} = useLingui()
 
   return (
-    <View style={[a.pb_2xl]}>
+    <Button
-      <Button
+      label={_(msg`Load more`)}
-        label={_(msg`Load more`)}
+      onPress={item.onLoadMore}
-        onPress={item.onLoadMore}
+      style={[a.relative, a.w_full]}>
-        style={[a.relative, a.w_full]}>
+      {({hovered, pressed}) => (
-        {({hovered, pressed}) => (
+        <View
-          <View
+          style={[
+            a.flex_1,
+            a.flex_row,
+            a.align_center,
+            a.justify_center,
+            a.px_lg,
+            a.py_md,
+            a.gap_sm,
+            (hovered || pressed) && t.atoms.bg_contrast_25,
+          ]}>
+          <Text
             style={[
-              a.flex_1,
+              a.leading_snug,
-              a.flex_row,
+              hovered ? t.atoms.text : t.atoms.text_contrast_medium,
-              a.align_center,
-              a.justify_center,
-              a.px_lg,
-              a.py_md,
-              a.gap_sm,
-              (hovered || pressed) && t.atoms.bg_contrast_25,
             ]}>
-            <Text
+            {item.message}
-              style={[
+          </Text>
-                a.leading_snug,
+          {item.isLoadingMore ? (
-                hovered ? t.atoms.text : t.atoms.text_contrast_medium,
+            <Loader size="sm" />
-              ]}>
+          ) : (
-              {item.message}
+            <ChevronDownIcon
-            </Text>
+              size="sm"
-            {item.isLoadingMore ? (
+              style={hovered ? t.atoms.text : t.atoms.text_contrast_medium}
-              <Loader size="sm" />
+            />
-            ) : (
+          )}
-              <ChevronDownIcon
+        </View>
-                size="sm"
+      )}
-                style={hovered ? t.atoms.text : t.atoms.text_contrast_medium}
+    </Button>
-              />
-            )}
-          </View>
-        )}
-      </Button>
-    </View>
   )
 }
 
@@ -262,13 +260,6 @@ export function Explore({
   const items = useMemo<ExploreScreenItems[]>(() => {
     const i: ExploreScreenItems[] = []
 
-    const addTopBorder = () => {
-      i.push({
-        type: 'topBorder',
-        key: `top-border`,
-      })
-    }
-
     const addTrendingTopicsModule = () => {
       i.push({
         type: 'trendingTopics',
@@ -440,8 +431,6 @@ export function Explore({
 
     // Dynamic module ordering
 
-    addTopBorder()
-
     if (guide?.guide === 'follow-10' && !guide.isComplete) {
       addSuggestedFollowsModule()
       addTrendingTopicsModule()
@@ -500,14 +489,8 @@ export function Explore({
         }
         case 'tabbedHeader': {
           return (
-            <View
+            <View style={[a.pb_md]}>
-              style={[
+              <ModuleHeader.Container style={[a.pb_xs]}>
-                a.border_b,
-                t.atoms.border_contrast_low,
-                a.pb_md,
-                t.atoms.bg,
-              ]}>
-              <ModuleHeader.Container style={a.border_transparent}>
                 <ModuleHeader.Icon icon={item.icon} />
                 <ModuleHeader.TitleText>{item.title}</ModuleHeader.TitleText>
                 {item.searchButton && (
@@ -549,7 +532,7 @@ export function Explore({
           return (
             <View
               style={[
-                a.border_b,
+                a.border_t,
                 t.atoms.border_contrast_low,
                 a.px_lg,
                 a.py_lg,
@@ -559,7 +542,11 @@ export function Explore({
           )
         }
         case 'loadMore': {
-          return <LoadMore item={item} />
+          return (
+            <View style={[a.border_t, t.atoms.border_contrast_low, a.pb_2xl]}>
+              <LoadMore item={item} />
+            </View>
+          )
         }
         case 'profilePlaceholder': {
           return <ProfileCardFeedLoadingPlaceholder />
@@ -611,9 +598,7 @@ export function Explore({
     () =>
       items.reduce(
         (acc, curr) =>
-          ['topBorder', 'header', 'tabbedHeader'].includes(curr.type)
+          [''].includes(curr.type) ? acc.concat(items.indexOf(curr)) : acc,
-            ? acc.concat(items.indexOf(curr))
-            : acc,
         [] as number[],
       ),
     [items],

src/screens/Search/components/ModuleHeader.tsx

@@ -23,15 +23,13 @@ export function Container({
   return (
     <View
       style={[
-        t.atoms.bg,
+        gutters,
-        a.border_b,
-        t.atoms.border_contrast_low,
         a.flex_row,
         a.align_center,
-        gutters,
+        a.pt_2xl,
-        a.pt_2xs,
+        a.pb_md,
-        a.pb_sm,
         a.gap_sm,
+        t.atoms.bg,
         style,
       ]}>
       {children}
@@ -80,7 +78,12 @@ export function SearchButton({
           {statsig: true},
         )
         onPress?.()
-      }}>
+      }}
+      style={[
+        {
+          right: -4,
+        },
+      ]}>
       <ButtonIcon icon={SearchIcon} size="lg" />
     </Button>
   )

src/screens/Search/modules/ExploreSuggestedAccounts.tsx

@@ -12,7 +12,7 @@ import {
   popularInterests,
   useInterestsDisplayNames,
 } from '#/screens/Onboarding/state'
-import {useTheme} from '#/alf'
+import {useGutters,useTheme} from '#/alf'
 import {atoms as a} from '#/alf'
 import {Button} from '#/components/Button'
 import * as ProfileCard from '#/components/ProfileCard'
@@ -161,6 +161,7 @@ let SuggestedProfileCard = ({
   position: number
 }): React.ReactNode => {
   const t = useTheme()
+  const gutters = useGutters([0, 'base'])
   return (
     <ProfileCard.Link
       profile={profile}
@@ -179,9 +180,9 @@ let SuggestedProfileCard = ({
       <View
         style={[
           a.w_full,
-          a.py_md,
+          gutters,
-          a.px_lg,
+          a.py_lg,
-          a.border_b,
+          a.border_t,
           t.atoms.border_contrast_low,
           a.flex_1,
         ]}>
@@ -214,7 +215,7 @@ let SuggestedProfileCard = ({
               }}
             />
           </ProfileCard.Header>
-          <ProfileCard.Description profile={profile} numberOfLines={3} />
+          <ProfileCard.Description profile={profile} numberOfLines={2} />
         </ProfileCard.Outer>
       </View>
     </ProfileCard.Link>