Restore expanded post styles (#11668)

Co-authored-by: Eric Bailey <git@esb.lol>

src/components/Post/KnownLikers.tsx

@@ -1,4 +1,5 @@
-import {View} from 'react-native'
+import {type ViewStyle} from 'react-native'
+import {StyleProp} from 'react-native'
 import {AtUri} from '@atproto/syntax'
 import {moderateProfile} from '@bsky/sdk/moderation'
 import {Trans, useLingui} from '@lingui/react/macro'
@@ -22,11 +23,11 @@ import {type app} from '#/lexicons'
 export function KnownLikers({
   post,
   feature,
-  variant = 'thread',
+  outerStyle,
 }: {
   post: app.bsky.feed.defs.PostView
   feature: Features
-  variant?: 'feed' | 'thread'
+  outerStyle?: StyleProp<ViewStyle>
 }) {
   const t = useTheme()
   const {t: l} = useLingui()
@@ -61,7 +62,6 @@ export function KnownLikers({
         moderation.ui('displayName'),
       ),
     }))
-  const isFeed = variant === 'feed'
   const rowLabel =
     names.length >= 2
       ? l`Liked by ${names[0].displayName} and ${names[1].displayName}`
@@ -83,31 +83,36 @@ export function KnownLikers({
   )
 
   return (
-    <View style={[a.w_full, a.flex_row, isFeed && a.mt_sm]}>
-      <Link
-        to={likesHref}
-        label={rowLabel}
-        style={[a.flex_row, a.align_center, a.gap_xs, a.flex_shrink]}
-        onPress={() => ax.metric('post:likedBy:click', {})}>
-        <AvatarStack
-          profiles={aviStackProfiles}
-          size={16}
-          overlap={4}
-          borderWidth={0.5}
-          backgroundColor={t.atoms.bg_contrast_25.backgroundColor}
-        />
-        <Text testID="knownLikersStat" style={[a.flex_shrink, textStyle]}>
-          {names.length >= 2 ? (
-            <Trans comment="Social proof below a post; the bolded names are people the viewer follows who liked the post">
-              Liked by {nameLink(names[0])} and {nameLink(names[1])}
-            </Trans>
-          ) : (
-            <Trans comment="Social proof below a post; the bolded name is a person the viewer follows who liked the post">
-              Liked by {nameLink(names[0])}
-            </Trans>
-          )}
-        </Text>
-      </Link>
-    </View>
+    <Link
+      to={likesHref}
+      label={rowLabel}
+      style={[
+        a.w_full,
+        a.flex_row,
+        a.align_center,
+        a.gap_xs,
+        a.flex_shrink,
+        outerStyle,
+      ]}
+      onPress={() => ax.metric('post:likedBy:click', {})}>
+      <AvatarStack
+        profiles={aviStackProfiles}
+        size={16}
+        overlap={4}
+        borderWidth={0.5}
+        backgroundColor={t.atoms.bg_contrast_25.backgroundColor}
+      />
+      <Text testID="knownLikersStat" style={[a.flex_shrink, textStyle]}>
+        {names.length >= 2 ? (
+          <Trans comment="Social proof below a post; the bolded names are people the viewer follows who liked the post">
+            Liked by {nameLink(names[0])} and {nameLink(names[1])}
+          </Trans>
+        ) : (
+          <Trans comment="Social proof below a post; the bolded name is a person the viewer follows who liked the post">
+            Liked by {nameLink(names[0])}
+          </Trans>
+        )}
+      </Text>
+    </Link>
   )
 }

src/components/WhoCanReply.tsx

@@ -114,7 +114,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
             style={[
               a.flex_row,
               a.align_center,
-              {gap: 3},
+              a.gap_xs,
               (hovered || focused || pressed) && native({opacity: 0.5}),
               style,
             ]}>
@@ -122,16 +122,16 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
               color={
                 isThreadAuthor ? t.palette.primary_500 : t.palette.contrast_400
               }
-              width={12}
+              width={16}
               settings={settings}
             />
             <Text
               style={[
-                a.text_xs,
+                a.text_sm,
                 a.leading_tight,
                 isThreadAuthor
                   ? {color: t.palette.primary_500}
-                  : t.atoms.text_contrast_high,
+                  : t.atoms.text_contrast_medium,
                 (hovered || focused || pressed) && web(a.underline),
               ]}>
               {description}