zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Adjust post control sizing and alignment

Browse source
This commit is contained in:
Paul Frazee 2022-11-20 11:45:31 -06:00
parent 3a10139064
commit 63348807b5
3 changed files with 14 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/view/com/util/LoadingPlaceholder.tsx
View file

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

18
src/view/com/util/PostCtrls.tsx
View file

@ -59,9 +59,9 @@ export function PostCtrls(opts: PostCtrlsOpts) {
<FontAwesomeIcon <FontAwesomeIcon
style={styles.ctrlIcon} style={styles.ctrlIcon}
icon={['far', 'comment']} icon={['far', 'comment']}
size={14} size={16}
/> />
<Text style={[s.gray5, s.ml5, s.f13]}>{opts.replyCount}</Text> <Text style={[s.gray5, s.ml5, s.f16]}>{opts.replyCount}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={s.flex1}> <View style={s.flex1}>
@ -74,14 +74,14 @@ export function PostCtrls(opts: PostCtrlsOpts) {
opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon
} }
icon="retweet" icon="retweet"
size={18} size={20}
/> />
</Animated.View> </Animated.View>
<Text <Text
style={ style={
opts.isReposted opts.isReposted
? [s.bold, s.green3, s.f13, s.ml5] ? [s.bold, s.green3, s.f16, s.ml5]
: [s.gray5, s.f13, s.ml5] : [s.gray5, s.f16, s.ml5]
}> }>
{opts.repostCount} {opts.repostCount}
</Text> </Text>
@ -95,14 +95,14 @@ export function PostCtrls(opts: PostCtrlsOpts) {
{opts.isUpvoted ? ( {opts.isUpvoted ? (
<UpIconSolid style={styles.ctrlIconUpvoted} size={18} /> <UpIconSolid style={styles.ctrlIconUpvoted} size={18} />
) : ( ) : (
<UpIcon style={styles.ctrlIcon} size={18} /> <UpIcon style={styles.ctrlIcon} size={18} strokeWidth={1.7} />
)} )}
</Animated.View> </Animated.View>
<Text <Text
style={ style={
opts.isUpvoted opts.isUpvoted
? [s.bold, s.red3, s.f13, s.ml5] ? [s.bold, s.red3, s.f16, s.ml5]
: [s.gray5, s.f13, s.ml5] : [s.gray5, s.f16, s.ml5]
}> }>
{opts.upvoteCount} {opts.upvoteCount}
</Text> </Text>
@ -116,12 +116,10 @@ export function PostCtrls(opts: PostCtrlsOpts) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
ctrls: { ctrls: {
flexDirection: 'row', flexDirection: 'row',
paddingRight: 20,
}, },
ctrl: { ctrl: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
paddingLeft: 4,
paddingRight: 4, paddingRight: 4,
}, },
ctrlIcon: { ctrlIcon: {

4
src/view/lib/icons.tsx
View file

@ -221,9 +221,11 @@ export function UserGroupIcon({
export function UpIcon({ export function UpIcon({
style, style,
size, size,
strokeWidth = 1.3,
}: { }: {
style?: StyleProp<ViewStyle> style?: StyleProp<ViewStyle>
size?: string | number size?: string | number
strokeWidth: number
}) { }) {
return ( return (
<Svg <Svg
@ -232,7 +234,7 @@ export function UpIcon({
height={size || 24} height={size || 24}
style={style}> style={style}>
<Path <Path
strokeWidth={1.3} strokeWidth={strokeWidth}
stroke="currentColor" stroke="currentColor"
d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z" d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z"
/> />