From 798622b307220a8634a911afabea3864a812aa64 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 17 Jan 2023 12:35:47 -0600
Subject: [PATCH] Refer to upvotes as 'likes' in the UI (will change in the
 protocol soon)

---
 src/view/com/notifications/FeedItem.tsx     | 12 +++---
 src/view/com/post-thread/PostThreadItem.tsx |  4 +-
 src/view/com/util/LoadingPlaceholder.tsx    |  4 +-
 src/view/com/util/PostCtrls.tsx             | 22 +++++++----
 src/view/lib/icons.tsx                      | 42 +++++++++++++++++++++
 src/view/routes.ts                          |  2 +-
 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 ca3f3c57..c374b144 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 1764dc14..86e42862 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 76e3c495..587e2928 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 6bcc77e9..7803c479 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 b061f308..e972a79d 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 7d5a06ac..908036a4 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 2794d529..7379b852 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>
   )