Prettier profile headers (no standard header)

src/view/com/profile/ProfileHeader.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {BlurView} from '@react-native-community/blur'
 import {ProfileViewModel} from '../../../state/models/profile-view'
 import {useStores} from '../../../state'
 import {
@@ -36,6 +37,9 @@ export const ProfileHeader = observer(function ProfileHeader({
   const pal = usePalette('default')
   const store = useStores()
 
+  const onPressBack = () => {
+    store.nav.tab.goBack()
+  }
   const onPressAvi = () => {
     if (view.avatar) {
       store.shell.openLightbox(new ProfileImageLightbox(view))
@@ -262,6 +266,11 @@ export const ProfileHeader = observer(function ProfileHeader({
           </View>
         ) : undefined}
       </View>
+      <TouchableWithoutFeedback onPress={onPressBack}>
+        <BlurView style={styles.backBtn} blurType="dark">
+          <FontAwesomeIcon size={18} icon="angle-left" style={s.white} />
+        </BlurView>
+      </TouchableWithoutFeedback>
       <TouchableWithoutFeedback
         testID="profileHeaderAviButton"
         onPress={onPressAvi}>
@@ -284,9 +293,19 @@ const styles = StyleSheet.create({
     width: '100%',
     height: 120,
   },
+  backBtn: {
+    position: 'absolute',
+    top: 10,
+    left: 10,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   avi: {
     position: 'absolute',
-    top: 80,
+    top: 110,
     left: 10,
     width: 84,
     height: 84,

src/view/com/util/UserBanner.tsx

@@ -61,7 +61,7 @@ export function UserBanner({
   }, [onSelectNewBanner])
 
   const renderSvg = () => (
-    <Svg width="100%" height="120" viewBox="50 0 200 100">
+    <Svg width="100%" height="150" viewBox="50 0 200 100">
       <Defs>
         <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
           <Stop
@@ -118,6 +118,6 @@ const styles = StyleSheet.create({
   },
   bannerImage: {
     width: '100%',
-    height: 120,
+    height: 150,
   },
 })

src/view/screens/Profile.tsx

@@ -5,7 +5,6 @@ import {ViewSelector} from '../com/util/ViewSelector'
 import {ScreenParams} from '../routes'
 import {ProfileUiModel, Sections} from '../../state/models/profile-ui'
 import {useStores} from '../../state'
-import {ConfirmModal} from '../../state/models/shell-ui'
 import {ProfileHeader} from '../com/profile/ProfileHeader'
 import {FeedItem} from '../com/posts/FeedItem'
 import {PostFeedLoadingPlaceholder} from '../com/util/LoadingPlaceholder'
@@ -13,8 +12,6 @@ import {ErrorScreen} from '../com/util/error/ErrorScreen'
 import {ErrorMessage} from '../com/util/error/ErrorMessage'
 import {EmptyState} from '../com/util/EmptyState'
 import {Text} from '../com/util/text/Text'
-import {ViewHeader} from '../com/util/ViewHeader'
-import * as Toast from '../com/util/Toast'
 import {FAB} from '../com/util/FAB'
 import {s, colors} from '../lib/styles'
 import {useOnMainScroll} from '../lib/hooks/useOnMainScroll'
@@ -152,11 +149,8 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
     renderItem = () => <View />
   }
 
-  const title =
-    uiState.profile.displayName || uiState.profile.handle || params.name
   return (
     <View testID="profileView" style={styles.container}>
-      <ViewHeader title={title} />
       {uiState.profile.hasError ? (
         <ErrorScreen
           testID="profileErrorScreen"