Add consistent view headers

10 files changed, 164 insertions, 64 deletions

diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 6778663a3..6445e4a92 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -27,6 +27,9 @@ export const ProfileHeader = observer(function ProfileHeader({
 }) {
   const store = useStores()
 
+  const onPressBack = () => {
+    store.nav.tab.goBack()
+  }
   const onPressToggleFollow = () => {
     view?.toggleFollowing().then(
       () => {
@@ -82,6 +85,15 @@ export const ProfileHeader = observer(function ProfileHeader({
   return (
     <View style={styles.outer}>
       <Image style={styles.banner} source={BANNER} />
+      {store.nav.tab.canGoBack ? (
+        <TouchableOpacity style={styles.backButton} onPress={onPressBack}>
+          <FontAwesomeIcon
+            size={14}
+            icon="angle-left"
+            style={styles.backIcon}
+          />
+        </TouchableOpacity>
+      ) : undefined}
       <View style={styles.avi}>
         <UserAvatar size={80} displayName={view.displayName} name={view.name} />
       </View>
@@ -177,6 +189,19 @@ const styles = StyleSheet.create({
     width: '100%',
     height: 120,
   },
+  backButton: {
+    position: 'absolute',
+    top: 6,
+    left: 8,
+    backgroundColor: '#000a',
+    padding: 6,
+    borderRadius: 30,
+  },
+  backIcon: {
+    width: 14,
+    height: 14,
+    color: colors.white,
+  },
   avi: {
     position: 'absolute',
     top: 80,
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
new file mode 100644
index 000000000..46be1144f
--- /dev/null
+++ b/src/view/com/util/ViewHeader.tsx
@@ -0,0 +1,77 @@
+import React from 'react'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {s, colors} from '../../lib/styles'
+import {useStores} from '../../../state'
+
+export function ViewHeader({
+  title,
+  subtitle,
+}: {
+  title: string
+  subtitle?: string
+}) {
+  const store = useStores()
+  const onPressBack = () => {
+    store.nav.tab.goBack()
+  }
+  return (
+    <View style={styles.header}>
+      {store.nav.tab.canGoBack ? (
+        <TouchableOpacity onPress={onPressBack}>
+          <FontAwesomeIcon
+            size={14}
+            icon="angle-left"
+            style={styles.backIcon}
+          />
+        </TouchableOpacity>
+      ) : (
+        <View style={styles.cornerPlaceholder} />
+      )}
+      <View style={styles.titleContainer}>
+        <Text style={styles.title}>{title}</Text>
+        {subtitle ? (
+          <Text style={styles.subtitle} numberOfLines={1}>
+            {subtitle}
+          </Text>
+        ) : undefined}
+      </View>
+      <View style={styles.cornerPlaceholder} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.white,
+    paddingHorizontal: 12,
+    paddingBottom: 6,
+    borderBottomColor: colors.gray1,
+    borderBottomWidth: 1,
+  },
+
+  titleContainer: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  subtitle: {
+    fontSize: 15,
+    marginLeft: 3,
+    color: colors.gray4,
+    maxWidth: 200,
+  },
+
+  cornerPlaceholder: {
+    width: 14,
+    height: 14,
+  },
+  backIcon: {width: 14, height: 14},
+})
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 580106850..355a2cec1 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -1,6 +1,7 @@
 import React, {useState, useEffect, useMemo} from 'react'
 import {View} from 'react-native'
 import {observer} from 'mobx-react-lite'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/posts/Feed'
 import {FAB} from '../com/util/FloatingActionButton'
 import {useStores} from '../../state'
@@ -53,6 +54,7 @@ export const Home = observer(function Home({
 
   return (
     <View style={s.flex1}>
+      <ViewHeader title="Bluesky" subtitle="Private Beta" />
       <Feed key="default" feed={defaultFeedView} scrollElRef={scrollElRef} />
       <FAB icon="pen-nib" onPress={onComposePress} />
     </View>
diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index e33a34c2f..50832bd8d 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -1,7 +1,7 @@
 import React, {useState, useEffect} from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+import {View} from 'react-native'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/notifications/Feed'
-import {colors} from '../lib/styles'
 import {useStores} from '../../state'
 import {NotificationsViewModel} from '../../state/models/notifications-view'
 import {ScreenParams} from '../routes'
@@ -38,22 +38,8 @@ export const Notifications = ({visible}: ScreenParams) => {
 
   return (
     <View>
-      <View style={styles.header}>
-        <Text style={styles.title}>Notifications</Text>
-      </View>
+      <ViewHeader title="Notifications" />
       {notesView && <Feed view={notesView} />}
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  header: {
-    backgroundColor: colors.white,
-  },
-  title: {
-    fontSize: 30,
-    fontWeight: 'bold',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-  },
-})
diff --git a/src/view/screens/PostLikedBy.tsx b/src/view/screens/PostLikedBy.tsx
index 75eeea4a9..72c6016e4 100644
--- a/src/view/screens/PostLikedBy.tsx
+++ b/src/view/screens/PostLikedBy.tsx
@@ -1,8 +1,10 @@
 import React, {useEffect} from 'react'
-import {makeRecordUri} from '../lib/strings'
+import {View} from 'react-native'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
+import {makeRecordUri} from '../lib/strings'
 
 export const PostLikedBy = ({visible, params}: ScreenParams) => {
   const store = useStores()
@@ -15,5 +17,10 @@ export const PostLikedBy = ({visible, params}: ScreenParams) => {
     }
   }, [store, visible])
 
-  return <PostLikedByComponent uri={uri} />
+  return (
+    <View>
+      <ViewHeader title="Liked by" />
+      <PostLikedByComponent uri={uri} />
+    </View>
+  )
 }
diff --git a/src/view/screens/PostRepostedBy.tsx b/src/view/screens/PostRepostedBy.tsx
index 875cc978c..d9a59a268 100644
--- a/src/view/screens/PostRepostedBy.tsx
+++ b/src/view/screens/PostRepostedBy.tsx
@@ -1,8 +1,10 @@
 import React, {useEffect} from 'react'
-import {makeRecordUri} from '../lib/strings'
+import {View} from 'react-native'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
+import {makeRecordUri} from '../lib/strings'
 
 export const PostRepostedBy = ({visible, params}: ScreenParams) => {
   const store = useStores()
@@ -15,5 +17,10 @@ export const PostRepostedBy = ({visible, params}: ScreenParams) => {
     }
   }, [store, visible])
 
-  return <PostRepostedByComponent uri={uri} />
+  return (
+    <View>
+      <ViewHeader title="Reposted by" />
+      <PostRepostedByComponent uri={uri} />
+    </View>
+  )
 }
diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx
index 1f2deb312..a30b5521b 100644
--- a/src/view/screens/PostThread.tsx
+++ b/src/view/screens/PostThread.tsx
@@ -1,5 +1,7 @@
 import React, {useEffect} from 'react'
+import {View} from 'react-native'
 import {makeRecordUri} from '../lib/strings'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
@@ -15,5 +17,10 @@ export const PostThread = ({visible, params}: ScreenParams) => {
     }
   }, [visible, store.nav, name])
 
-  return <PostThreadComponent uri={uri} />
+  return (
+    <View>
+      <ViewHeader title="Post" subtitle={`by ${name}`} />
+      <PostThreadComponent uri={uri} />
+    </View>
+  )
 }
diff --git a/src/view/screens/ProfileFollowers.tsx b/src/view/screens/ProfileFollowers.tsx
index 3d78a88a1..ac776a056 100644
--- a/src/view/screens/ProfileFollowers.tsx
+++ b/src/view/screens/ProfileFollowers.tsx
@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+import {View} from 'react-native'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
@@ -16,16 +17,8 @@ export const ProfileFollowers = ({visible, params}: ScreenParams) => {
 
   return (
     <View>
-      <Text style={styles.title}>Followers of {name}</Text>
+      <ViewHeader title="Followers" subtitle={`of ${name}`} />
       <ProfileFollowersComponent name={name} />
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 21,
-    fontWeight: 'bold',
-    padding: 10,
-  },
-})
diff --git a/src/view/screens/ProfileFollows.tsx b/src/view/screens/ProfileFollows.tsx
index 6f5c82478..c075851c6 100644
--- a/src/view/screens/ProfileFollows.tsx
+++ b/src/view/screens/ProfileFollows.tsx
@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+import {View} from 'react-native'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
@@ -16,16 +17,8 @@ export const ProfileFollows = ({visible, params}: ScreenParams) => {
 
   return (
     <View>
-      <Text style={styles.title}>Followed by {name}</Text>
+      <ViewHeader title="Followed" subtitle={`by ${name}`} />
       <ProfileFollowsComponent name={name} />
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 21,
-    fontWeight: 'bold',
-    padding: 10,
-  },
-})
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index 2438ea75d..6bc3d1015 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -1,9 +1,10 @@
 import React, {useEffect} from 'react'
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {useStores} from '../../state'
 import {ScreenParams} from '../routes'
 import {s, colors} from '../lib/styles'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {Link} from '../com/util/Link'
 import {UserAvatar} from '../com/util/UserAvatar'
 
@@ -22,28 +23,30 @@ export const Settings = observer(function Settings({visible}: ScreenParams) {
   }
 
   return (
-    <View style={[s.flex1, s.pl10, s.pr10]}>
-      <Text style={styles.title}>Settings</Text>
-      <View style={[s.flexRow]}>
-        <Text>Signed in as</Text>
-        <View style={s.flex1} />
-        <TouchableOpacity onPress={onPressSignout}>
-          <Text style={[s.blue3, s.bold]}>Sign out</Text>
-        </TouchableOpacity>
-      </View>
-      <Link href={`/profile/${store.me.name}`} title="Your profile">
-        <View style={styles.profile}>
-          <UserAvatar
-            size={40}
-            displayName={store.me.displayName}
-            name={store.me.name || ''}
-          />
-          <View style={[s.ml10]}>
-            <Text style={[s.f18]}>{store.me.displayName}</Text>
-            <Text style={[s.gray5]}>@{store.me.name}</Text>
-          </View>
+    <View style={[s.flex1]}>
+      <ViewHeader title="Settings" />
+      <View style={[s.mt10, s.pl10, s.pr10]}>
+        <View style={[s.flexRow]}>
+          <Text>Signed in as</Text>
+          <View style={s.flex1} />
+          <TouchableOpacity onPress={onPressSignout}>
+            <Text style={[s.blue3, s.bold]}>Sign out</Text>
+          </TouchableOpacity>
         </View>
-      </Link>
+        <Link href={`/profile/${store.me.name}`} title="Your profile">
+          <View style={styles.profile}>
+            <UserAvatar
+              size={40}
+              displayName={store.me.displayName}
+              name={store.me.name || ''}
+            />
+            <View style={[s.ml10]}>
+              <Text style={[s.f18]}>{store.me.displayName}</Text>
+              <Text style={[s.gray5]}>@{store.me.name}</Text>
+            </View>
+          </View>
+        </Link>
+      </View>
     </View>
   )
 })