diff options
-rw-r--r-- | src/view/com/profile/ProfileHeader.tsx | 38 | ||||
-rw-r--r-- | src/view/com/util/ViewHeader.tsx | 43 | ||||
-rw-r--r-- | src/view/lib/icons.tsx | 29 | ||||
-rw-r--r-- | src/view/screens/Home.tsx | 2 | ||||
-rw-r--r-- | src/view/shell/mobile/index.tsx | 19 |
5 files changed, 40 insertions, 91 deletions
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 5a3743763..ed8924964 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -20,6 +20,7 @@ import { import {pluralize} from '../../lib/strings' import {s, colors} from '../../lib/styles' import {getGradient} from '../../lib/asset-gen' +import {MagnifyingGlassIcon} from '../../lib/icons' import {DropdownBtn, DropdownItem} from '../util/DropdownBtn' import Toast from '../util/Toast' import {LoadingPlaceholder} from '../util/LoadingPlaceholder' @@ -43,10 +44,8 @@ export const ProfileHeader = observer(function ProfileHeader({ const onPressBack = () => { store.nav.tab.goBack() } - const onPressMyAvatar = () => { - if (store.me.handle) { - store.nav.navigate(`/profile/${store.me.handle}`) - } + const onPressSearch = () => { + store.nav.navigate(`/search`) } const onPressToggleFollow = () => { view?.toggleFollowing().then( @@ -117,15 +116,9 @@ export const ProfileHeader = observer(function ProfileHeader({ /> </TouchableOpacity> ) : undefined} - {store.me.did ? ( - <TouchableOpacity style={styles.myAvatar} onPress={onPressMyAvatar}> - <UserAvatar - size={30} - handle={store.me.handle || ''} - displayName={store.me.displayName} - /> - </TouchableOpacity> - ) : undefined} + <TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}> + <MagnifyingGlassIcon size={19} style={styles.searchIcon} /> + </TouchableOpacity> <View style={styles.avi}> <LoadingPlaceholder width={80} @@ -194,15 +187,9 @@ export const ProfileHeader = observer(function ProfileHeader({ /> </TouchableOpacity> ) : undefined} - {store.me.did ? ( - <TouchableOpacity style={styles.myAvatar} onPress={onPressMyAvatar}> - <UserAvatar - size={30} - handle={store.me.handle || ''} - displayName={store.me.displayName} - /> - </TouchableOpacity> - ) : undefined} + <TouchableOpacity style={styles.searchBtn} onPress={onPressSearch}> + <MagnifyingGlassIcon size={19} style={styles.searchIcon} /> + </TouchableOpacity> <View style={styles.avi}> <UserAvatar size={80} @@ -375,14 +362,17 @@ const styles = StyleSheet.create({ height: 14, color: colors.black, }, - myAvatar: { + searchBtn: { position: 'absolute', top: 10, right: 12, backgroundColor: '#ffff', - padding: 1, + 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 7e68bcd15..55a71ea26 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -3,6 +3,7 @@ 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' export function ViewHeader({ @@ -16,16 +17,14 @@ export function ViewHeader({ const onPressBack = () => { store.nav.tab.goBack() } - const onPressAvatar = () => { - if (store.me.handle) { - store.nav.navigate(`/profile/${store.me.handle}`) - } + const onPressSearch = () => { + store.nav.navigate(`/search`) } return ( <View style={styles.header}> {store.nav.tab.canGoBack ? ( <TouchableOpacity onPress={onPressBack} style={styles.backIcon}> - <FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 3}} /> + <FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} /> </TouchableOpacity> ) : ( <View style={styles.cornerPlaceholder} /> @@ -38,17 +37,9 @@ export function ViewHeader({ </Text> ) : undefined} </View> - {store.me.did ? ( - <TouchableOpacity onPress={onPressAvatar}> - <UserAvatar - size={24} - handle={store.me.handle || ''} - displayName={store.me.displayName} - /> - </TouchableOpacity> - ) : ( - <View style={styles.cornerPlaceholder} /> - )} + <TouchableOpacity onPress={onPressSearch} style={styles.searchBtn}> + <MagnifyingGlassIcon size={17} style={styles.searchBtnIcon} /> + </TouchableOpacity> </View> ) } @@ -83,8 +74,22 @@ const styles = StyleSheet.create({ }, cornerPlaceholder: { - width: 24, - height: 24, + width: 30, + height: 30, + }, + backIcon: {width: 30, height: 30}, + searchBtn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: colors.gray1, + width: 30, + height: 30, + borderRadius: 15, + }, + searchBtnIcon: { + color: colors.black, + position: 'relative', + top: -1, }, - backIcon: {width: 24, height: 24}, }) diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx index b3f52a62e..21c5c86b7 100644 --- a/src/view/lib/icons.tsx +++ b/src/view/lib/icons.tsx @@ -91,7 +91,7 @@ export function HomeIconSolid({ // Copyright (c) 2020 Refactoring UI Inc. // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -export function MangifyingGlassIcon({ +export function MagnifyingGlassIcon({ style, size, }: { @@ -116,33 +116,6 @@ export function MangifyingGlassIcon({ ) } -// Copyright (c) 2020 Refactoring UI Inc. -// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -export function MangifyingGlassIconSolid({ - style, - size, -}: { - style?: StyleProp<ViewStyle> - size?: string | number -}) { - return ( - <Svg - fill="none" - viewBox="0 0 24 24" - strokeWidth={3} - stroke="currentColor" - width={size || 24} - height={size || 24} - style={style}> - <Path - strokeLinecap="round" - strokeLinejoin="round" - d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" - /> - </Svg> - ) -} - // https://github.com/Remix-Design/RemixIcon/blob/master/License export function BellIcon({ style, diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index d90d337ac..8dd7ca411 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -5,7 +5,6 @@ import useAppState from 'react-native-appstate-hook' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {ViewHeader} from '../com/util/ViewHeader' import {Feed} from '../com/posts/Feed' -import {FAB} from '../com/util/FloatingActionButton' import {useStores} from '../../state' import {FeedModel} from '../../state/models/feed-view' import {ScreenParams} from '../routes' @@ -81,6 +80,7 @@ export const Home = observer(function Home({ return ( <View style={s.flex1}> + <ViewHeader title="Bluesky" subtitle="Private Beta" /> <Feed key="default" feed={defaultFeedView} diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index 32b1f35dd..1c148b18c 100644 --- a/src/view/shell/mobile/index.tsx +++ b/src/view/shell/mobile/index.tsx @@ -42,8 +42,6 @@ import { GridIconSolid, HomeIcon, HomeIconSolid, - MangifyingGlassIcon, - MangifyingGlassIconSolid, BellIcon, BellIconSolid, } from '../../lib/icons' @@ -66,8 +64,6 @@ const Btn = ({ | 'home-solid' | 'bell' | 'bell-solid' - | 'search' - | 'search-solid' notificationCount?: number tabCount?: number onPress?: (event: GestureResponderEvent) => void @@ -86,14 +82,6 @@ const Btn = ({ } else if (icon === 'home-solid') { IconEl = HomeIconSolid size = 24 - } else if (icon === 'search') { - IconEl = MangifyingGlassIcon - size = 24 - addedStyles = {position: 'relative', top: -1} as ViewStyle - } else if (icon === 'search-solid') { - IconEl = MangifyingGlassIconSolid - size = 24 - addedStyles = {position: 'relative', top: -1} as ViewStyle } else if (icon === 'bell') { IconEl = BellIcon size = 24 @@ -148,7 +136,6 @@ export const MobileShell: React.FC = observer(() => { store.nav.navigate('/') } } - const onPressSearch = () => store.nav.navigate('/search') const onPressMenu = () => setMainMenuActive(true) const onPressNotifications = () => store.nav.navigate('/notifications') const onPressTabs = () => toggleTabsMenu(!isTabsSelectorActive) @@ -262,7 +249,6 @@ export const MobileShell: React.FC = observer(() => { } const isAtHome = store.nav.tab.current.url === '/' - const isAtSearch = store.nav.tab.current.url === '/search' const isAtNotifications = store.nav.tab.current.url === '/notifications' return ( <View style={styles.outerContainer}> @@ -327,11 +313,6 @@ export const MobileShell: React.FC = observer(() => { onPress={onPressHome} onLongPress={doNewTab('/')} /> - <Btn - icon={isAtSearch ? 'search-solid' : 'search'} - onPress={onPressSearch} - onLongPress={doNewTab('/search')} - /> {TABS_ENABLED ? ( <Btn icon={isTabsSelectorActive ? 'clone' : ['far', 'clone']} |