diff options
Diffstat (limited to 'src/view/com/posts/FeedItem.tsx')
| -rw-r--r-- | src/view/com/posts/FeedItem.tsx | 69 |
1 files changed, 37 insertions, 32 deletions
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index f456fbab8..6cd374d8c 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -16,8 +16,10 @@ import {PostEmbeds} from '../util/PostEmbeds' import {RichText} from '../util/text/RichText' import * as Toast from '../util/Toast' import {UserAvatar} from '../util/UserAvatar' -import {s, colors} from '../../lib/styles' +import {s, colors, lh} from '../../lib/styles' import {useStores} from '../../../state' +import {useTheme} from '../../lib/ThemeContext' +import {usePalette} from '../../lib/hooks/usePalette' export const FeedItem = observer(function ({ item, @@ -27,6 +29,8 @@ export const FeedItem = observer(function ({ showReplyLine?: boolean }) { const store = useStores() + const theme = useTheme() + const pal = usePalette('default') const [deleted, setDeleted] = useState(false) const record = item.post.record as unknown as AppBskyFeedPost.Record const itemHref = useMemo(() => { @@ -96,6 +100,8 @@ export const FeedItem = observer(function ({ const isNoTop = isChild && !item._isThreadChild const outerStyles = [ styles.outer, + pal.view, + {borderTopColor: pal.colors.border}, isSmallTop ? styles.outerSmallTop : undefined, isNoTop ? styles.outerNoTop : undefined, item._isThreadParent ? styles.outerNoBottom : undefined, @@ -106,10 +112,21 @@ export const FeedItem = observer(function ({ <FeedItem item={item.replyParent} showReplyLine /> ) : undefined} <Link style={outerStyles} href={itemHref} title={itemTitle} noFeedback> - {item._isThreadChild && <View style={[styles.topReplyLine]} />} + {item._isThreadChild && ( + <View + style={[ + styles.topReplyLine, + {borderLeftColor: pal.colors.replyLine}, + ]} + /> + )} {(showReplyLine || item._isThreadParent) && ( <View - style={[styles.bottomReplyLine, isNoTop ? {top: 64} : undefined]} + style={[ + styles.bottomReplyLine, + {borderLeftColor: pal.colors.replyLine}, + isNoTop ? {top: 64} : undefined, + ]} /> )} {item.reasonRepost && ( @@ -120,7 +137,7 @@ export const FeedItem = observer(function ({ item.reasonRepost.by.displayName || item.reasonRepost.by.handle }> <FontAwesomeIcon icon="retweet" style={styles.includeReasonIcon} /> - <Text style={[s.gray4, s.bold, s.f13]}> + <Text type="overline2" style={{color: pal.colors.actionLabel}}> Reposted by{' '} {item.reasonRepost.by.displayName || item.reasonRepost.by.handle} </Text> @@ -137,7 +154,7 @@ export const FeedItem = observer(function ({ icon="arrow-trend-up" style={styles.includeReasonIcon} /> - <Text style={[s.gray4, s.bold, s.f13]}> + <Text type="overline2" style={{color: pal.colors.actionLabel}}> Trending with{' '} {item.reasonTrend.by.displayName || item.reasonTrend.by.handle} </Text> @@ -171,13 +188,16 @@ export const FeedItem = observer(function ({ <FontAwesomeIcon icon="reply" size={9} - style={[s.gray4, s.mr5]} + style={[{color: pal.colors.text}, s.mr5]} /> - <Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text> + <Text type="caption" style={[pal.textLight, s.mr2]}> + Reply to + </Text> <Link href={replyHref} title="Parent post"> <UserInfoText + type="caption" did={replyAuthorDid} - style={[s.f12, s.gray5]} + style={[pal.textLight]} prefix="@" /> </Link> @@ -186,9 +206,9 @@ export const FeedItem = observer(function ({ {record.text ? ( <View style={styles.postTextContainer}> <RichText + type="body1" text={record.text} entities={record.entities} - style={styles.postText} /> </View> ) : ( @@ -210,7 +230,7 @@ export const FeedItem = observer(function ({ </Link> {item._isThreadChildElided ? ( <Link - style={styles.viewFullThread} + style={[pal.view, styles.viewFullThread]} href={itemHref} title={itemTitle} noFeedback> @@ -221,15 +241,17 @@ export const FeedItem = observer(function ({ y1="0" x2="2" y2="5" - stroke={colors.gray2} + stroke={pal.colors.replyLine} strokeWidth="2" /> - <Circle x="2" y="10" r="1.5" fill={colors.gray3} /> - <Circle x="2" y="16" r="1.5" fill={colors.gray3} /> - <Circle x="2" y="22" r="1.5" fill={colors.gray3} /> + <Circle x="2" y="10" r="1.5" fill={pal.colors.replyLineDot} /> + <Circle x="2" y="16" r="1.5" fill={pal.colors.replyLineDot} /> + <Circle x="2" y="22" r="1.5" fill={pal.colors.replyLineDot} /> </Svg> </View> - <Text style={styles.viewFullThreadText}>View full thread</Text> + <Text style={[pal.link, theme.typography.body2]}> + View full thread + </Text> </Link> ) : undefined} </> @@ -239,15 +261,11 @@ export const FeedItem = observer(function ({ const styles = StyleSheet.create({ outer: { borderTopWidth: 1, - borderTopColor: colors.gray2, - backgroundColor: colors.white, padding: 10, }, outerNoTop: { borderTopWidth: 0, paddingTop: 0, - borderTopLeftRadius: 0, - borderTopRightRadius: 0, }, outerSmallTop: { borderTopWidth: 0, @@ -262,7 +280,6 @@ const styles = StyleSheet.create({ top: 0, height: 6, borderLeftWidth: 2, - borderLeftColor: colors.gray2, }, bottomReplyLine: { position: 'absolute', @@ -270,7 +287,6 @@ const styles = StyleSheet.create({ top: 72, bottom: 0, borderLeftWidth: 2, - borderLeftColor: colors.gray2, }, includeReason: { flexDirection: 'row', @@ -296,17 +312,10 @@ const styles = StyleSheet.create({ flexWrap: 'wrap', paddingBottom: 8, }, - postText: { - fontFamily: 'System', - fontSize: 16, - lineHeight: 20.8, // 1.3 of 16px - color: colors.black, - }, postEmbeds: { marginBottom: 10, }, viewFullThread: { - backgroundColor: colors.white, paddingTop: 12, paddingBottom: 2, paddingLeft: 70, @@ -316,8 +325,4 @@ const styles = StyleSheet.create({ left: 33, top: 0, }, - viewFullThreadText: { - color: colors.blue3, - fontSize: 16, - }, }) |