[Explore] Design tweaks (#8131)

* Fix interests card spacing

* Space out AvatarStack

* SP icon size

* Visual alignment of tab bar and headers

* Tweak spacing around search input

* Drop text size in sp card overflow count

* Tweak

src/screens/Search/Explore.tsx

@@ -45,6 +45,7 @@ import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {type Props as IcoProps} from '#/components/icons/common'
 import {type Props as SVGIconProps} from '#/components/icons/common'
 import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
 import {StarterPack} from '#/components/icons/StarterPack'
@@ -110,6 +111,7 @@ type ExploreScreenItems =
       key: string
       title: string
       icon: React.ComponentType<SVGIconProps>
+      iconSize?: IcoProps['size']
       searchButton?: {
         label: string
         metricsTag: MetricEvents['explore:module:searchButtonPress']['module']
@@ -461,6 +463,7 @@ export function Explore({
       key: 'suggested-starterPacks-header',
       title: _(msg`Starter Packs`),
       icon: StarterPack,
+      iconSize: 'xl',
     })
 
     if (isLoadingSuggestedSPs) {
@@ -562,7 +565,7 @@ export function Explore({
         case 'header': {
           return (
             <ModuleHeader.Container>
-              <ModuleHeader.Icon icon={item.icon} />
+              <ModuleHeader.Icon icon={item.icon} size={item.iconSize} />
               <ModuleHeader.TitleText>{item.title}</ModuleHeader.TitleText>
               {item.searchButton && (
                 <ModuleHeader.SearchButton

src/screens/Search/Shell.tsx

@@ -318,7 +318,7 @@ export function SearchScreenShell({
               </Layout.Header.Outer>
             </View>
           )}
-          <View style={[a.px_md, a.pt_sm, a.pb_sm, a.overflow_hidden]}>
+          <View style={[a.px_lg, a.pt_sm, a.pb_sm, a.overflow_hidden]}>
             <View style={[a.gap_sm]}>
               <View style={[a.w_full, a.flex_row, a.align_stretch, a.gap_xs]}>
                 <View style={[a.flex_1]}>

src/screens/Search/components/ModuleHeader.tsx

@@ -6,14 +6,7 @@ import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {makeCustomFeedLink} from '#/lib/routes/links'
 import {logger} from '#/logger'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {
-  atoms as a,
-  native,
-  useGutters,
-  useTheme,
-  type ViewStyleProp,
-  web,
-} from '#/alf'
+import {atoms as a, native, useTheme, type ViewStyleProp, web} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {sizes as iconSizes} from '#/components/icons/common'
@@ -27,13 +20,12 @@ export function Container({
   headerHeight,
 }: {children: React.ReactNode; headerHeight?: number} & ViewStyleProp) {
   const t = useTheme()
-  const gutters = useGutters([0, 'base'])
   return (
     <View
       style={[
-        gutters,
         a.flex_row,
         a.align_center,
+        a.px_lg,
         a.pt_2xl,
         a.pb_md,
         a.gap_sm,

src/screens/Search/components/StarterPackCard.tsx

@@ -234,7 +234,7 @@ export function AvatarStack({
               {computedTotal > 0 ? (
                 <Text
                   style={[
-                    gtPhone ? a.text_md : a.text_sm,
+                    gtPhone ? a.text_md : a.text_xs,
                     a.font_bold,
                     a.leading_snug,
                     {color: 'white'},

src/screens/Search/modules/ExploreInterestsCard.tsx

@@ -6,7 +6,7 @@ import {useLingui} from '@lingui/react'
 import {Nux, useSaveNux} from '#/state/queries/nuxs'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {useInterestsDisplayNames} from '#/screens/Onboarding/state'
-import {atoms as a, useGutters, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Link} from '#/components/Link'
@@ -16,7 +16,6 @@ import {Text} from '#/components/Typography'
 export function ExploreInterestsCard() {
   const t = useTheme()
   const {_} = useLingui()
-  const gutters = useGutters([0, 'base'])
   const {data: preferences} = usePreferencesQuery()
   const interestsDisplayNames = useInterestsDisplayNames()
   const {mutateAsync: saveNux} = useSaveNux()
@@ -53,7 +52,7 @@ export function ExploreInterestsCard() {
         onConfirm={onConfirmClose}
       />
 
-      <View style={[gutters, a.pt_lg, a.pb_2xs]}>
+      <View style={[a.p_lg, a.pb_2xs]}>
         <View
           style={[
             a.p_lg,

src/screens/Search/modules/ExploreSuggestedAccounts.tsx

@@ -87,6 +87,12 @@ export function SuggestedAccountsTabBar({
           ...interestsDisplayNames,
         }}
         TabComponent={Tab}
+        contentContainerStyle={[
+          {
+            // visual alignment
+            paddingLeft: a.px_md.paddingLeft,
+          },
+        ]}
       />
     </BlockDrawerGesture>
   )