Fix custom feed header on desktop web

This commit is contained in:
Paul Frazee 2023-05-18 11:57:49 -05:00
parent 7691fe4f48
commit 754496b957

View file

@ -134,6 +134,33 @@ export const CustomFeedScreen = withAuthRequired(
)} )}
</Text> </Text>
)} )}
{isDesktopWeb && (
<View style={styles.headerBtns}>
<Button
type={currentFeed?.isSaved ? 'default' : 'inverted'}
onPress={onToggleSaved}
accessibilityLabel={
currentFeed?.isSaved
? 'Unsave this feed'
: 'Save this feed'
}
accessibilityHint=""
label={
currentFeed?.isSaved
? 'Remove from My Feeds'
: 'Add to My Feeds'
}
/>
<Button type="default" onPress={onToggleLiked}>
{currentFeed?.isLiked ? (
<HeartIconSolid size={18} style={styles.liked} />
) : (
<HeartIcon strokeWidth={3} size={18} style={pal.icon} />
)}
</Button>
</View>
)}
</View> </View>
<View> <View>
<UserAvatar <UserAvatar
@ -158,27 +185,6 @@ export const CustomFeedScreen = withAuthRequired(
'user', 'user',
)}`} )}`}
/> />
{isDesktopWeb && (
<View style={styles.headerBtns}>
<Button
type={currentFeed?.isSaved ? 'default' : 'inverted'}
onPress={onToggleSaved}
accessibilityLabel={
currentFeed?.isSaved ? 'Unsave this feed' : 'Save this feed'
}
accessibilityHint=""
label={currentFeed?.isSaved ? 'Unsave' : 'Save'}
/>
<Button type="default" onPress={onToggleLiked}>
{currentFeed?.isLiked ? (
<HeartIconSolid size={18} style={styles.liked} />
) : (
<HeartIcon strokeWidth={3} size={18} style={pal.icon} />
)}
</Button>
</View>
)}
</View> </View>
<View style={[styles.fakeSelector, pal.border]}> <View style={[styles.fakeSelector, pal.border]}>
<View <View
@ -190,7 +196,15 @@ export const CustomFeedScreen = withAuthRequired(
</View> </View>
</> </>
) )
}, [store.me.did, pal, currentFeed, onToggleLiked, onToggleSaved]) }, [
store.me.did,
pal,
currentFeed,
onToggleLiked,
onToggleSaved,
name,
rkey,
])
return ( return (
<View style={s.hContentRegion}> <View style={s.hContentRegion}>
@ -207,10 +221,6 @@ export const CustomFeedScreen = withAuthRequired(
) )
const styles = StyleSheet.create({ const styles = StyleSheet.create({
headerBtns: {
flexDirection: 'row',
gap: 8,
},
header: { header: {
flexDirection: 'row', flexDirection: 'row',
gap: 12, gap: 12,
@ -219,6 +229,11 @@ const styles = StyleSheet.create({
paddingBottom: 16, paddingBottom: 16,
borderTopWidth: 1, borderTopWidth: 1,
}, },
headerBtns: {
flexDirection: 'row',
gap: 8,
marginTop: 10,
},
headerDetails: { headerDetails: {
paddingHorizontal: 16, paddingHorizontal: 16,
paddingBottom: 16, paddingBottom: 16,