Unify the color palette
parent
97f52b6a03
commit
b4802c6b5b
|
@ -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]}>
|
||||
· {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,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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]}>
|
||||
· {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,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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]}>
|
||||
· {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,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -1,5 +1,41 @@
|
|||
import {StyleSheet} from 'react-native'
|
||||
|
||||
// 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
|
||||
export const colors = {
|
||||
white: '#ffffff',
|
||||
black: '#000000',
|
||||
|
||||
gray1: '#f8f3f3',
|
||||
gray2: '#e4e2e2',
|
||||
gray3: '#c1b9b9',
|
||||
gray4: '#968d8d',
|
||||
gray5: '#645454',
|
||||
|
||||
blue1: '#8bc7fd',
|
||||
blue2: '#52acfe',
|
||||
blue3: '#0085ff',
|
||||
blue4: '#0062bd',
|
||||
blue5: '#034581',
|
||||
|
||||
pink1: '#f8ccff',
|
||||
pink2: '#e966ff',
|
||||
pink3: '#db00ff',
|
||||
pink4: '#a601c1',
|
||||
pink5: '#570066',
|
||||
|
||||
purple1: '#ebdbff',
|
||||
purple2: '#ba85ff',
|
||||
purple3: '#9747ff',
|
||||
purple4: '#6d00fa',
|
||||
purple5: '#380080',
|
||||
|
||||
green1: '#c1ffb8',
|
||||
green2: '#27f406',
|
||||
green3: '#20bc07',
|
||||
green4: '#148203',
|
||||
green5: '#082b03',
|
||||
}
|
||||
|
||||
export const s = StyleSheet.create({
|
||||
// font weights
|
||||
fw600: {fontWeight: '600'},
|
||||
|
@ -31,13 +67,6 @@ export const s = StyleSheet.create({
|
|||
['lh18-1']: {lineHeight: 18},
|
||||
['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px
|
||||
|
||||
// colors
|
||||
black: {color: 'black'},
|
||||
gray: {color: 'gray'},
|
||||
blue: {color: '#006bf7'},
|
||||
green: {color: 'green'},
|
||||
red: {color: 'red'},
|
||||
|
||||
// margins
|
||||
mr2: {marginRight: 2},
|
||||
mr5: {marginRight: 5},
|
||||
|
@ -82,4 +111,38 @@ export const s = StyleSheet.create({
|
|||
textLeft: {textAlign: 'left'},
|
||||
textCenter: {textAlign: 'center'},
|
||||
textRight: {textAlign: 'right'},
|
||||
|
||||
// colors
|
||||
white: {color: colors.white},
|
||||
black: {color: colors.black},
|
||||
|
||||
gray1: {color: colors.gray1},
|
||||
gray2: {color: colors.gray2},
|
||||
gray3: {color: colors.gray3},
|
||||
gray4: {color: colors.gray4},
|
||||
gray5: {color: colors.gray5},
|
||||
|
||||
blue1: {color: colors.blue1},
|
||||
blue2: {color: colors.blue2},
|
||||
blue3: {color: colors.blue3},
|
||||
blue4: {color: colors.blue4},
|
||||
blue5: {color: colors.blue5},
|
||||
|
||||
pink1: {color: colors.pink1},
|
||||
pink2: {color: colors.pink2},
|
||||
pink3: {color: colors.pink3},
|
||||
pink4: {color: colors.pink4},
|
||||
pink5: {color: colors.pink5},
|
||||
|
||||
purple1: {color: colors.purple1},
|
||||
purple2: {color: colors.purple2},
|
||||
purple3: {color: colors.purple3},
|
||||
purple4: {color: colors.purple4},
|
||||
purple5: {color: colors.purple5},
|
||||
|
||||
green1: {color: colors.green1},
|
||||
green2: {color: colors.green2},
|
||||
green3: {color: colors.green3},
|
||||
green4: {color: colors.green4},
|
||||
green5: {color: colors.green5},
|
||||
})
|
||||
|
|
|
@ -16,6 +16,7 @@ import {NavigationModel} from '../../../state/models/navigation'
|
|||
import {match, MatchResult} from '../../routes'
|
||||
import {TabsSelectorModal} from './tabs-selector'
|
||||
import {createBackMenu, createForwardMenu} from './history-menu'
|
||||
import {colors} from '../../lib/styles'
|
||||
|
||||
const Location = ({icon, title}: {icon: IconProp; title?: string}) => {
|
||||
return (
|
||||
|
@ -99,7 +100,7 @@ export const MobileShell: React.FC = observer(() => {
|
|||
{screenRenderDesc.screens.map(({Com, params, key, activityState}) => (
|
||||
<Screen
|
||||
key={key}
|
||||
style={{backgroundColor: '#fff'}}
|
||||
style={styles.screen}
|
||||
activityState={activityState}>
|
||||
<Com params={params} />
|
||||
</Screen>
|
||||
|
@ -177,11 +178,14 @@ const styles = StyleSheet.create({
|
|||
innerContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
screen: {
|
||||
backgroundColor: colors.gray1,
|
||||
},
|
||||
topBar: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: colors.white,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#ccc',
|
||||
borderBottomColor: colors.gray2,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
paddingTop: 40,
|
||||
|
@ -198,24 +202,24 @@ const styles = StyleSheet.create({
|
|||
backgroundColor: '#F8F3F3',
|
||||
},
|
||||
locationIcon: {
|
||||
color: '#DB00FF',
|
||||
color: colors.pink3,
|
||||
marginRight: 8,
|
||||
},
|
||||
locationIconLight: {
|
||||
color: '#909090',
|
||||
color: colors.gray3,
|
||||
marginRight: 8,
|
||||
},
|
||||
locationText: {
|
||||
color: '#000',
|
||||
color: colors.black,
|
||||
},
|
||||
locationTextLight: {
|
||||
color: '#868788',
|
||||
color: colors.gray4,
|
||||
},
|
||||
bottomBar: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#fff',
|
||||
backgroundColor: colors.white,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#ccc',
|
||||
borderTopColor: colors.gray2,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 15,
|
||||
paddingBottom: 20,
|
||||
|
@ -230,6 +234,6 @@ const styles = StyleSheet.create({
|
|||
marginRight: 'auto',
|
||||
},
|
||||
inactive: {
|
||||
color: '#888',
|
||||
color: colors.gray3,
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue