Match post text size, provide interaction feedback

src/components/ShowMore.tsx

@@ -1,13 +1,18 @@
-import {useCallback} from 'react'
+import {useCallback, useMemo} from 'react'
-import {LayoutAnimation} from 'react-native'
+import {LayoutAnimation, type TextStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {HITSLOP_10} from '#/lib/constants'
-import {atoms as a} from '#/alf'
+import {atoms as a, flatten, type TextStyleProp,useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {Button} from '#/components/Button'
+import {Text} from '#/components/Typography'
 
-export function ShowMore({onPress: onPressProp}: {onPress: () => void}) {
+export function ShowMore({
+  onPress: onPressProp,
+  style,
+}: TextStyleProp & {onPress: () => void}) {
+  const t = useTheme()
   const {_} = useLingui()
 
   const onPress = useCallback(() => {
@@ -15,17 +20,36 @@ export function ShowMore({onPress: onPressProp}: {onPress: () => void}) {
     onPressProp()
   }, [onPressProp])
 
+  const textStyle = useMemo(() => {
+    return flatten([a.leading_snug, a.text_sm, style]) as TextStyle & {
+      fontSize: number
+      lineHeight: number
+    }
+  }, [style])
+
   return (
     <Button
       label={_(msg`Expand post text`)}
       onPress={onPress}
-      color="primary"
+      style={[
-      variant="ghost"
+        a.self_start,
-      style={[a.self_start, a.my_xs, a.rounded_2xs]}
+        {
+          paddingBottom: textStyle.fontSize / 3,
+        },
+      ]}
       hitSlop={HITSLOP_10}>
-      <ButtonText>
+      {({pressed, hovered}) => (
-        <Trans>Show More</Trans>
+        <Text
-      </ButtonText>
+          style={[
+            textStyle,
+            {
+              color: t.palette.primary_500,
+              opacity: pressed || hovered ? 0.6 : 1,
+            },
+          ]}>
+          <Trans>Show More</Trans>
+        </Text>
+      )}
     </Button>
   )
 }

src/screens/PostThread/components/ThreadItemPost.tsx

@@ -300,16 +300,20 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
                 additionalCauses={additionalPostAlerts}
               />
               {richText?.text ? (
-                <RichText
+                <>
-                  enableTags
+                  <RichText
-                  value={richText}
+                    enableTags
-                  style={[a.flex_1, a.text_md]}
+                    value={richText}
-                  numberOfLines={limitLines ? MAX_POST_LINES : undefined}
+                    style={[a.flex_1, a.text_md]}
-                  authorHandle={post.author.handle}
+                    numberOfLines={limitLines ? MAX_POST_LINES : undefined}
-                  shouldProxyLinks={true}
+                    authorHandle={post.author.handle}
-                />
+                    shouldProxyLinks={true}
+                  />
+                  {limitLines && (
+                    <ShowMore style={[a.text_md]} onPress={onPressShowMore} />
+                  )}
+                </>
               ) : undefined}
-              {limitLines && <ShowMore onPress={onPressShowMore} />}
               {post.embed && (
                 <View style={[a.pb_xs]}>
                   <PostEmbeds

src/screens/PostThread/components/ThreadItemTreePost.tsx

@@ -344,7 +344,7 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
                     additionalCauses={additionalPostAlerts}
                   />
                   {richText?.text ? (
-                    <View>
+                    <>
                       <RichText
                         enableTags
                         value={richText}
@@ -353,9 +353,14 @@ const ThreadItemTreePostInner = memo(function ThreadItemTreePostInner({
                         authorHandle={post.author.handle}
                         shouldProxyLinks={true}
                       />
-                    </View>
+                      {limitLines && (
+                        <ShowMore
+                          style={[a.text_md]}
+                          onPress={onPressShowMore}
+                        />
+                      )}
+                    </>
                   ) : undefined}
-                  {limitLines && <ShowMore onPress={onPressShowMore} />}
                   {post.embed && (
                     <View style={[a.pb_xs]}>
                       <PostEmbeds

src/view/com/post-thread/PostThreadItem.tsx

@@ -686,9 +686,11 @@ let PostThreadItemLoaded = ({
                     authorHandle={post.author.handle}
                     shouldProxyLinks={true}
                   />
+                  {limitLines && (
+                    <ShowMore style={[a.text_md]} onPress={onPressShowMore} />
+                  )}
                 </View>
               ) : undefined}
-              {limitLines && <ShowMore onPress={onPressShowMore} />}
               {post.embed && (
                 <View style={[a.pb_xs]}>
                   <PostEmbeds

src/view/com/post/Post.tsx

@@ -226,7 +226,7 @@ function PostInner({
               style={[a.py_xs]}
             />
             {richText.text ? (
-              <View style={styles.postTextContainer}>
+              <View>
                 <RichText
                   enableTags
                   testID="postText"
@@ -236,9 +236,11 @@ function PostInner({
                   authorHandle={post.author.handle}
                   shouldProxyLinks={true}
                 />
+                {limitLines && (
+                  <ShowMore style={[a.text_md]} onPress={onPressShowMore} />
+                )}
               </View>
             ) : undefined}
-            {limitLines && <ShowMore onPress={onPressShowMore} />}
             {post.embed ? (
               <PostEmbeds
                 embed={post.embed}
@@ -282,12 +284,6 @@ const styles = StyleSheet.create({
   alert: {
     marginBottom: 6,
   },
-  postTextContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    overflow: 'hidden',
-  },
   replyLine: {
     position: 'absolute',
     left: 36,

src/view/com/posts/PostFeedItem.tsx

@@ -545,7 +545,7 @@ let PostContent = ({
         additionalCauses={additionalPostAlerts}
       />
       {richText.text ? (
-        <View style={styles.postTextContainer}>
+        <>
           <RichText
             enableTags
             testID="postText"
@@ -555,9 +555,11 @@ let PostContent = ({
             authorHandle={postAuthor.handle}
             shouldProxyLinks={true}
           />
-        </View>
+          {limitLines && (
+            <ShowMore style={[a.text_md]} onPress={onPressShowMore} />
+          )}
+        </>
       ) : undefined}
-      {limitLines && <ShowMore onPress={onPressShowMore} />}
       {postEmbed ? (
         <View style={[a.pb_xs]}>
           <PostEmbeds
@@ -680,13 +682,6 @@ const styles = StyleSheet.create({
     marginTop: 6,
     marginBottom: 6,
   },
-  postTextContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    paddingBottom: 2,
-    overflow: 'hidden',
-  },
   contentHiderChild: {
     marginTop: 6,
   },