Shrink and darken the post controls a little
parent
79688cd042
commit
6e67825eca
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue