Another set of UI updates (FAB returns, a few others) (#281)

* Bring back the FAB and move compose out of the footer

* Increase the touch target sizes of the header back btns (close #279)

* Trigger 'load more' sooner (close #280)

src/view/com/notifications/Feed.tsx

@@ -101,6 +101,7 @@ export const Feed = observer(function Feed({
           refreshing={view.isRefreshing}
           onRefresh={onRefresh}
           onEndReached={onEndReached}
+          onEndReachedThreshold={0.6}
           onScroll={onScroll}
           contentContainerStyle={s.contentContainer}
         />

src/view/com/posts/Feed.tsx

@@ -168,7 +168,7 @@ export const Feed = observer(function Feed({
           onScroll={onScroll}
           onRefresh={onRefresh}
           onEndReached={onEndReached}
-          onEndReachedThreshold={0.25}
+          onEndReachedThreshold={0.6}
           removeClippedSubviews={true}
           contentInset={{top: headerOffset}}
           contentOffset={{x: 0, y: headerOffset * -1}}

src/view/com/profile/ProfileHeader.tsx

@@ -29,6 +29,8 @@ import {UserBanner} from '../util/UserBanner'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics'
 
+const BACK_HITSLOP = {left: 30, top: 30, right: 30, bottom: 30}
+
 export const ProfileHeader = observer(function ProfileHeader({
   view,
   onRefreshAll,
@@ -285,10 +287,12 @@ 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 onPress={onPressBack} hitSlop={BACK_HITSLOP}>
+        <View style={styles.backBtnWrapper}>
+          <BlurView style={styles.backBtn} blurType="dark">
+            <FontAwesomeIcon size={18} icon="angle-left" style={s.white} />
+          </BlurView>
+        </View>
       </TouchableWithoutFeedback>
       <TouchableWithoutFeedback
         testID="profileHeaderAviButton"
@@ -312,12 +316,16 @@ const styles = StyleSheet.create({
     width: '100%',
     height: 120,
   },
-  backBtn: {
+  backBtnWrapper: {
     position: 'absolute',
     top: 10,
     left: 10,
     width: 30,
     height: 30,
+  },
+  backBtn: {
+    width: 30,
+    height: 30,
     borderRadius: 15,
     alignItems: 'center',
     justifyContent: 'center',

src/view/com/util/FAB.tsx

@@ -7,9 +7,7 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
-import {colors, gradients} from 'lib/styles'
+import {gradients} from 'lib/styles'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {useStores} from 'state/index'
 
@@ -21,7 +19,7 @@ export const FAB = observer(
     onPress,
   }: {
     testID?: string
-    icon: IconProp
+    icon: JSX.Element
     onPress: OnPress
   }) => {
     const store = useStores()
@@ -45,7 +43,7 @@ export const FAB = observer(
             start={{x: 0, y: 0}}
             end={{x: 1, y: 1}}
             style={styles.inner}>
-            <FontAwesomeIcon size={24} icon={icon} color={colors.white} />
+            {icon}
           </LinearGradient>
         </Animated.View>
       </TouchableWithoutFeedback>
@@ -57,7 +55,7 @@ const styles = StyleSheet.create({
   outer: {
     position: 'absolute',
     zIndex: 1,
-    right: 22,
+    right: 28,
     bottom: 94,
     width: 60,
     height: 60,

src/view/com/util/ViewHeader.tsx

@@ -10,7 +10,7 @@ import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {useAnalytics} from 'lib/analytics'
 import {isDesktopWeb} from '../../../platform/detection'
 
-const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
+const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
 export const ViewHeader = observer(function ViewHeader({
   title,

src/view/com/util/ViewSelector.tsx

@@ -100,6 +100,7 @@ export function ViewSelector({
         onScroll={onScroll}
         onRefresh={onRefresh}
         onEndReached={onEndReached}
+        onEndReachedThreshold={0.6}
         contentContainerStyle={s.contentContainer}
         removeClippedSubviews={true}
       />