diff options
-rw-r--r-- | src/view/com/notifications/FeedItem.tsx | 12 | ||||
-rw-r--r-- | src/view/com/post-thread/PostThreadItem.tsx | 4 | ||||
-rw-r--r-- | src/view/com/util/LoadingPlaceholder.tsx | 4 | ||||
-rw-r--r-- | src/view/com/util/PostCtrls.tsx | 22 | ||||
-rw-r--r-- | src/view/lib/icons.tsx | 42 | ||||
-rw-r--r-- | src/view/routes.ts | 2 | ||||
-rw-r--r-- | src/view/screens/PostUpvotedBy.tsx | 4 |
7 files changed, 69 insertions, 21 deletions
diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index ca3f3c571..c374b144d 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -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} diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 1764dc140..86e428621 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -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> ) : ( diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index 76e3c495d..587e2928a 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -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} diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx index 6bcc77e95..7803c4799 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls.tsx @@ -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> diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx index b061f308a..e972a79d1 100644 --- a/src/view/lib/icons.tsx +++ b/src/view/lib/icons.tsx @@ -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, diff --git a/src/view/routes.ts b/src/view/routes.ts index 7d5a06acd..908036a41 100644 --- a/src/view/routes.ts +++ b/src/view/routes.ts @@ -55,7 +55,7 @@ export const routes: Route[] = [ ], [ PostUpvotedBy, - 'Upvoted by', + 'Liked by', 'heart', r('/profile/(?<name>[^/]+)/post/(?<rkey>[^/]+)/upvoted-by'), ], diff --git a/src/view/screens/PostUpvotedBy.tsx b/src/view/screens/PostUpvotedBy.tsx index 2794d529a..7379b852f 100644 --- a/src/view/screens/PostUpvotedBy.tsx +++ b/src/view/screens/PostUpvotedBy.tsx @@ -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> ) |