Use new icons on notifications screen (#4299)

* use new icons on notif screen

* replace placeholder icon too

* cull unused legacy icons

src/view/com/notifications/Feed.tsx

@@ -8,23 +8,23 @@ import {
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
 import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {cleanError} from '#/lib/strings/errors'
+import {s} from '#/lib/styles'
 import {logger} from '#/logger'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useNotificationFeedQuery} from '#/state/queries/notifications/feed'
 import {useUnreadNotificationsApi} from '#/state/queries/notifications/unread'
-import {s} from 'lib/styles'
-import {EmptyState} from '../util/EmptyState'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import {List, ListRef} from '../util/List'
-import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
-import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
-import {CenteredView} from '../util/Views'
+import {EmptyState} from '#/view/com/util/EmptyState'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {List, ListRef} from '#/view/com/util/List'
+import {NotificationFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
+import {CenteredView} from '#/view/com/util/Views'
 import {FeedItem} from './FeedItem'
 import hairlineWidth = StyleSheet.hairlineWidth
-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
 const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}

src/view/com/notifications/FeedItem.tsx

@@ -17,11 +17,6 @@ import {
   ModerationOpts,
 } from '@atproto/api'
 import {AtUri} from '@atproto/api'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-  Props,
-} from '@fortawesome/react-native-fontawesome'
 import {msg, plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
@@ -29,7 +24,6 @@ import {useQueryClient} from '@tanstack/react-query'
 import {FeedNotification} from '#/state/queries/notifications/feed'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {usePalette} from 'lib/hooks/usePalette'
-import {HeartIconSolid} from 'lib/icons'
 import {makeProfileLink} from 'lib/routes/links'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
@@ -37,6 +31,14 @@ import {niceDate} from 'lib/strings/time'
 import {colors, s} from 'lib/styles'
 import {isWeb} from 'platform/detection'
 import {precacheProfile} from 'state/queries/profile'
+import {atoms as a, useTheme} from '#/alf'
+import {
+  ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon,
+  ChevronTop_Stroke2_Corner0_Rounded as ChevronUpIcon,
+} from '#/components/icons/Chevron'
+import {Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled} from '#/components/icons/Heart2'
+import {PersonPlus_Filled_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person'
+import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost'
 import {Link as NewLink} from '#/components/Link'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {FeedSourceCard} from '../feeds/FeedSourceCard'
@@ -47,6 +49,7 @@ import {formatCount} from '../util/numeric/format'
 import {Text} from '../util/text/Text'
 import {TimeElapsed} from '../util/TimeElapsed'
 import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar'
+
 import hairlineWidth = StyleSheet.hairlineWidth
 
 const MAX_AUTHORS = 5
@@ -71,6 +74,7 @@ let FeedItem = ({
   const queryClient = useQueryClient()
   const pal = usePalette('default')
   const {_} = useLingui()
+  const t = useTheme()
   const [isAuthorsExpanded, setAuthorsExpanded] = useState<boolean>(false)
   const itemHref = useMemo(() => {
     if (item.type === 'post-like' || item.type === 'repost') {
@@ -150,30 +154,25 @@ let FeedItem = ({
   }
 
   let action = ''
-  let icon: Props['icon'] | 'HeartIconSolid'
-  let iconStyle: Props['style'] = []
+  let icon = (
+    <HeartIconFilled
+      size="xl"
+      style={[
+        s.likeColor,
+        // {position: 'relative', top: -4}
+      ]}
+    />
+  )
   if (item.type === 'post-like') {
     action = _(msg`liked your post`)
-    icon = 'HeartIconSolid'
-    iconStyle = [
-      s.likeColor as FontAwesomeIconStyle,
-      {position: 'relative', top: -4},
-    ]
   } else if (item.type === 'repost') {
     action = _(msg`reposted your post`)
-    icon = 'retweet'
-    iconStyle = [s.green3 as FontAwesomeIconStyle]
+    icon = <RepostIcon size="xl" style={{color: t.palette.positive_600}} />
   } else if (item.type === 'follow') {
     action = _(msg`followed you`)
-    icon = 'user-plus'
-    iconStyle = [s.blue3 as FontAwesomeIconStyle]
+    icon = <PersonPlusIcon size="xl" style={{color: t.palette.primary_500}} />
   } else if (item.type === 'feedgen-like') {
     action = _(msg`liked your custom feed`)
-    icon = 'HeartIconSolid'
-    iconStyle = [
-      s.likeColor as FontAwesomeIconStyle,
-      {position: 'relative', top: -4},
-    ]
   } else {
     return null
   }
@@ -200,18 +199,10 @@ let FeedItem = ({
         item.type === 'repost'
       }
       onBeforePress={onBeforePress}>
-      <View style={styles.layoutIcon}>
+      <View style={[styles.layoutIcon, a.pr_sm]}>
         {/* TODO: Prevent conditional rendering and move toward composable
         notifications for clearer accessibility labeling */}
-        {icon === 'HeartIconSolid' ? (
-          <HeartIconSolid size={28} style={[styles.icon, ...iconStyle]} />
-        ) : (
-          <FontAwesomeIcon
-            icon={icon}
-            size={24}
-            style={[styles.icon, ...iconStyle]}
-          />
-        )}
+        {icon}
       </View>
       <View style={styles.layoutContent}>
         <ExpandListPressable
@@ -322,9 +313,8 @@ function CondensedAuthorsList({
           accessibilityHint={_(
             msg`Collapses list of users for a given notification`,
           )}>
-          <FontAwesomeIcon
-            icon="angle-up"
-            size={18}
+          <ChevronUpIcon
+            size="md"
             style={[styles.expandedAuthorsCloseBtnIcon, pal.text]}
           />
           <Text type="sm-medium" style={pal.text}>
@@ -369,9 +359,8 @@ function CondensedAuthorsList({
             +{authors.length - MAX_AUTHORS}
           </Text>
         ) : undefined}
-        <FontAwesomeIcon
-          icon="angle-down"
-          size={18}
+        <ChevronDownIcon
+          size="md"
           style={[styles.expandedAuthorsCloseBtnIcon, pal.textLight]}
         />
       </View>

src/view/com/util/LoadingPlaceholder.tsx

@@ -8,12 +8,14 @@ import {
 } from 'react-native'
 
 import {usePalette} from 'lib/hooks/usePalette'
-import {HeartIconSolid} from 'lib/icons'
 import {s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
-import {useTheme as useTheme_NEW} from '#/alf'
+import {atoms as a, useTheme as useTheme_NEW} from '#/alf'
 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
-import {Heart2_Stroke2_Corner0_Rounded as HeartIconOutline} from '#/components/icons/Heart2'
+import {
+  Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
+  Heart2_Stroke2_Corner0_Rounded as HeartIconOutline,
+} from '#/components/icons/Heart2'
 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
 import hairlineWidth = StyleSheet.hairlineWidth
 
@@ -139,14 +141,14 @@ export function NotificationLoadingPlaceholder({
   const pal = usePalette('default')
   return (
     <View style={[styles.notification, pal.view, style]}>
-      <View style={{paddingLeft: 30, paddingRight: 10}}>
-        <HeartIconSolid
-          style={{color: pal.colors.backgroundLight} as ViewStyle}
-          size={30}
+      <View style={[{width: 70}, a.align_end, a.pr_sm, a.pt_2xs]}>
+        <HeartIconFilled
+          size="xl"
+          style={{color: pal.colors.backgroundLight}}
         />
       </View>
       <View style={{flex: 1}}>
-        <View style={[s.flexRow, s.mb10]}>
+        <View style={[a.flex_row, s.mb10]}>
           <LoadingPlaceholder
             width={30}
             height={30}