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

Aesthetic improvements

zio/stable
Paul Frazee 2022-08-31 20:09:47 -05:00
parent b4802c6b5b
commit 4aa8a58f27
10 changed files with 57 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/view/com/feed/FeedItem.tsx
View File

@ -81,8 +81,9 @@ export const FeedItem = observer(function FeedItem({
<FontAwesomeIcon <FontAwesomeIcon
style={styles.ctrlIcon} style={styles.ctrlIcon}
icon={['far', 'comment']} icon={['far', 'comment']}
size={14}
/> />
<Text>{item.replyCount}</Text> <Text style={s.f13}>{item.replyCount}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}> <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
<FontAwesomeIcon <FontAwesomeIcon
@ -92,11 +93,11 @@ export const FeedItem = observer(function FeedItem({
: styles.ctrlIcon : styles.ctrlIcon
} }
icon="retweet" icon="retweet"
size={22} size={18}
/> />
<Text <Text
style={ style={
item.myState.hasReposted ? [s.bold, s.green3] : undefined item.myState.hasReposted ? [s.bold, s.green3, s.f13] : s.f13
}> }>
{item.repostCount} {item.repostCount}
</Text> </Text>
@ -107,9 +108,10 @@ export const FeedItem = observer(function FeedItem({
item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon
} }
icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']} icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
size={14}
/> />
<Text <Text
style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}> style={item.myState.hasLiked ? [s.bold, s.red3, s.f13] : s.f13}>
{item.likeCount} {item.likeCount}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
@ -119,6 +121,7 @@ export const FeedItem = observer(function FeedItem({
<FontAwesomeIcon <FontAwesomeIcon
style={styles.ctrlIcon} style={styles.ctrlIcon}
icon="share-from-square" icon="share-from-square"
size={14}
/> />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@ -140,7 +143,7 @@ const styles = StyleSheet.create({
}, },
repostedBy: { repostedBy: {
flexDirection: 'row', flexDirection: 'row',
paddingLeft: 70, paddingLeft: 60,
}, },
repostedByIcon: { repostedByIcon: {
marginRight: 2, marginRight: 2,
@ -150,12 +153,13 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
}, },
layoutAvi: { layoutAvi: {
width: 70, width: 60,
paddingTop: 5,
}, },
avi: { avi: {
width: 60, width: 50,
height: 60, height: 50,
borderRadius: 30, borderRadius: 25,
resizeMode: 'cover', resizeMode: 'cover',
}, },
layoutContent: { layoutContent: {
@ -164,7 +168,7 @@ const styles = StyleSheet.create({
meta: { meta: {
flexDirection: 'row', flexDirection: 'row',
paddingTop: 2, paddingTop: 2,
paddingBottom: 4, paddingBottom: 2,
}, },
metaItem: { metaItem: {
paddingRight: 5, paddingRight: 5,
@ -193,6 +197,6 @@ const styles = StyleSheet.create({
}, },
ctrlIconLiked: { ctrlIconLiked: {
marginRight: 5, marginRight: 5,
color: colors.pink3, color: colors.red3,
}, },
}) })

2
src/view/com/notifications/FeedItem.tsx
View File

@ -115,7 +115,7 @@ const styles = StyleSheet.create({
meta: { meta: {
flexDirection: 'row', flexDirection: 'row',
paddingTop: 6, paddingTop: 6,
paddingBottom: 4, paddingBottom: 2,
}, },
metaItem: { metaItem: {
paddingRight: 3, paddingRight: 3,

2
src/view/com/post-thread/PostLikedBy.tsx
View File

@ -112,7 +112,7 @@ const styles = StyleSheet.create({
avi: { avi: {
width: 40, width: 40,
height: 40, height: 40,
borderRadius: 30, borderRadius: 20,
resizeMode: 'cover', resizeMode: 'cover',
}, },
layoutContent: { layoutContent: {

2
src/view/com/post-thread/PostRepostedBy.tsx
View File

@ -118,7 +118,7 @@ const styles = StyleSheet.create({
avi: { avi: {
width: 40, width: 40,
height: 40, height: 40,
borderRadius: 30, borderRadius: 20,
resizeMode: 'cover', resizeMode: 'cover',
}, },
layoutContent: { layoutContent: {

23
src/view/com/post-thread/PostThreadItem.tsx
View File

@ -129,8 +129,9 @@ export const PostThreadItem = observer(function PostThreadItem({
<FontAwesomeIcon <FontAwesomeIcon
style={styles.ctrlIcon} style={styles.ctrlIcon}
icon={['far', 'comment']} icon={['far', 'comment']}
size={14}
/> />
<Text>{item.replyCount}</Text> <Text style={s.f13}>{item.replyCount}</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}> <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
<FontAwesomeIcon <FontAwesomeIcon
@ -140,11 +141,11 @@ export const PostThreadItem = observer(function PostThreadItem({
: styles.ctrlIcon : styles.ctrlIcon
} }
icon="retweet" icon="retweet"
size={22} size={18}
/> />
<Text <Text
style={ style={
item.myState.hasReposted ? [s.bold, s.green3] : undefined item.myState.hasReposted ? [s.bold, s.green3, s.f13] : s.f13
}> }>
{item.repostCount} {item.repostCount}
</Text> </Text>
@ -155,9 +156,10 @@ export const PostThreadItem = observer(function PostThreadItem({
item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon
} }
icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']} icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
size={14}
/> />
<Text <Text
style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}> style={item.myState.hasLiked ? [s.bold, s.red3, s.f13] : s.f13}>
{item.likeCount} {item.likeCount}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
@ -167,6 +169,7 @@ export const PostThreadItem = observer(function PostThreadItem({
<FontAwesomeIcon <FontAwesomeIcon
style={styles.ctrlIcon} style={styles.ctrlIcon}
icon="share-from-square" icon="share-from-square"
size={14}
/> />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@ -190,15 +193,15 @@ const styles = StyleSheet.create({
marginRight: 2, marginRight: 2,
}, },
layoutAvi: { layoutAvi: {
width: 80, width: 70,
paddingLeft: 10, paddingLeft: 10,
paddingTop: 10, paddingTop: 10,
paddingBottom: 10, paddingBottom: 10,
}, },
avi: { avi: {
width: 60, width: 50,
height: 60, height: 50,
borderRadius: 30, borderRadius: 25,
resizeMode: 'cover', resizeMode: 'cover',
}, },
layoutContent: { layoutContent: {
@ -210,7 +213,7 @@ const styles = StyleSheet.create({
meta: { meta: {
flexDirection: 'row', flexDirection: 'row',
paddingTop: 2, paddingTop: 2,
paddingBottom: 4, paddingBottom: 2,
}, },
metaItem: { metaItem: {
paddingRight: 5, paddingRight: 5,
@ -251,6 +254,6 @@ const styles = StyleSheet.create({
}, },
ctrlIconLiked: { ctrlIconLiked: {
marginRight: 5, marginRight: 5,
color: colors.pink3, color: colors.red3,
}, },
}) })

14
src/view/com/post/Post.tsx
View File

@ -136,7 +136,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']} icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
/> />
<Text <Text
style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}> style={item.myState.hasLiked ? [s.bold, s.red3] : undefined}>
{item.likeCount} {item.likeCount}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
@ -164,12 +164,12 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
}, },
layoutAvi: { layoutAvi: {
width: 70, width: 60,
}, },
avi: { avi: {
width: 60, width: 50,
height: 60, height: 50,
borderRadius: 30, borderRadius: 25,
resizeMode: 'cover', resizeMode: 'cover',
}, },
layoutContent: { layoutContent: {
@ -178,7 +178,7 @@ const styles = StyleSheet.create({
meta: { meta: {
flexDirection: 'row', flexDirection: 'row',
paddingTop: 2, paddingTop: 2,
paddingBottom: 4, paddingBottom: 2,
}, },
metaItem: { metaItem: {
paddingRight: 5, paddingRight: 5,
@ -206,6 +206,6 @@ const styles = StyleSheet.create({
}, },
ctrlIconLiked: { ctrlIconLiked: {
marginRight: 5, marginRight: 5,
color: colors.pink3, color: colors.red3,
}, },
}) })

2
src/view/com/profile/ProfileFollowers.tsx
View File

@ -116,7 +116,7 @@ const styles = StyleSheet.create({
avi: { avi: {
width: 40, width: 40,
height: 40, height: 40,
borderRadius: 30, borderRadius: 20,
resizeMode: 'cover', resizeMode: 'cover',
}, },
layoutContent: { layoutContent: {

2
src/view/com/profile/ProfileFollows.tsx
View File

@ -116,7 +116,7 @@ const styles = StyleSheet.create({
avi: { avi: {
width: 40, width: 40,
height: 40, height: 40,
borderRadius: 30, borderRadius: 20,
resizeMode: 'cover', resizeMode: 'cover',
}, },
layoutContent: { layoutContent: {

16
src/view/lib/styles.ts
View File

@ -17,6 +17,12 @@ export const colors = {
blue4: '#0062bd', blue4: '#0062bd',
blue5: '#034581', blue5: '#034581',
red1: '#ffe6f2',
red2: '#fba2ce',
red3: '#ec4899',
red4: '#d1106f',
red5: '#97074e',
pink1: '#f8ccff', pink1: '#f8ccff',
pink2: '#e966ff', pink2: '#e966ff',
pink3: '#db00ff', pink3: '#db00ff',
@ -36,6 +42,10 @@ export const colors = {
green5: '#082b03', green5: '#082b03',
} }
export const gradients = {
primary: {start: '#db00ff', end: '#ff007a'},
}
export const s = StyleSheet.create({ export const s = StyleSheet.create({
// font weights // font weights
fw600: {fontWeight: '600'}, fw600: {fontWeight: '600'},
@ -128,6 +138,12 @@ export const s = StyleSheet.create({
blue4: {color: colors.blue4}, blue4: {color: colors.blue4},
blue5: {color: colors.blue5}, blue5: {color: colors.blue5},
red1: {color: colors.red1},
red2: {color: colors.red2},
red3: {color: colors.red3},
red4: {color: colors.red4},
red5: {color: colors.red5},
pink1: {color: colors.pink1}, pink1: {color: colors.pink1},
pink2: {color: colors.pink2}, pink2: {color: colors.pink2},
pink3: {color: colors.pink3}, pink3: {color: colors.pink3},

1
src/view/shell/mobile/history-menu.tsx
View File

@ -36,6 +36,7 @@ export function createBackMenu(tab: NavigationTabModel): RootSiblings {
) )
return sibling return sibling
} }
export function createForwardMenu(tab: NavigationTabModel): RootSiblings { export function createForwardMenu(tab: NavigationTabModel): RootSiblings {
const onPressItem = (index: number) => { const onPressItem = (index: number) => {
sibling.destroy() sibling.destroy()