diff options
| -rw-r--r-- | src/view/com/profile/ProfileHeader.tsx | 56 | ||||
| -rw-r--r-- | src/view/com/util/ViewHeader.tsx | 42 | ||||
| -rw-r--r-- | src/view/lib/icons.tsx | 4 | ||||
| -rw-r--r-- | src/view/screens/Home.tsx | 6 | ||||
| -rw-r--r-- | src/view/screens/Profile.tsx | 4 |
5 files changed, 37 insertions, 75 deletions
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 9325a88a3..8eff0c6b1 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -1,12 +1,6 @@ import React, {useMemo} from 'react' import {observer} from 'mobx-react-lite' -import { - ActivityIndicator, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native' +import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import LinearGradient from 'react-native-linear-gradient' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {AtUri} from '../../../third-party/uri' @@ -108,18 +102,6 @@ export const ProfileHeader = observer(function ProfileHeader({ return ( <View style={styles.outer}> <LoadingPlaceholder width="100%" height={120} /> - {store.nav.tab.canGoBack ? ( - <TouchableOpacity style={styles.backButton} onPress={onPressBack}> - <FontAwesomeIcon - size={18} - icon="angle-left" - style={styles.backIcon} - /> - </TouchableOpacity> - ) : undefined} - <TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}> - <MagnifyingGlassIcon size={19} style={styles.searchIcon} /> - </TouchableOpacity> <View style={styles.avi}> <LoadingPlaceholder width={80} @@ -179,18 +161,6 @@ export const ProfileHeader = observer(function ProfileHeader({ return ( <View style={styles.outer}> <UserBanner handle={view.handle} /> - {store.nav.tab.canGoBack ? ( - <TouchableOpacity style={styles.backButton} onPress={onPressBack}> - <FontAwesomeIcon - size={18} - icon="angle-left" - style={styles.backIcon} - /> - </TouchableOpacity> - ) : undefined} - <TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}> - <MagnifyingGlassIcon size={19} style={styles.searchIcon} /> - </TouchableOpacity> <View style={styles.avi}> <UserAvatar size={80} @@ -353,30 +323,6 @@ const styles = StyleSheet.create({ width: '100%', height: 120, }, - backButton: { - position: 'absolute', - top: 10, - left: 12, - backgroundColor: '#ffff', - padding: 6, - borderRadius: 30, - }, - backIcon: { - width: 14, - height: 14, - color: colors.black, - }, - searchBtn: { - position: 'absolute', - top: 10, - right: 12, - backgroundColor: '#ffff', - padding: 5, - borderRadius: 30, - }, - searchIcon: { - color: colors.black, - }, avi: { position: 'absolute', top: 80, diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 55a71ea26..50b7e6532 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -1,7 +1,6 @@ import React from 'react' import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {UserAvatar} from './UserAvatar' import {colors} from '../../lib/styles' import {MagnifyingGlassIcon} from '../../lib/icons' import {useStores} from '../../../state' @@ -9,14 +8,19 @@ import {useStores} from '../../../state' export function ViewHeader({ title, subtitle, + onPost, }: { title: string subtitle?: string + onPost?: () => void }) { const store = useStores() const onPressBack = () => { store.nav.tab.goBack() } + const onPressCompose = () => { + store.shell.openComposer({onPost}) + } const onPressSearch = () => { store.nav.navigate(`/search`) } @@ -26,9 +30,7 @@ export function ViewHeader({ <TouchableOpacity onPress={onPressBack} style={styles.backIcon}> <FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} /> </TouchableOpacity> - ) : ( - <View style={styles.cornerPlaceholder} /> - )} + ) : undefined} <View style={styles.titleContainer}> <Text style={styles.title}>{title}</Text> {subtitle ? ( @@ -37,8 +39,17 @@ export function ViewHeader({ </Text> ) : undefined} </View> - <TouchableOpacity onPress={onPressSearch} style={styles.searchBtn}> - <MagnifyingGlassIcon size={17} style={styles.searchBtnIcon} /> + <TouchableOpacity onPress={onPressCompose} style={styles.btn}> + <FontAwesomeIcon size={18} icon="plus" /> + </TouchableOpacity> + <TouchableOpacity + onPress={onPressSearch} + style={[styles.btn, {marginLeft: 8}]}> + <MagnifyingGlassIcon + size={18} + strokeWidth={3} + style={styles.searchBtnIcon} + /> </TouchableOpacity> </View> ) @@ -59,33 +70,28 @@ const styles = StyleSheet.create({ titleContainer: { flexDirection: 'row', alignItems: 'baseline', - marginLeft: 'auto', marginRight: 'auto', }, title: { - fontSize: 16, + fontSize: 21, fontWeight: '600', }, subtitle: { - fontSize: 15, - marginLeft: 3, + fontSize: 18, + marginLeft: 6, color: colors.gray4, maxWidth: 200, }, - cornerPlaceholder: { - width: 30, - height: 30, - }, backIcon: {width: 30, height: 30}, - searchBtn: { + btn: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: colors.gray1, - width: 30, - height: 30, - borderRadius: 15, + width: 36, + height: 36, + borderRadius: 20, }, searchBtnIcon: { color: colors.black, diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx index 05b1ec601..7e3313597 100644 --- a/src/view/lib/icons.tsx +++ b/src/view/lib/icons.tsx @@ -94,15 +94,17 @@ export function HomeIconSolid({ export function MagnifyingGlassIcon({ style, size, + strokeWidth = 2, }: { style?: StyleProp<ViewStyle> size?: string | number + strokeWidth?: number }) { return ( <Svg fill="none" viewBox="0 0 24 24" - strokeWidth={2} + strokeWidth={strokeWidth} stroke="currentColor" width={size || 24} height={size || 24} diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 8dd7ca411..034ff800e 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -80,7 +80,11 @@ export const Home = observer(function Home({ return ( <View style={s.flex1}> - <ViewHeader title="Bluesky" subtitle="Private Beta" /> + <ViewHeader + title="Bluesky" + subtitle="Private Beta" + onPost={onCreatePost} + /> <Feed key="default" feed={defaultFeedView} diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index d1abcd731..4f0df8d04 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -15,6 +15,7 @@ import {PostFeedLoadingPlaceholder} from '../com/util/LoadingPlaceholder' import {ErrorScreen} from '../com/util/ErrorScreen' import {ErrorMessage} from '../com/util/ErrorMessage' import {EmptyState} from '../com/util/EmptyState' +import {ViewHeader} from '../com/util/ViewHeader' import Toast from '../com/util/Toast' import {s, colors} from '../lib/styles' @@ -219,8 +220,11 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => { renderItem = () => <View /> } + const title = + uiState.profile.displayName || uiState.profile.handle || params.name return ( <View style={styles.container}> + <ViewHeader title={title} /> {uiState.profile.hasError ? ( <ErrorScreen title="Failed to load profile" |