Onboarding tweaks (#272)

* Small fix to side menu rendering

* Change onboarding to use an explicit 'is onboarding' mode to more clearly control the flow

* Add a progress bar to the welcome banner

* Dont show the 'unfollow button' on posts in weird times (close #271)

* Improve the empty state of the feed

* Only suggest recent posts

1 files changed, 18 insertions, 22 deletions

diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx
index 71462bea8..f24c3d0c9 100644
--- a/src/view/com/profile/FollowButton.tsx
+++ b/src/view/com/profile/FollowButton.tsx
@@ -1,23 +1,29 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {Text} from '../util/text/Text'
+import {Button} from '../util/forms/Button'
 import {useStores} from 'state/index'
 import * as apilib from 'lib/api/index'
 import * as Toast from '../util/Toast'
-import {usePalette} from 'lib/hooks/usePalette'
 
 const FollowButton = observer(
-  ({did, declarationCid}: {did: string; declarationCid: string}) => {
+  ({
+    did,
+    declarationCid,
+    onToggleFollow,
+  }: {
+    did: string
+    declarationCid: string
+    onToggleFollow?: (v: boolean) => void
+  }) => {
     const store = useStores()
-    const pal = usePalette('default')
     const isFollowing = store.me.follows.isFollowing(did)
 
-    const onToggleFollow = async () => {
+    const onToggleFollowInner = async () => {
       if (store.me.follows.isFollowing(did)) {
         try {
           await apilib.unfollow(store, store.me.follows.getFollowUri(did))
           store.me.follows.removeFollow(did)
+          onToggleFollow?.(false)
         } catch (e: any) {
           store.log.error('Failed fo delete follow', e)
           Toast.show('An issue occurred, please try again.')
@@ -26,6 +32,7 @@ const FollowButton = observer(
         try {
           const res = await apilib.follow(store, did, declarationCid)
           store.me.follows.addFollow(did, res.uri)
+          onToggleFollow?.(true)
         } catch (e: any) {
           store.log.error('Failed fo create follow', e)
           Toast.show('An issue occurred, please try again.')
@@ -34,24 +41,13 @@ const FollowButton = observer(
     }
 
     return (
-      <TouchableOpacity onPress={onToggleFollow}>
-        <View style={[styles.btn, pal.btn]}>
-          <Text type="button" style={[pal.text]}>
-            {isFollowing ? 'Unfollow' : 'Follow'}
-          </Text>
-        </View>
-      </TouchableOpacity>
+      <Button
+        type={isFollowing ? 'default' : 'primary'}
+        onPress={onToggleFollowInner}
+        label={isFollowing ? 'Unfollow' : 'Follow'}
+      />
     )
   },
 )
 
 export default FollowButton
-
-const styles = StyleSheet.create({
-  btn: {
-    paddingVertical: 7,
-    borderRadius: 50,
-    marginLeft: 6,
-    paddingHorizontal: 14,
-  },
-})