Usability improvements to feeds

1 files changed, 24 insertions, 14 deletions

diff --git a/src/view/com/feeds/SavedFeedItem.tsx b/src/view/com/feeds/SavedFeedItem.tsx
index 329f1811e..8a5889e47 100644
--- a/src/view/com/feeds/SavedFeedItem.tsx
+++ b/src/view/com/feeds/SavedFeedItem.tsx
@@ -1,41 +1,51 @@
-import React from 'react'
-import {View, TouchableOpacity, StyleSheet} from 'react-native'
+import React, {useCallback} from 'react'
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {colors} from 'lib/styles'
 import {observer} from 'mobx-react-lite'
 import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
 import {CustomFeed} from './CustomFeed'
+import {usePalette} from 'lib/hooks/usePalette'
 
 export const SavedFeedItem = observer(
   ({
     item,
     savedFeeds,
+    showSaveBtn = false,
+    style,
   }: {
     item: CustomFeedModel
     savedFeeds: SavedFeedsModel
+    showSaveBtn?: boolean
+    style?: StyleProp<ViewStyle>
   }) => {
+    const pal = usePalette('default')
     const isPinned = savedFeeds.isPinned(item)
+    const onTogglePinned = useCallback(
+      () => savedFeeds.togglePinnedFeed(item),
+      [savedFeeds, item],
+    )
 
     return (
-      <View style={styles.itemContainer}>
+      <View style={[styles.itemContainer, style]}>
         <CustomFeed
           key={item.data.uri}
           item={item}
-          style={styles.item}
-          showSaveBtn
+          showSaveBtn={showSaveBtn}
+          style={styles.noBorder}
         />
-        <TouchableOpacity
-          accessibilityRole="button"
-          onPress={() => {
-            savedFeeds.togglePinnedFeed(item)
-            console.log('pinned', savedFeeds.pinned)
-            console.log('isPinned', savedFeeds.isPinned(item))
-          }}>
+        <TouchableOpacity accessibilityRole="button" onPress={onTogglePinned}>
           <FontAwesomeIcon
             icon="thumb-tack"
             size={20}
-            color={isPinned ? colors.blue3 : colors.gray3}
+            color={isPinned ? colors.blue3 : pal.colors.icon}
           />
         </TouchableOpacity>
       </View>
@@ -50,7 +60,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginRight: 18,
   },
-  item: {
+  noBorder: {
     borderTopWidth: 0,
   },
 })