Shrink and darken the post controls a little

zio/stable
Paul Frazee 2022-11-22 12:15:26 -06:00
parent 79688cd042
commit 6e67825eca
2 changed files with 16 additions and 13 deletions

View File

@ -93,14 +93,14 @@ export function PostLoadingPlaceholder({
<FontAwesomeIcon <FontAwesomeIcon
style={s.gray3} style={s.gray3}
icon={['far', 'comment']} icon={['far', 'comment']}
size={16} size={14}
/> />
</View> </View>
<View style={s.flex1}> <View style={s.flex1}>
<FontAwesomeIcon style={s.gray3} icon="retweet" size={20} /> <FontAwesomeIcon style={s.gray3} icon="retweet" size={18} />
</View> </View>
<View style={s.flex1}> <View style={s.flex1}>
<UpIcon style={s.gray3} size={19} strokeWidth={1.7} /> <UpIcon style={s.gray3} size={17} strokeWidth={1.7} />
</View> </View>
<View style={s.flex1}></View> <View style={s.flex1}></View>
</View> </View>

View File

@ -22,6 +22,9 @@ interface PostCtrlsOpts {
onPressToggleUpvote: () => void onPressToggleUpvote: () => void
} }
const redgray = '#7A6161'
const sRedgray = {color: redgray}
export function PostCtrls(opts: PostCtrlsOpts) { export function PostCtrls(opts: PostCtrlsOpts) {
const interp1 = useSharedValue<number>(0) const interp1 = useSharedValue<number>(0)
const interp2 = useSharedValue<number>(0) const interp2 = useSharedValue<number>(0)
@ -59,9 +62,9 @@ export function PostCtrls(opts: PostCtrlsOpts) {
<FontAwesomeIcon <FontAwesomeIcon
style={styles.ctrlIcon} style={styles.ctrlIcon}
icon={['far', 'comment']} icon={['far', 'comment']}
size={16} size={14}
/> />
<Text style={[s.gray5, s.ml5, s.f17]}>{opts.replyCount}</Text> <Text style={[sRedgray, s.ml5, s.f16]}>{opts.replyCount}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={s.flex1}> <View style={s.flex1}>
@ -74,14 +77,14 @@ export function PostCtrls(opts: PostCtrlsOpts) {
opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon
} }
icon="retweet" icon="retweet"
size={20} size={18}
/> />
</Animated.View> </Animated.View>
<Text <Text
style={ style={
opts.isReposted opts.isReposted
? [s.bold, s.green3, s.f17, s.ml5] ? [s.bold, s.green3, s.f16, s.ml5]
: [s.gray5, s.f17, s.ml5] : [sRedgray, s.f16, s.ml5]
}> }>
{opts.repostCount} {opts.repostCount}
</Text> </Text>
@ -93,16 +96,16 @@ export function PostCtrls(opts: PostCtrlsOpts) {
onPress={onPressToggleUpvoteWrapper}> onPress={onPressToggleUpvoteWrapper}>
<Animated.View style={anim2Style}> <Animated.View style={anim2Style}>
{opts.isUpvoted ? ( {opts.isUpvoted ? (
<UpIconSolid style={[styles.ctrlIconUpvoted]} size={19} /> <UpIconSolid style={[styles.ctrlIconUpvoted]} size={18} />
) : ( ) : (
<UpIcon style={[styles.ctrlIcon]} size={20} strokeWidth={1.5} /> <UpIcon style={[styles.ctrlIcon]} size={18} strokeWidth={1.5} />
)} )}
</Animated.View> </Animated.View>
<Text <Text
style={ style={
opts.isUpvoted opts.isUpvoted
? [s.bold, s.red3, s.f17, s.ml5] ? [s.bold, s.red3, s.f16, s.ml5]
: [s.gray5, s.f17, s.ml5] : [sRedgray, s.f16, s.ml5]
}> }>
{opts.upvoteCount} {opts.upvoteCount}
</Text> </Text>
@ -123,7 +126,7 @@ const styles = StyleSheet.create({
paddingRight: 4, paddingRight: 4,
}, },
ctrlIcon: { ctrlIcon: {
color: colors.gray4, color: redgray,
}, },
ctrlIconReposted: { ctrlIconReposted: {
color: colors.green3, color: colors.green3,