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

Sizing and spacing fixes based on on-device testing

zio/stable
Paul Frazee 2022-11-05 16:12:06 -05:00
parent 5d6ab1f548
commit ff9161d8e7
13 changed files with 120 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -133,20 +133,20 @@ export const FeedItem = observer(function FeedItem({
style={styles.metaItem} style={styles.metaItem}
href={authors[0].href} href={authors[0].href}
title={`@${authors[0].handle}`}> title={`@${authors[0].handle}`}>
<Text style={[s.f14, s.bold]}> <Text style={[s.f15, s.bold]}>
{authors[0].displayName || authors[0].handle} {authors[0].displayName || authors[0].handle}
</Text> </Text>
</Link> </Link>
{authors.length > 1 ? ( {authors.length > 1 ? (
<> <>
<Text style={[styles.metaItem, s.f14]}>and</Text> <Text style={[styles.metaItem, s.f15]}>and</Text>
<Text style={[styles.metaItem, s.f14, s.bold]}> <Text style={[styles.metaItem, s.f15, s.bold]}>
{authors.length - 1} {pluralize(authors.length - 1, 'other')} {authors.length - 1} {pluralize(authors.length - 1, 'other')}
</Text> </Text>
</> </>
) : undefined} ) : undefined}
<Text style={[styles.metaItem, s.f14]}>{action}</Text> <Text style={[styles.metaItem, s.f15]}>{action}</Text>
<Text style={[styles.metaItem, s.f14, s.gray5]}> <Text style={[styles.metaItem, s.f15, s.gray5]}>
{ago(item.indexedAt)} {ago(item.indexedAt)}
</Text> </Text>
</View> </View>

14
src/view/com/post-thread/PostThread.tsx
View File

@ -1,4 +1,4 @@
import React, {useState, useEffect, useRef} from 'react' import React, {useState, useEffect} from 'react'
import {observer} from 'mobx-react-lite' import {observer} from 'mobx-react-lite'
import {ActivityIndicator, FlatList, Text, View} from 'react-native' import {ActivityIndicator, FlatList, Text, View} from 'react-native'
import { import {
@ -9,12 +9,9 @@ import {useStores} from '../../../state'
import {SharePostModel} from '../../../state/models/shell' import {SharePostModel} from '../../../state/models/shell'
import {PostThreadItem} from './PostThreadItem' import {PostThreadItem} from './PostThreadItem'
const UPDATE_DELAY = 2e3 // wait 2s before refetching the thread for updates
export const PostThread = observer(function PostThread({uri}: {uri: string}) { export const PostThread = observer(function PostThread({uri}: {uri: string}) {
const store = useStores() const store = useStores()
const [view, setView] = useState<PostThreadViewModel | undefined>() const [view, setView] = useState<PostThreadViewModel | undefined>()
const [lastUpdate, setLastUpdate] = useState<number>(Date.now())
useEffect(() => { useEffect(() => {
if (view?.params.uri === uri) { if (view?.params.uri === uri) {
@ -27,14 +24,6 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
newView.setup().catch(err => console.error('Failed to fetch thread', err)) newView.setup().catch(err => console.error('Failed to fetch thread', err))
}, [uri, view?.params.uri, store]) }, [uri, view?.params.uri, store])
// TODO
// useFocusEffect(() => {
// if (Date.now() - lastUpdate > UPDATE_DELAY) {
// view?.update()
// setLastUpdate(Date.now())
// }
// })
const onPressShare = (uri: string) => { const onPressShare = (uri: string) => {
store.shell.openModal(new SharePostModel(uri)) store.shell.openModal(new SharePostModel(uri))
} }
@ -83,6 +72,7 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
renderItem={renderItem} renderItem={renderItem}
refreshing={view.isRefreshing} refreshing={view.isRefreshing}
onRefresh={onRefresh} onRefresh={onRefresh}
style={{flex: 1}}
/> />
) )
}) })

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

@ -77,14 +77,14 @@ export const PostThreadItem = observer(function PostThreadItem({
/> />
</Link> </Link>
<View style={styles.layoutContent}> <View style={styles.layoutContent}>
<View style={[styles.meta, s.mt5]}> <View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
<Link <Link
style={styles.metaItem} style={styles.metaItem}
href={authorHref} href={authorHref}
title={authorTitle}> title={authorTitle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text> <Text style={[s.f16, s.bold]}>{item.author.displayName}</Text>
</Link> </Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}> <Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)} &middot; {ago(item.indexedAt)}
</Text> </Text>
<View style={s.flex1} /> <View style={s.flex1} />
@ -104,7 +104,7 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.metaItem} style={styles.metaItem}
href={authorHref} href={authorHref}
title={authorTitle}> title={authorTitle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text> <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link> </Link>
</View> </View>
</View> </View>
@ -125,8 +125,10 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.expandedInfoItem} style={styles.expandedInfoItem}
href={repostsHref} href={repostsHref}
title={repostsTitle}> title={repostsTitle}>
<Text style={[s.gray5, s.semiBold]}> <Text style={[s.gray5, s.semiBold, s.f16]}>
<Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '} <Text style={[s.bold, s.black, s.f16]}>
{item.repostCount}
</Text>{' '}
{pluralize(item.repostCount, 'repost')} {pluralize(item.repostCount, 'repost')}
</Text> </Text>
</Link> </Link>
@ -138,8 +140,10 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.expandedInfoItem} style={styles.expandedInfoItem}
href={likesHref} href={likesHref}
title={likesTitle}> title={likesTitle}>
<Text style={[s.gray5, s.semiBold]}> <Text style={[s.gray5, s.semiBold, s.f16]}>
<Text style={[s.bold, s.black]}>{item.likeCount}</Text>{' '} <Text style={[s.bold, s.black, s.f16]}>
{item.likeCount}
</Text>{' '}
{pluralize(item.likeCount, 'like')} {pluralize(item.likeCount, 'like')}
</Text> </Text>
</Link> </Link>
@ -205,37 +209,20 @@ export const PostThreadItem = observer(function PostThreadItem({
/> />
</Link> </Link>
<View style={styles.layoutContent}> <View style={styles.layoutContent}>
{item.replyingToAuthor &&
item.replyingToAuthor !== item.author.handle && (
<View style={[s.flexRow, {alignItems: 'center'}]}>
<FontAwesomeIcon
icon="reply"
size={9}
style={[s.gray4, s.mr5]}
/>
<Link
href={`/profile/${item.replyingToAuthor}`}
title={`@${item.replyingToAuthor}`}>
<Text style={[s.f12, s.gray5]}>
@{item.replyingToAuthor}
</Text>
</Link>
</View>
)}
<View style={styles.meta}> <View style={styles.meta}>
<Link <Link
style={styles.metaItem} style={styles.metaItem}
href={authorHref} href={authorHref}
title={authorTitle}> title={authorTitle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text> <Text style={[s.f17, s.bold]}>{item.author.displayName}</Text>
</Link> </Link>
<Link <Link
style={styles.metaItem} style={styles.metaItem}
href={authorHref} href={authorHref}
title={authorTitle}> title={authorTitle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text> <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link> </Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}> <Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)} &middot; {ago(item.indexedAt)}
</Text> </Text>
<View style={s.flex1} /> <View style={s.flex1} />
@ -250,11 +237,24 @@ export const PostThreadItem = observer(function PostThreadItem({
/> />
</PostDropdownBtn> </PostDropdownBtn>
</View> </View>
{item.replyingToAuthor &&
item.replyingToAuthor !== item.author.handle && (
<View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
<Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
<Link
href={`/profile/${item.replyingToAuthor}`}
title={`@${item.replyingToAuthor}`}>
<Text style={[s.f14, s.blue3]}>
@{item.replyingToAuthor}
</Text>
</Link>
</View>
)}
<View style={styles.postTextContainer}> <View style={styles.postTextContainer}>
<RichText <RichText
text={record.text} text={record.text}
entities={record.entities} entities={record.entities}
style={[styles.postText, s.f15, s['lh15-1.3']]} style={[styles.postText, s.f17, s['lh17-1.3']]}
/> />
</View> </View>
<PostCtrls <PostCtrls

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

@ -97,12 +97,12 @@ export const Post = observer(function Post({uri}: {uri: string}) {
<View style={styles.layoutContent}> <View style={styles.layoutContent}>
<View style={styles.meta}> <View style={styles.meta}>
<Link style={styles.metaItem} href={authorHref} title={authorTitle}> <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text> <Text style={[s.f16, s.bold]}>{item.author.displayName}</Text>
</Link> </Link>
<Link style={styles.metaItem} href={authorHref} title={authorTitle}> <Link style={styles.metaItem} href={authorHref} title={authorTitle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text> <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link> </Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}> <Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)} &middot; {ago(item.indexedAt)}
</Text> </Text>
</View> </View>
@ -123,7 +123,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
<RichText <RichText
text={record.text} text={record.text}
entities={record.entities} entities={record.entities}
style={[s.f15, s['lh15-1.3']]} style={[s.f16, s['lh16-1.3']]}
/> />
</View> </View>
<PostCtrls <PostCtrls

15
src/view/com/posts/FeedItem.tsx
View File

@ -84,15 +84,15 @@ export const FeedItem = observer(function FeedItem({
style={styles.metaItem} style={styles.metaItem}
href={authorHref} href={authorHref}
title={item.author.handle}> title={item.author.handle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text> <Text style={[s.f17, s.bold]}>{item.author.displayName}</Text>
</Link> </Link>
<Link <Link
style={styles.metaItem} style={styles.metaItem}
href={authorHref} href={authorHref}
title={item.author.handle}> title={item.author.handle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text> <Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link> </Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}> <Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)} &middot; {ago(item.indexedAt)}
</Text> </Text>
<View style={s.flex1} /> <View style={s.flex1} />
@ -108,13 +108,12 @@ export const FeedItem = observer(function FeedItem({
</PostDropdownBtn> </PostDropdownBtn>
</View> </View>
{replyHref !== '' && ( {replyHref !== '' && (
<View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}> <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
<FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} /> <Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
<Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
<Link href={replyHref} title="Parent post"> <Link href={replyHref} title="Parent post">
<UserInfoText <UserInfoText
did={replyAuthorDid} did={replyAuthorDid}
style={[s.f12, s.gray5]} style={[s.f15, s.blue3]}
prefix="@" prefix="@"
/> />
</Link> </Link>
@ -124,7 +123,7 @@ export const FeedItem = observer(function FeedItem({
<RichText <RichText
text={record.text} text={record.text}
entities={record.entities} entities={record.entities}
style={[s.f15, s['lh15-1.3']]} style={[s.f17, s['lh17-1.3']]}
/> />
</View> </View>
<PostCtrls <PostCtrls

37
src/view/com/profile/ProfileHeader.tsx
View File

@ -154,8 +154,10 @@ export const ProfileHeader = observer(function ProfileHeader({
<TouchableOpacity <TouchableOpacity
style={[s.flexRow, s.mr10]} style={[s.flexRow, s.mr10]}
onPress={onPressFollowers}> onPress={onPressFollowers}>
<Text style={[s.bold, s.mr2]}>{view.followersCount}</Text> <Text style={[s.bold, s.mr2, styles.metricsText]}>
<Text style={s.gray5}> {view.followersCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>
{pluralize(view.followersCount, 'follower')} {pluralize(view.followersCount, 'follower')}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
@ -163,27 +165,35 @@ export const ProfileHeader = observer(function ProfileHeader({
<TouchableOpacity <TouchableOpacity
style={[s.flexRow, s.mr10]} style={[s.flexRow, s.mr10]}
onPress={onPressFollows}> onPress={onPressFollows}>
<Text style={[s.bold, s.mr2]}>{view.followsCount}</Text> <Text style={[s.bold, s.mr2, styles.metricsText]}>
<Text style={s.gray5}>following</Text> {view.followsCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>following</Text>
</TouchableOpacity> </TouchableOpacity>
) : undefined} ) : undefined}
{view.isScene ? ( {view.isScene ? (
<TouchableOpacity <TouchableOpacity
style={[s.flexRow, s.mr10]} style={[s.flexRow, s.mr10]}
onPress={onPressFollows}> onPress={onPressFollows}>
<Text style={[s.bold, s.mr2]}>{view.followsCount}</Text> <Text style={[s.bold, s.mr2, styles.metricsText]}>
<Text style={s.gray5}> {view.followsCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>
{pluralize(view.followsCount, 'member')} {pluralize(view.followsCount, 'member')}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
) : undefined} ) : undefined}
<View style={[s.flexRow, s.mr10]}> <View style={[s.flexRow, s.mr10]}>
<Text style={[s.bold, s.mr2]}>{view.postsCount}</Text> <Text style={[s.bold, s.mr2, styles.metricsText]}>
<Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text> {view.postsCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>
{pluralize(view.postsCount, 'post')}
</Text>
</View> </View>
</View> </View>
{view.description && ( {view.description && (
<Text style={[s.mb5, s.f15, s['lh15-1.3']]}>{view.description}</Text> <Text style={[s.mb5, s.f16, s['lh16-1.3']]}>{view.description}</Text>
)} )}
{ {
undefined /*<View style={styles.badgesLine}> undefined /*<View style={styles.badgesLine}>
@ -268,7 +278,7 @@ const styles = StyleSheet.create({
// marginBottom: 14, // marginBottom: 14,
}, },
displayName: { displayName: {
fontSize: 24, fontSize: 28,
fontWeight: 'bold', fontWeight: 'bold',
}, },
@ -277,7 +287,7 @@ const styles = StyleSheet.create({
marginBottom: 8, marginBottom: 8,
}, },
handle: { handle: {
fontSize: 14, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
color: colors.gray5, color: colors.gray5,
}, },
@ -288,7 +298,7 @@ const styles = StyleSheet.create({
marginRight: 5, marginRight: 5,
}, },
typeLabel: { typeLabel: {
fontSize: 14, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
color: colors.gray5, color: colors.gray5,
}, },
@ -297,6 +307,9 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
marginBottom: 8, marginBottom: 8,
}, },
metricsText: {
fontSize: 15,
},
badgesLine: { badgesLine: {
flexDirection: 'row', flexDirection: 'row',

8
src/view/com/util/DropdownBtn.tsx
View File

@ -157,9 +157,9 @@ const styles = StyleSheet.create({
menuItem: { menuItem: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
paddingVertical: 6, paddingVertical: 10,
paddingLeft: 10, paddingLeft: 15,
paddingRight: 30, paddingRight: 40,
}, },
menuItemBorder: { menuItemBorder: {
borderTopWidth: 1, borderTopWidth: 1,
@ -172,6 +172,6 @@ const styles = StyleSheet.create({
marginRight: 8, marginRight: 8,
}, },
label: { label: {
fontSize: 15, fontSize: 18,
}, },
}) })

2
src/view/com/util/UserBanner.tsx
View File

@ -5,7 +5,7 @@ import {getGradient} from '../../lib/asset-gen'
export function UserBanner({handle}: {handle: string}) { export function UserBanner({handle}: {handle: string}) {
const gradient = getGradient(handle) const gradient = getGradient(handle)
return ( return (
<Svg width="400" height="120" viewBox="50 0 200 100"> <Svg width="100%" height="120" viewBox="50 0 200 100">
<Defs> <Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1"> <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<Stop offset="0" stopColor={gradient[0]} stopOpacity="1" /> <Stop offset="0" stopColor={gradient[0]} stopOpacity="1" />

26
src/view/lib/icons.tsx
View File

@ -31,12 +31,18 @@ export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
) )
} }
export function HomeIcon({style}: {style?: StyleProp<ViewStyle>}) { export function HomeIcon({
style,
size,
}: {
style?: StyleProp<ViewStyle>
size?: string | number
}) {
return ( return (
<Svg <Svg
viewBox="0 0 48 48" viewBox="0 0 48 48"
width="24" width={size || 24}
height="24" height={size || 24}
stroke="currentColor" stroke="currentColor"
style={style}> style={style}>
<Path <Path
@ -73,14 +79,20 @@ export function BellIcon({
// Copyright (c) 2020 Refactoring UI Inc. // Copyright (c) 2020 Refactoring UI Inc.
// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
export function UserGroupIcon({style}: {style?: StyleProp<ViewStyle>}) { export function UserGroupIcon({
style,
size,
}: {
style?: StyleProp<ViewStyle>
size?: string | number
}) {
return ( return (
<Svg <Svg
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
width="32" width={size || 32}
height="32" height={size || 32}
strokeWidth={1.5} strokeWidth={2}
stroke="currentColor" stroke="currentColor"
style={style}> style={style}>
<Path <Path

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

@ -71,6 +71,7 @@ export const s = StyleSheet.create({
f14: {fontSize: 14}, f14: {fontSize: 14},
f15: {fontSize: 15}, f15: {fontSize: 15},
f16: {fontSize: 16}, f16: {fontSize: 16},
f17: {fontSize: 17},
f18: {fontSize: 18}, f18: {fontSize: 18},
// line heights // line heights
@ -82,6 +83,8 @@ export const s = StyleSheet.create({
['lh15-1.3']: {lineHeight: 19.5}, // 1.3 of 15px ['lh15-1.3']: {lineHeight: 19.5}, // 1.3 of 15px
['lh16-1']: {lineHeight: 16}, ['lh16-1']: {lineHeight: 16},
['lh16-1.3']: {lineHeight: 20.8}, // 1.3 of 16px ['lh16-1.3']: {lineHeight: 20.8}, // 1.3 of 16px
['lh17-1']: {lineHeight: 17},
['lh17-1.3']: {lineHeight: 22.1}, // 1.3 of 16px
['lh18-1']: {lineHeight: 18}, ['lh18-1']: {lineHeight: 18},
['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px ['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px

4
src/view/screens/PostThread.tsx
View File

@ -18,9 +18,11 @@ export const PostThread = ({visible, params}: ScreenParams) => {
}, [visible, store.nav, name]) }, [visible, store.nav, name])
return ( return (
<View> <View style={{flex: 1}}>
<ViewHeader title="Post" subtitle={`by ${name}`} /> <ViewHeader title="Post" subtitle={`by ${name}`} />
<View style={{flex: 1}}>
<PostThreadComponent uri={uri} /> <PostThreadComponent uri={uri} />
</View> </View>
</View>
) )
} }

2
src/view/shell/mobile/Composer.tsx
View File

@ -78,6 +78,6 @@ const styles = StyleSheet.create({
bottom: 0, bottom: 0,
width: '100%', width: '100%',
backgroundColor: '#fff', backgroundColor: '#fff',
paddingTop: 20, paddingTop: 24,
}, },
}) })

24
src/view/shell/mobile/MainMenu.tsx
View File

@ -51,6 +51,10 @@ export const MainMenu = observer(
// rendering // rendering
// = // =
const MenuItemBlank = () => (
<View style={[styles.menuItem, styles.menuItemMargin]} />
)
const MenuItem = ({ const MenuItem = ({
icon, icon,
label, label,
@ -67,16 +71,16 @@ export const MainMenu = observer(
onPress={() => onNavigate(url)}> onPress={() => onNavigate(url)}>
<View style={[styles.menuItemIconWrapper]}> <View style={[styles.menuItemIconWrapper]}>
{icon === 'home' ? ( {icon === 'home' ? (
<HomeIcon style={styles.menuItemIcon} /> <HomeIcon style={styles.menuItemIcon} size="32" />
) : icon === 'user-group' ? ( ) : icon === 'user-group' ? (
<UserGroupIcon style={styles.menuItemIcon} /> <UserGroupIcon style={styles.menuItemIcon} size="36" />
) : icon === 'bell' ? ( ) : icon === 'bell' ? (
<BellIcon style={styles.menuItemIcon} size="28" /> <BellIcon style={styles.menuItemIcon} size="32" />
) : ( ) : (
<FontAwesomeIcon <FontAwesomeIcon
icon={icon} icon={icon}
style={styles.menuItemIcon} style={styles.menuItemIcon}
size={24} size={28}
/> />
)} )}
</View> </View>
@ -133,7 +137,7 @@ export const MainMenu = observer(
onPress={() => onNavigate(`/profile/${store.me.handle || ''}`)}> onPress={() => onNavigate(`/profile/${store.me.handle || ''}`)}>
<View style={styles.profileImage}> <View style={styles.profileImage}>
<UserAvatar <UserAvatar
size={30} size={35}
displayName={store.me.displayName} displayName={store.me.displayName}
handle={store.me.handle || ''} handle={store.me.handle || ''}
/> />
@ -167,6 +171,8 @@ export const MainMenu = observer(
url="/notifications" url="/notifications"
count={store.me.notificationCount} count={store.me.notificationCount}
/> />
<MenuItemBlank />
<MenuItemBlank />
</View> </View>
<Text style={styles.heading}>Scenes</Text> <Text style={styles.heading}>Scenes</Text>
@ -183,6 +189,8 @@ export const MainMenu = observer(
<View style={[styles.menuItems]}> <View style={[styles.menuItems]}>
<MenuItemActor label="Cool People Only" url="/" /> <MenuItemActor label="Cool People Only" url="/" />
<MenuItemActor label="Techsky" url="/" /> <MenuItemActor label="Techsky" url="/" />
<MenuItemBlank />
<MenuItemBlank />
</View> </View>
</Animated.View> </Animated.View>
</SafeAreaView> </SafeAreaView>
@ -215,7 +223,7 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
height: 40, height: 40,
paddingHorizontal: 10, paddingHorizontal: 10,
marginBottom: 10, marginBottom: 16,
}, },
section: { section: {
paddingHorizontal: 10, paddingHorizontal: 10,
@ -238,7 +246,7 @@ const styles = StyleSheet.create({
marginRight: 8, marginRight: 8,
}, },
profileText: { profileText: {
fontSize: 15, fontSize: 17,
fontWeight: 'bold', fontWeight: 'bold',
}, },
@ -256,7 +264,7 @@ const styles = StyleSheet.create({
marginBottom: 20, marginBottom: 20,
}, },
menuItem: { menuItem: {
width: 82, flex: 1,
alignItems: 'center', alignItems: 'center',
}, },
menuItemMargin: { menuItemMargin: {