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

Unify the color palette

Browse source
This commit is contained in:
Paul Frazee 2022-08-31 17:06:44 -05:00
parent 97f52b6a03
commit b4802c6b5b
12 changed files with 152 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/view/com/feed/FeedItem.tsx
View file

@ -4,7 +4,7 @@ import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {bsky, AdxUri} from '@adxp/mock-api'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {FeedViewItemModel} from '../../../state/models/feed-view'
import {s} from '../../lib/styles'
import {s, colors} from '../../lib/styles'
import {ago} from '../../lib/strings'
import {AVIS} from '../../lib/assets'
import {useStores} from '../../../state'
@ -45,7 +45,7 @@ export const FeedItem = observer(function FeedItem({
{item.repostedBy && (
<View style={styles.repostedBy}>
<FontAwesomeIcon icon="retweet" style={styles.repostedByIcon} />
<Text style={[s.gray, s.bold, s.f13]}>
<Text style={[s.gray4, s.bold, s.f13]}>
Reposted by {item.repostedBy.displayName}
</Text>
</View>
@ -65,11 +65,11 @@ export const FeedItem = observer(function FeedItem({
{item.author.displayName}
</Text>
<Text
style={[styles.metaItem, s.f14, s.gray]}
style={[styles.metaItem, s.f14, s.gray5]}
onPress={onPressAuthor}>
@{item.author.name}
</Text>
<Text style={[styles.metaItem, s.f14, s.gray]}>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
</View>
@ -96,7 +96,7 @@ export const FeedItem = observer(function FeedItem({
/>
<Text
style={
item.myState.hasReposted ? [s.bold, s.green] : undefined
item.myState.hasReposted ? [s.bold, s.green3] : undefined
}>
{item.repostCount}
</Text>
@ -108,7 +108,8 @@ export const FeedItem = observer(function FeedItem({
}
icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
/>
<Text style={item.myState.hasLiked ? [s.bold, s.red] : undefined}>
<Text
style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}>
{item.likeCount}
</Text>
</TouchableOpacity>
@ -134,7 +135,7 @@ const styles = StyleSheet.create({
borderRadius: 10,
margin: 2,
marginBottom: 0,
backgroundColor: '#fff',
backgroundColor: colors.white,
padding: 10,
},
repostedBy: {
@ -143,7 +144,7 @@ const styles = StyleSheet.create({
},
repostedByIcon: {
marginRight: 2,
color: 'gray',
color: colors.gray4,
},
layout: {
flexDirection: 'row',
@ -184,14 +185,14 @@ const styles = StyleSheet.create({
},
ctrlIcon: {
marginRight: 5,
color: 'gray',
color: colors.gray5,
},
ctrlIconReposted: {
marginRight: 5,
color: 'green',
color: colors.green3,
},
ctrlIconLiked: {
marginRight: 5,
color: 'red',
color: colors.pink3,
},
})

8
src/view/com/notifications/FeedItem.tsx
View file

@ -4,7 +4,7 @@ import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {AdxUri} from '@adxp/mock-api'
import {FontAwesomeIcon, Props} from '@fortawesome/react-native-fontawesome'
import {NotificationsViewItemModel} from '../../../state/models/notifications-view'
import {s} from '../../lib/styles'
import {s, colors} from '../../lib/styles'
import {ago} from '../../lib/strings'
import {AVIS} from '../../lib/assets'
import {PostText} from '../post/PostText'
@ -69,12 +69,12 @@ export const FeedItem = observer(function FeedItem({
{item.author.displayName}
</Text>
<Text style={[styles.metaItem, s.f14]}>{action}</Text>
<Text style={[styles.metaItem, s.f14, s.gray]}>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
{ago(item.indexedAt)}
</Text>
</View>
{item.isLike || item.isRepost ? (
<PostText uri={item.subjectUri} style={[s.gray]} />
<PostText uri={item.subjectUri} style={[s.gray5]} />
) : (
<></>
)}
@ -93,7 +93,7 @@ export const FeedItem = observer(function FeedItem({
const styles = StyleSheet.create({
outer: {
backgroundColor: '#fff',
backgroundColor: colors.white,
padding: 10,
paddingBottom: 0,
},

9
src/view/com/post-thread/PostLikedBy.tsx
View file

@ -14,7 +14,7 @@ import {
LikedByViewItemModel,
} from '../../../state/models/liked-by-view'
import {useStores} from '../../../state'
import {s} from '../../lib/styles'
import {s, colors} from '../../lib/styles'
import {AVIS} from '../../lib/assets'
export const PostLikedBy = observer(function PostLikedBy({uri}: {uri: string}) {
@ -88,7 +88,7 @@ const LikedByItem = ({item}: {item: LikedByViewItemModel}) => {
</View>
<View style={styles.layoutContent}>
<Text style={[s.f15, s.bold]}>{item.displayName}</Text>
<Text style={[s.f14, s.gray]}>@{item.name}</Text>
<Text style={[s.f14, s.gray5]}>@{item.name}</Text>
</View>
</View>
</TouchableOpacity>
@ -97,9 +97,8 @@ const LikedByItem = ({item}: {item: LikedByViewItemModel}) => {
const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
borderTopColor: '#e8e8e8',
backgroundColor: '#fff',
marginTop: 1,
backgroundColor: colors.white,
},
layout: {
flexDirection: 'row',

9
src/view/com/post-thread/PostRepostedBy.tsx
View file

@ -14,7 +14,7 @@ import {
RepostedByViewItemModel,
} from '../../../state/models/reposted-by-view'
import {useStores} from '../../../state'
import {s} from '../../lib/styles'
import {s, colors} from '../../lib/styles'
import {AVIS} from '../../lib/assets'
export const PostRepostedBy = observer(function PostRepostedBy({
@ -94,7 +94,7 @@ const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
</View>
<View style={styles.layoutContent}>
<Text style={[s.f15, s.bold]}>{item.displayName}</Text>
<Text style={[s.f14, s.gray]}>@{item.name}</Text>
<Text style={[s.f14, s.gray5]}>@{item.name}</Text>
</View>
</View>
</TouchableOpacity>
@ -103,9 +103,8 @@ const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
borderTopColor: '#e8e8e8',
backgroundColor: '#fff',
marginTop: 1,
backgroundColor: colors.white,
},
layout: {
flexDirection: 'row',

30
src/view/com/post-thread/PostThreadItem.tsx
View file

@ -4,7 +4,7 @@ import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {bsky, AdxUri} from '@adxp/mock-api'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {PostThreadViewPostModel} from '../../../state/models/post-thread-view'
import {s} from '../../lib/styles'
import {s, colors} from '../../lib/styles'
import {ago, pluralize} from '../../lib/strings'
import {AVIS} from '../../lib/assets'
import {useStores} from '../../../state'
@ -81,11 +81,11 @@ export const PostThreadItem = observer(function PostThreadItem({
{item.author.displayName}
</Text>
<Text
style={[styles.metaItem, s.f14, s.gray]}
style={[styles.metaItem, s.f14, s.gray5]}
onPress={onPressAuthor}>
@{item.author.name}
</Text>
<Text style={[styles.metaItem, s.f14, s.gray]}>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
</View>
@ -102,7 +102,7 @@ export const PostThreadItem = observer(function PostThreadItem({
<View style={styles.expandedInfo}>
{item.repostCount ? (
<Text
style={[styles.expandedInfoItem, s.gray, s.semiBold]}
style={[styles.expandedInfoItem, s.gray5, s.semiBold]}
onPress={onPressReposts}>
<Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '}
{pluralize(item.repostCount, 'repost')}
@ -112,7 +112,7 @@ export const PostThreadItem = observer(function PostThreadItem({
)}
{item.likeCount ? (
<Text
style={[styles.expandedInfoItem, s.gray, s.semiBold]}
style={[styles.expandedInfoItem, s.gray5, s.semiBold]}
onPress={onPressLikes}>
<Text style={[s.bold, s.black]}>{item.likeCount}</Text>{' '}
{pluralize(item.likeCount, 'like')}
@ -144,7 +144,7 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
<Text
style={
item.myState.hasReposted ? [s.bold, s.green] : undefined
item.myState.hasReposted ? [s.bold, s.green3] : undefined
}>
{item.repostCount}
</Text>
@ -156,7 +156,8 @@ export const PostThreadItem = observer(function PostThreadItem({
}
icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
/>
<Text style={item.myState.hasLiked ? [s.bold, s.red] : undefined}>
<Text
style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}>
{item.likeCount}
</Text>
</TouchableOpacity>
@ -177,16 +178,15 @@ export const PostThreadItem = observer(function PostThreadItem({
const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
borderTopColor: '#e8e8e8',
backgroundColor: '#fff',
marginTop: 1,
backgroundColor: colors.white,
},
layout: {
flexDirection: 'row',
},
replyBar: {
width: 5,
backgroundColor: 'gray',
backgroundColor: colors.gray2,
marginRight: 2,
},
layoutAvi: {
@ -222,7 +222,7 @@ const styles = StyleSheet.create({
expandedInfo: {
flexDirection: 'row',
padding: 10,
borderColor: '#e8e8e8',
borderColor: colors.gray2,
borderTopWidth: 1,
borderBottomWidth: 1,
marginTop: 5,
@ -243,14 +243,14 @@ const styles = StyleSheet.create({
},
ctrlIcon: {
marginRight: 5,
color: 'gray',
color: colors.gray5,
},
ctrlIconReposted: {
marginRight: 5,
color: 'green',
color: colors.green3,
},
ctrlIconLiked: {
marginRight: 5,
color: 'red',
color: colors.pink3,
},
})

22
src/view/com/post/Post.tsx
View file

@ -12,7 +12,7 @@ import {
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {PostThreadViewModel} from '../../../state/models/post-thread-view'
import {useStores} from '../../../state'
import {s} from '../../lib/styles'
import {s, colors} from '../../lib/styles'
import {ago} from '../../lib/strings'
import {AVIS} from '../../lib/assets'
@ -92,11 +92,11 @@ export const Post = observer(function Post({uri}: {uri: string}) {
{item.author.displayName}
</Text>
<Text
style={[styles.metaItem, s.f14, s.gray]}
style={[styles.metaItem, s.f14, s.gray5]}
onPress={onPressAuthor}>
@{item.author.name}
</Text>
<Text style={[styles.metaItem, s.f14, s.gray]}>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
</View>
@ -123,7 +123,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
/>
<Text
style={
item.myState.hasReposted ? [s.bold, s.green] : undefined
item.myState.hasReposted ? [s.bold, s.green3] : undefined
}>
{item.repostCount}
</Text>
@ -135,7 +135,8 @@ export const Post = observer(function Post({uri}: {uri: string}) {
}
icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
/>
<Text style={item.myState.hasLiked ? [s.bold, s.red] : undefined}>
<Text
style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}>
{item.likeCount}
</Text>
</TouchableOpacity>
@ -154,10 +155,9 @@ export const Post = observer(function Post({uri}: {uri: string}) {
const styles = StyleSheet.create({
outer: {
borderWidth: 1,
borderColor: '#e8e8e8',
marginTop: 1,
borderRadius: 4,
backgroundColor: '#fff',
backgroundColor: colors.white,
padding: 10,
},
layout: {
@ -198,14 +198,14 @@ const styles = StyleSheet.create({
},
ctrlIcon: {
marginRight: 5,
color: 'gray',
color: colors.gray5,
},
ctrlIconReposted: {
marginRight: 5,
color: 'green',
color: colors.green3,
},
ctrlIconLiked: {
marginRight: 5,
color: 'red',
color: colors.pink3,
},
})

9
src/view/com/profile/ProfileFollowers.tsx
View file

@ -14,7 +14,7 @@ import {
FollowerItem,
} from '../../../state/models/user-followers-view'
import {useStores} from '../../../state'
import {s} from '../../lib/styles'
import {s, colors} from '../../lib/styles'
import {AVIS} from '../../lib/assets'
export const ProfileFollowers = observer(function ProfileFollowers({
@ -92,7 +92,7 @@ const User = ({item}: {item: FollowerItem}) => {
</View>
<View style={styles.layoutContent}>
<Text style={[s.f15, s.bold]}>{item.displayName}</Text>
<Text style={[s.f14, s.gray]}>@{item.name}</Text>
<Text style={[s.f14, s.gray5]}>@{item.name}</Text>
</View>
</View>
</TouchableOpacity>
@ -101,9 +101,8 @@ const User = ({item}: {item: FollowerItem}) => {
const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
borderTopColor: '#e8e8e8',
backgroundColor: '#fff',
marginTop: 1,
backgroundColor: colors.white,
},
layout: {
flexDirection: 'row',

9
src/view/com/profile/ProfileFollows.tsx
View file

@ -14,7 +14,7 @@ import {
FollowItem,
} from '../../../state/models/user-follows-view'
import {useStores} from '../../../state'
import {s} from '../../lib/styles'
import {s, colors} from '../../lib/styles'
import {AVIS} from '../../lib/assets'
export const ProfileFollows = observer(function ProfileFollows({
@ -92,7 +92,7 @@ const User = ({item}: {item: FollowItem}) => {
</View>
<View style={styles.layoutContent}>
<Text style={[s.f15, s.bold]}>{item.displayName}</Text>
<Text style={[s.f14, s.gray]}>@{item.name}</Text>
<Text style={[s.f14, s.gray5]}>@{item.name}</Text>
</View>
</View>
</TouchableOpacity>
@ -101,9 +101,8 @@ const User = ({item}: {item: FollowItem}) => {
const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
borderTopColor: '#e8e8e8',
backgroundColor: '#fff',
marginTop: 1,
backgroundColor: colors.white,
},
layout: {
flexDirection: 'row',

14
src/view/com/profile/ProfileHeader.tsx
View file

@ -12,7 +12,7 @@ import {
import {ProfileViewModel} from '../../../state/models/profile-view'
import {useStores} from '../../../state'
import {pluralize} from '../../lib/strings'
import {s} from '../../lib/styles'
import {s, colors} from '../../lib/styles'
import {AVIS} from '../../lib/assets'
import Toast from '../util/Toast'
@ -89,7 +89,7 @@ export const ProfileHeader = observer(function ProfileHeader({
<Image style={styles.avi} source={AVIS[view.name] || AVIS['alice.com']} />
<View style={[styles.nameLine, s.mb2]}>
<Text style={[s.bold, s.f18, s.mr2]}>{view.displayName}</Text>
<Text style={[s.gray]}>@{view.name}</Text>
<Text style={[s.gray5]}>@{view.name}</Text>
</View>
{view.description && (
<Text style={[s.mb5, s.f15, s['lh15-1.3']]}>{view.description}</Text>
@ -99,17 +99,17 @@ export const ProfileHeader = observer(function ProfileHeader({
style={[s.flexRow, s.mr10]}
onPress={onPressFollowers}>
<Text style={[s.bold, s.mr2]}>{view.followersCount}</Text>
<Text style={s.gray}>
<Text style={s.gray5}>
{pluralize(view.followersCount, 'follower')}
</Text>
</TouchableOpacity>
<TouchableOpacity style={[s.flexRow, s.mr10]} onPress={onPressFollows}>
<Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
<Text style={s.gray}>following</Text>
<Text style={s.gray5}>following</Text>
</TouchableOpacity>
<View style={[s.flexRow, s.mr10]}>
<Text style={[s.bold, s.mr2]}>{view.postsCount}</Text>
<Text style={s.gray}>{pluralize(view.postsCount, 'post')}</Text>
<Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text>
</View>
</View>
<View>
@ -124,10 +124,10 @@ export const ProfileHeader = observer(function ProfileHeader({
const styles = StyleSheet.create({
outer: {
backgroundColor: '#fff',
backgroundColor: colors.white,
padding: 10,
borderBottomWidth: 1,
borderColor: '#eee',
borderColor: colors.gray2,
},
avi: {
width: 60,