Tune post controls

zio/stable
Paul Frazee 2022-12-28 19:37:30 -06:00
parent 607203134e
commit f609794bd2
4 changed files with 44 additions and 15 deletions

View File

@ -310,10 +310,10 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
paddingBottom: 8,
paddingBottom: 4,
},
postEmbeds: {
marginBottom: 10,
marginBottom: 0,
},
viewFullThread: {
paddingTop: 12,

View File

@ -3,7 +3,7 @@ import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
import {Text} from './text/Text'
import {UpIcon, UpIconSolid} from '../../lib/icons'
import {UpIcon, UpIconSolid, CommentBottomArrow} from '../../lib/icons'
import {s, colors} from '../../lib/styles'
import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
@ -102,13 +102,13 @@ export function PostCtrls(opts: PostCtrlsOpts) {
style={styles.ctrl}
hitSlop={HITSLOP}
onPress={opts.onPressReply}>
<FontAwesomeIcon
<CommentBottomArrow
style={styles.ctrlIcon}
icon={['far', 'comment']}
size={opts.big ? 20 : 14}
strokeWidth={3}
size={opts.big ? 20 : 15}
/>
{typeof opts.replyCount !== 'undefined' ? (
<Text style={[sRedgray, s.ml5, s.f16]}>{opts.replyCount}</Text>
<Text style={[sRedgray, s.ml5, s.f15]}>{opts.replyCount}</Text>
) : undefined}
</TouchableOpacity>
</View>
@ -123,15 +123,15 @@ export function PostCtrls(opts: PostCtrlsOpts) {
opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon
}
icon="retweet"
size={opts.big ? 22 : 18}
size={opts.big ? 22 : 17}
/>
</Animated.View>
{typeof opts.repostCount !== 'undefined' ? (
<Text
style={
opts.isReposted
? [s.bold, s.green3, s.f16, s.ml5]
: [sRedgray, s.f16, s.ml5]
? [s.bold, s.green3, s.f15, s.ml5]
: [sRedgray, s.f15, s.ml5]
}>
{opts.repostCount}
</Text>
@ -147,12 +147,12 @@ export function PostCtrls(opts: PostCtrlsOpts) {
{opts.isUpvoted ? (
<UpIconSolid
style={[styles.ctrlIconUpvoted]}
size={opts.big ? 22 : 18}
size={opts.big ? 22 : 17}
/>
) : (
<UpIcon
style={[styles.ctrlIcon]}
size={opts.big ? 22 : 18}
size={opts.big ? 22 : 17}
strokeWidth={1.5}
/>
)}
@ -161,8 +161,8 @@ export function PostCtrls(opts: PostCtrlsOpts) {
<Text
style={
opts.isUpvoted
? [s.bold, s.red3, s.f16, s.ml5]
: [sRedgray, s.f16, s.ml5]
? [s.bold, s.red3, s.f15, s.ml5]
: [sRedgray, s.f15, s.ml5]
}>
{opts.upvoteCount}
</Text>

View File

@ -123,7 +123,7 @@ export function PostEmbeds({
const styles = StyleSheet.create({
imagesContainer: {
marginBottom: 10,
marginBottom: 6,
},
imagesWidthSpacer: {
width: 5,

View File

@ -324,3 +324,32 @@ export function DownIconSolid({
</Svg>
)
}
// Copyright (c) 2020 Refactoring UI Inc.
// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
export function CommentBottomArrow({
style,
size,
strokeWidth = 1.3,
}: {
style?: StyleProp<TextStyle>
size?: string | number
strokeWidth?: number
}) {
return (
<Svg
fill="none"
viewBox="0 0 24 24"
strokeWidth={strokeWidth || 2.5}
stroke={style?.color || 'currentColor'}
width={size || 24}
height={size || 24}
style={style}>
<Path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
/>
</Svg>
)
}