Tune the custom feeds header a bit more

zio/stable
Paul Frazee 2023-05-24 19:27:04 -05:00
parent 629ca24e90
commit 12c7f6d6a5
1 changed files with 39 additions and 31 deletions

View File

@ -129,53 +129,57 @@ export const CustomFeedScreen = withAuthRequired(
return ( return (
<View style={styles.headerBtns}> <View style={styles.headerBtns}>
<Button <Button
testID="shareBtn" type="default-light"
type="default"
accessibilityLabel="Share this feed"
accessibilityHint=""
onPress={onPressShare}>
<FontAwesomeIcon icon="share" size={18} color={pal.colors.icon} />
</Button>
<Button
type="default"
testID="toggleLikeBtn" testID="toggleLikeBtn"
accessibilityLabel="Like this feed" accessibilityLabel="Like this feed"
accessibilityHint="" accessibilityHint=""
onPress={onToggleLiked}> onPress={onToggleLiked}>
{currentFeed?.isLiked ? ( {currentFeed?.isLiked ? (
<HeartIconSolid size={18} style={styles.liked} /> <HeartIconSolid size={19} style={styles.liked} />
) : ( ) : (
<HeartIcon strokeWidth={3} size={18} style={pal.textLight} /> <HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
)} )}
</Button> </Button>
{currentFeed?.isSaved ? (
<Button <Button
type="default" type="default-light"
accessibilityLabel={isPinned ? 'Unpin this feed' : 'Pin this feed'} accessibilityLabel={
isPinned ? 'Unpin this feed' : 'Pin this feed'
}
accessibilityHint="" accessibilityHint=""
onPress={onTogglePinned}> onPress={onTogglePinned}>
<FontAwesomeIcon <FontAwesomeIcon
icon="thumb-tack" icon="thumb-tack"
size={16} size={17}
color={isPinned ? colors.blue3 : pal.colors.icon} color={isPinned ? colors.blue3 : pal.colors.textLight}
style={styles.top1} style={styles.top1}
/> />
</Button> </Button>
) : undefined}
{currentFeed?.isSaved ? ( {currentFeed?.isSaved ? (
<DropdownButton <DropdownButton
testID="feedHeaderDropdownBtn" testID="feedHeaderDropdownBtn"
type="default" type="default-light"
items={dropdownItems} items={dropdownItems}
menuWidth={250}> menuWidth={250}>
<FontAwesomeIcon icon="ellipsis" style={[pal.text]} /> <FontAwesomeIcon
icon="ellipsis"
color={pal.colors.textLight}
size={18}
/>
</DropdownButton> </DropdownButton>
) : ( ) : (
<Button <Button
type="inverted" type="default-light"
onPress={onToggleSaved} onPress={onToggleSaved}
accessibilityLabel="Add to my feeds" accessibilityLabel="Add to my feeds"
accessibilityHint="" accessibilityHint=""
label="Add to My Feeds" style={styles.headerAddBtn}>
/> <FontAwesomeIcon icon="plus" color={pal.colors.link} size={19} />
<Text type="xl-medium" style={pal.link}>
Add to My Feeds
</Text>
</Button>
)} )}
</View> </View>
) )
@ -187,7 +191,6 @@ export const CustomFeedScreen = withAuthRequired(
onToggleSaved, onToggleSaved,
onTogglePinned, onTogglePinned,
onToggleLiked, onToggleLiked,
onPressShare,
dropdownItems, dropdownItems,
]) ])
@ -361,8 +364,13 @@ const styles = StyleSheet.create({
}, },
headerBtns: { headerBtns: {
flexDirection: 'row', flexDirection: 'row',
gap: 12, alignItems: 'center',
marginTop: 10, },
headerAddBtn: {
flexDirection: 'row',
alignItems: 'center',
gap: 4,
paddingLeft: 4,
}, },
headerDetails: { headerDetails: {
paddingHorizontal: 16, paddingHorizontal: 16,