Refer to upvotes as 'likes' in the UI (will change in the protocol soon)
parent
ee8d311795
commit
798622b307
|
@ -8,7 +8,7 @@ import {NotificationsViewItemModel} from '../../../state/models/notifications-vi
|
|||
import {PostThreadViewModel} from '../../../state/models/post-thread-view'
|
||||
import {s, colors} from '../../lib/styles'
|
||||
import {ago, pluralize} from '../../../lib/strings'
|
||||
import {UpIconSolid} from '../../lib/icons'
|
||||
import {HeartIconSolid} from '../../lib/icons'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {UserAvatar} from '../util/UserAvatar'
|
||||
import {ImageHorzList} from '../util/images/ImageHorzList'
|
||||
|
@ -72,11 +72,11 @@ export const FeedItem = observer(function FeedItem({
|
|||
}
|
||||
|
||||
let action = ''
|
||||
let icon: Props['icon'] | 'UpIconSolid'
|
||||
let icon: Props['icon'] | 'HeartIconSolid'
|
||||
let iconStyle: Props['style'] = []
|
||||
if (item.isUpvote) {
|
||||
action = 'upvoted your post'
|
||||
icon = 'UpIconSolid'
|
||||
action = 'liked your post'
|
||||
icon = 'HeartIconSolid'
|
||||
iconStyle = [s.red3, {position: 'relative', top: -4}]
|
||||
} else if (item.isRepost) {
|
||||
action = 'reposted your post'
|
||||
|
@ -132,8 +132,8 @@ export const FeedItem = observer(function FeedItem({
|
|||
noFeedback>
|
||||
<View style={styles.layout}>
|
||||
<View style={styles.layoutIcon}>
|
||||
{icon === 'UpIconSolid' ? (
|
||||
<UpIconSolid size={26} style={[styles.icon, ...iconStyle]} />
|
||||
{icon === 'HeartIconSolid' ? (
|
||||
<HeartIconSolid size={26} style={[styles.icon, ...iconStyle]} />
|
||||
) : (
|
||||
<FontAwesomeIcon
|
||||
icon={icon}
|
||||
|
|
|
@ -47,7 +47,7 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
const urip = new AtUri(item.post.uri)
|
||||
return `/profile/${item.post.author.handle}/post/${urip.rkey}/upvoted-by`
|
||||
}, [item.post.uri, item.post.author.handle])
|
||||
const upvotesTitle = 'Upvotes on this post'
|
||||
const upvotesTitle = 'Likes on this post'
|
||||
const repostsHref = useMemo(() => {
|
||||
const urip = new AtUri(item.post.uri)
|
||||
return `/profile/${item.post.author.handle}/post/${urip.rkey}/reposted-by`
|
||||
|
@ -209,7 +209,7 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
<Text type="h5" style={pal.text}>
|
||||
{item.post.upvoteCount}
|
||||
</Text>{' '}
|
||||
{pluralize(item.post.upvoteCount, 'upvote')}
|
||||
{pluralize(item.post.upvoteCount, 'like')}
|
||||
</Text>
|
||||
</Link>
|
||||
) : (
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native'
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
||||
import {UpIcon} from '../../lib/icons'
|
||||
import {HeartIcon} from '../../lib/icons'
|
||||
import {s} from '../../lib/styles'
|
||||
import {useTheme} from '../../lib/ThemeContext'
|
||||
import {usePalette} from '../../lib/hooks/usePalette'
|
||||
|
@ -70,7 +70,7 @@ export function PostLoadingPlaceholder({
|
|||
/>
|
||||
</View>
|
||||
<View style={s.flex1}>
|
||||
<UpIcon
|
||||
<HeartIcon
|
||||
style={{color: theme.palette.default.icon}}
|
||||
size={17}
|
||||
strokeWidth={1.7}
|
||||
|
|
|
@ -11,7 +11,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|||
import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
|
||||
import {Text} from './text/Text'
|
||||
import {PostDropdownBtn} from './forms/DropdownButton'
|
||||
import {UpIcon, UpIconSolid, CommentBottomArrow} from '../../lib/icons'
|
||||
import {HeartIcon, HeartIconSolid, CommentBottomArrow} from '../../lib/icons'
|
||||
import {s, colors} from '../../lib/styles'
|
||||
import {useTheme} from '../../lib/ThemeContext'
|
||||
import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
|
||||
|
@ -123,7 +123,10 @@ export function PostCtrls(opts: PostCtrlsOpts) {
|
|||
hitSlop={HITSLOP}
|
||||
onPress={opts.onPressReply}>
|
||||
<CommentBottomArrow
|
||||
style={defaultCtrlColor}
|
||||
style={[
|
||||
defaultCtrlColor,
|
||||
opts.big ? {marginTop: 2} : {marginTop: 1},
|
||||
]}
|
||||
strokeWidth={3}
|
||||
size={opts.big ? 20 : 15}
|
||||
/>
|
||||
|
@ -167,15 +170,18 @@ export function PostCtrls(opts: PostCtrlsOpts) {
|
|||
onPress={onPressToggleUpvoteWrapper}>
|
||||
<Animated.View style={anim2Style}>
|
||||
{opts.isUpvoted ? (
|
||||
<UpIconSolid
|
||||
<HeartIconSolid
|
||||
style={[styles.ctrlIconUpvoted]}
|
||||
size={opts.big ? 22 : 19}
|
||||
size={opts.big ? 22 : 16}
|
||||
/>
|
||||
) : (
|
||||
<UpIcon
|
||||
style={defaultCtrlColor}
|
||||
size={opts.big ? 22 : 19}
|
||||
strokeWidth={1.5}
|
||||
<HeartIcon
|
||||
style={[
|
||||
defaultCtrlColor,
|
||||
opts.big ? {marginTop: 1} : undefined,
|
||||
]}
|
||||
strokeWidth={3}
|
||||
size={opts.big ? 20 : 16}
|
||||
/>
|
||||
)}
|
||||
</Animated.View>
|
||||
|
|
|
@ -225,6 +225,48 @@ export function UserGroupIcon({
|
|||
)
|
||||
}
|
||||
|
||||
// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
|
||||
export function HeartIcon({
|
||||
style,
|
||||
size = 24,
|
||||
strokeWidth = 1.5,
|
||||
}: {
|
||||
style?: StyleProp<ViewStyle>
|
||||
size?: string | number
|
||||
strokeWidth: number
|
||||
}) {
|
||||
return (
|
||||
<Svg viewBox="0 0 24 24" width={size} height={size} style={style}>
|
||||
<Path
|
||||
strokeWidth={strokeWidth}
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
d="M 3.859 13.537 L 10.918 20.127 C 11.211 20.4 11.598 20.552 12 20.552 C 12.402 20.552 12.789 20.4 13.082 20.127 L 20.141 13.537 C 21.328 12.431 22 10.88 22 9.259 L 22 9.033 C 22 6.302 20.027 3.974 17.336 3.525 C 15.555 3.228 13.742 3.81 12.469 5.084 L 12 5.552 L 11.531 5.084 C 10.258 3.81 8.445 3.228 6.664 3.525 C 3.973 3.974 2 6.302 2 9.033 L 2 9.259 C 2 10.88 2.672 12.431 3.859 13.537 Z"
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
||||
// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
|
||||
export function HeartIconSolid({
|
||||
style,
|
||||
size = 24,
|
||||
}: {
|
||||
style?: StyleProp<ViewStyle>
|
||||
size?: string | number
|
||||
}) {
|
||||
return (
|
||||
<Svg viewBox="0 0 24 24" width={size} height={size} style={style}>
|
||||
<Path
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1}
|
||||
d="M 3.859 13.537 L 10.918 20.127 C 11.211 20.4 11.598 20.552 12 20.552 C 12.402 20.552 12.789 20.4 13.082 20.127 L 20.141 13.537 C 21.328 12.431 22 10.88 22 9.259 L 22 9.033 C 22 6.302 20.027 3.974 17.336 3.525 C 15.555 3.228 13.742 3.81 12.469 5.084 L 12 5.552 L 11.531 5.084 C 10.258 3.81 8.445 3.228 6.664 3.525 C 3.973 3.974 2 6.302 2 9.033 L 2 9.259 C 2 10.88 2.672 12.431 3.859 13.537 Z"
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function UpIcon({
|
||||
style,
|
||||
size,
|
||||
|
|
|
@ -55,7 +55,7 @@ export const routes: Route[] = [
|
|||
],
|
||||
[
|
||||
PostUpvotedBy,
|
||||
'Upvoted by',
|
||||
'Liked by',
|
||||
'heart',
|
||||
r('/profile/(?<name>[^/]+)/post/(?<rkey>[^/]+)/upvoted-by'),
|
||||
],
|
||||
|
|
|
@ -13,13 +13,13 @@ export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
|
|||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
store.nav.setTitle(navIdx, 'Upvoted by')
|
||||
store.nav.setTitle(navIdx, 'Liked by')
|
||||
}
|
||||
}, [store, visible])
|
||||
|
||||
return (
|
||||
<View>
|
||||
<ViewHeader title="Upvoted by" />
|
||||
<ViewHeader title="Liked by" />
|
||||
<PostLikedByComponent uri={uri} direction="up" />
|
||||
</View>
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue