Restore expanded post styles (#11668)

Co-authored-by: Eric Bailey <git@esb.lol>
(cherry picked from commit ee32926ed5)

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
-      <Link
+      to={likesHref}
-        to={likesHref}
+      label={rowLabel}
-        label={rowLabel}
+      style={[
-        style={[a.flex_row, a.align_center, a.gap_xs, a.flex_shrink]}
+        a.w_full,
-        onPress={() => ax.metric('post:likedBy:click', {})}>
+        a.flex_row,
-        <AvatarStack
+        a.align_center,
-          profiles={aviStackProfiles}
+        a.gap_xs,
-          size={16}
+        a.flex_shrink,
-          overlap={4}
+        outerStyle,
-          borderWidth={0.5}
+      ]}
-          backgroundColor={t.atoms.bg_contrast_25.backgroundColor}
+      onPress={() => ax.metric('post:likedBy:click', {})}>
-        />
+      <AvatarStack
-        <Text testID="knownLikersStat" style={[a.flex_shrink, textStyle]}>
+        profiles={aviStackProfiles}
-          {names.length >= 2 ? (
+        size={16}
-            <Trans comment="Social proof below a post; the bolded names are people the viewer follows who liked the post">
+        overlap={4}
-              Liked by {nameLink(names[0])} and {nameLink(names[1])}
+        borderWidth={0.5}
-            </Trans>
+        backgroundColor={t.atoms.bg_contrast_25.backgroundColor}
-          ) : (
+      />
-            <Trans comment="Social proof below a post; the bolded name is a person the viewer follows who liked the post">
+      <Text testID="knownLikersStat" style={[a.flex_shrink, textStyle]}>
-              Liked by {nameLink(names[0])}
+        {names.length >= 2 ? (
-            </Trans>
+          <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])}
-        </Text>
+          </Trans>
-      </Link>
+        ) : (
-    </View>
+          <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}

src/screens/PostThread/components/LikesStat.tsx

@@ -32,9 +32,9 @@ export function LikesStat({post}: {post: app.bsky.feed.defs.PostView}) {
       onPress={() => ax.metric('post:likedBy:click', {})}>
       <Text
         testID="likeCount-expanded"
-        style={[a.text_sm, t.atoms.text_contrast_high]}>
+        style={[a.text_md, t.atoms.text_contrast_medium]}>
         <Trans comment="Like count display, the <0> tags enclose the number of likes in bold (will never be 0)">
-          <Text style={[a.text_sm, a.font_semi_bold, t.atoms.text]}>
+          <Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
             {formatPostStatCount(likeCount)}
           </Text>{' '}
           <Plural value={likeCount} one="like" other="likes" />

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -453,17 +453,17 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
                   },
                   a.border_t,
                   a.mt_md,
-                  a.py_md,
+                  a.py_sm,
                   t.atoms.border_contrast_low,
                 ]}>
                 {post.repostCount != null && post.repostCount !== 0 ? (
                   <Link to={repostsHref} label={l`Reposts of this post`}>
                     <Text
                       testID="repostCount-expanded"
-                      style={[a.text_sm, t.atoms.text_contrast_high]}>
+                      style={[a.text_md, t.atoms.text_contrast_medium]}>
                       <Trans comment="Repost count display, the <0> tags enclose the number of reposts in bold (will never be 0)">
                         <Text
-                          style={[a.text_sm, a.font_semi_bold, t.atoms.text]}>
+                          style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
                           {formatPostStatCount(post.repostCount)}
                         </Text>{' '}
                         <Plural
@@ -481,10 +481,10 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
                   <Link to={quotesHref} label={l`Quotes of this post`}>
                     <Text
                       testID="quoteCount-expanded"
-                      style={[a.text_sm, t.atoms.text_contrast_high]}>
+                      style={[a.text_md, t.atoms.text_contrast_medium]}>
                       <Trans comment="Quote count display, the <0> tags enclose the number of quotes in bold (will never be 0)">
                         <Text
-                          style={[a.text_sm, a.font_semi_bold, t.atoms.text]}>
+                          style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
                           {formatPostStatCount(post.quoteCount)}
                         </Text>{' '}
                         <Plural
@@ -500,9 +500,9 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
                 {post.bookmarkCount != null && post.bookmarkCount !== 0 ? (
                   <Text
                     testID="bookmarkCount-expanded"
-                    style={[a.text_sm, t.atoms.text_contrast_high]}>
+                    style={[a.text_md, t.atoms.text_contrast_medium]}>
                     <Trans comment="Save count display, the <0> tags enclose the number of saves in bold (will never be 0)">
-                      <Text style={[a.text_sm, a.font_semi_bold, t.atoms.text]}>
+                      <Text style={[a.text_md, a.font_semi_bold, t.atoms.text]}>
                         {formatPostStatCount(post.bookmarkCount)}
                       </Text>{' '}
                       <Plural
@@ -518,10 +518,10 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
             <KnownLikers
               post={post}
               feature={Features.PostThreadKnownLikersEnable}
+              outerStyle={[a.pt_xs, a.pb_sm]}
             />
             <View
               style={[
-                a.pt_sm,
                 a.pb_2xs,
                 {
                   marginLeft: -5,
@@ -565,7 +565,7 @@ function ExpandedPostDetails({
     <View style={[a.gap_md, a.pt_md, a.align_start]}>
       <BackdatedPostIndicator post={post} />
       <View style={[a.flex_row, a.align_center, a.flex_wrap, a.gap_sm]}>
-        <Text style={[a.text_xs, t.atoms.text_contrast_high]}>
+        <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
           {niceDate(i18n, post.indexedAt, 'dot separated')}
         </Text>
         {isRootPost && (

src/view/com/posts/PostFeedItem.tsx

@@ -460,7 +460,7 @@ let FeedItemInner = ({
             <KnownLikers
               post={post}
               feature={Features.PostFeedKnownLikersEnable}
-              variant="feed"
+              outerStyle={[a.py_sm]}
             />
           </View>