Refer to upvotes as 'likes' in the UI (will change in the protocol soon)

+6 -6

src/view/com/notifications/FeedItem.tsx

··· 8 8 import {PostThreadViewModel} from '../../../state/models/post-thread-view' 9 9 import {s, colors} from '../../lib/styles' 10 10 import {ago, pluralize} from '../../../lib/strings' 11 - import {UpIconSolid} from '../../lib/icons' 11 + import {HeartIconSolid} from '../../lib/icons' 12 12 import {Text} from '../util/text/Text' 13 13 import {UserAvatar} from '../util/UserAvatar' 14 14 import {ImageHorzList} from '../util/images/ImageHorzList' ··· 72 72 } 73 73 74 74 let action = '' 75 - let icon: Props['icon'] | 'UpIconSolid' 75 + let icon: Props['icon'] | 'HeartIconSolid' 76 76 let iconStyle: Props['style'] = [] 77 77 if (item.isUpvote) { 78 - action = 'upvoted your post' 79 - icon = 'UpIconSolid' 78 + action = 'liked your post' 79 + icon = 'HeartIconSolid' 80 80 iconStyle = [s.red3, {position: 'relative', top: -4}] 81 81 } else if (item.isRepost) { 82 82 action = 'reposted your post' ··· 132 132 noFeedback> 133 133 <View style={styles.layout}> 134 134 <View style={styles.layoutIcon}> 135 - {icon === 'UpIconSolid' ? ( 136 - <UpIconSolid size={26} style={[styles.icon, ...iconStyle]} /> 135 + {icon === 'HeartIconSolid' ? ( 136 + <HeartIconSolid size={26} style={[styles.icon, ...iconStyle]} /> 137 137 ) : ( 138 138 <FontAwesomeIcon 139 139 icon={icon}

+2 -2

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

··· 47 47 const urip = new AtUri(item.post.uri) 48 48 return `/profile/${item.post.author.handle}/post/${urip.rkey}/upvoted-by` 49 49 }, [item.post.uri, item.post.author.handle]) 50 - const upvotesTitle = 'Upvotes on this post' 50 + const upvotesTitle = 'Likes on this post' 51 51 const repostsHref = useMemo(() => { 52 52 const urip = new AtUri(item.post.uri) 53 53 return `/profile/${item.post.author.handle}/post/${urip.rkey}/reposted-by` ··· 209 209 <Text type="h5" style={pal.text}> 210 210 {item.post.upvoteCount} 211 211 </Text>{' '} 212 - {pluralize(item.post.upvoteCount, 'upvote')} 212 + {pluralize(item.post.upvoteCount, 'like')} 213 213 </Text> 214 214 </Link> 215 215 ) : (

+2 -2

src/view/com/util/LoadingPlaceholder.tsx

··· 1 1 import React from 'react' 2 2 import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native' 3 3 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 4 - import {UpIcon} from '../../lib/icons' 4 + import {HeartIcon} from '../../lib/icons' 5 5 import {s} from '../../lib/styles' 6 6 import {useTheme} from '../../lib/ThemeContext' 7 7 import {usePalette} from '../../lib/hooks/usePalette' ··· 70 70 /> 71 71 </View> 72 72 <View style={s.flex1}> 73 - <UpIcon 73 + <HeartIcon 74 74 style={{color: theme.palette.default.icon}} 75 75 size={17} 76 76 strokeWidth={1.7}

+14 -8

src/view/com/util/PostCtrls.tsx

··· 11 11 import ReactNativeHapticFeedback from 'react-native-haptic-feedback' 12 12 import {Text} from './text/Text' 13 13 import {PostDropdownBtn} from './forms/DropdownButton' 14 - import {UpIcon, UpIconSolid, CommentBottomArrow} from '../../lib/icons' 14 + import {HeartIcon, HeartIconSolid, CommentBottomArrow} from '../../lib/icons' 15 15 import {s, colors} from '../../lib/styles' 16 16 import {useTheme} from '../../lib/ThemeContext' 17 17 import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue' ··· 123 123 hitSlop={HITSLOP} 124 124 onPress={opts.onPressReply}> 125 125 <CommentBottomArrow 126 - style={defaultCtrlColor} 126 + style={[ 127 + defaultCtrlColor, 128 + opts.big ? {marginTop: 2} : {marginTop: 1}, 129 + ]} 127 130 strokeWidth={3} 128 131 size={opts.big ? 20 : 15} 129 132 /> ··· 167 170 onPress={onPressToggleUpvoteWrapper}> 168 171 <Animated.View style={anim2Style}> 169 172 {opts.isUpvoted ? ( 170 - <UpIconSolid 173 + <HeartIconSolid 171 174 style={[styles.ctrlIconUpvoted]} 172 - size={opts.big ? 22 : 19} 175 + size={opts.big ? 22 : 16} 173 176 /> 174 177 ) : ( 175 - <UpIcon 176 - style={defaultCtrlColor} 177 - size={opts.big ? 22 : 19} 178 - strokeWidth={1.5} 178 + <HeartIcon 179 + style={[ 180 + defaultCtrlColor, 181 + opts.big ? {marginTop: 1} : undefined, 182 + ]} 183 + strokeWidth={3} 184 + size={opts.big ? 20 : 16} 179 185 /> 180 186 )} 181 187 </Animated.View>

+42

src/view/lib/icons.tsx

··· 225 225 ) 226 226 } 227 227 228 + // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. 229 + export function HeartIcon({ 230 + style, 231 + size = 24, 232 + strokeWidth = 1.5, 233 + }: { 234 + style?: StyleProp<ViewStyle> 235 + size?: string | number 236 + strokeWidth: number 237 + }) { 238 + return ( 239 + <Svg viewBox="0 0 24 24" width={size} height={size} style={style}> 240 + <Path 241 + strokeWidth={strokeWidth} 242 + stroke="currentColor" 243 + fill="none" 244 + 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" 245 + /> 246 + </Svg> 247 + ) 248 + } 249 + 250 + // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. 251 + export function HeartIconSolid({ 252 + style, 253 + size = 24, 254 + }: { 255 + style?: StyleProp<ViewStyle> 256 + size?: string | number 257 + }) { 258 + return ( 259 + <Svg viewBox="0 0 24 24" width={size} height={size} style={style}> 260 + <Path 261 + fill="currentColor" 262 + stroke="currentColor" 263 + strokeWidth={1} 264 + 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" 265 + /> 266 + </Svg> 267 + ) 268 + } 269 + 228 270 export function UpIcon({ 229 271 style, 230 272 size,

+1 -1

src/view/routes.ts

··· 55 55 ], 56 56 [ 57 57 PostUpvotedBy, 58 - 'Upvoted by', 58 + 'Liked by', 59 59 'heart', 60 60 r('/profile/(?<name>[^/]+)/post/(?<rkey>[^/]+)/upvoted-by'), 61 61 ],

+2 -2

src/view/screens/PostUpvotedBy.tsx

··· 13 13 14 14 useEffect(() => { 15 15 if (visible) { 16 - store.nav.setTitle(navIdx, 'Upvoted by') 16 + store.nav.setTitle(navIdx, 'Liked by') 17 17 } 18 18 }, [store, visible]) 19 19 20 20 return ( 21 21 <View> 22 - <ViewHeader title="Upvoted by" /> 22 + <ViewHeader title="Liked by" /> 23 23 <PostLikedByComponent uri={uri} direction="up" /> 24 24 </View> 25 25 )

Configure Feed

Configure Feed