Look & feel updates: replace the "FAB" with a footer menu item, update the side menu (#263)

* Remove old tab controls from the mobile shell

* Add 'compose' and 'profile' to the footer; remove the FAB

* Fix lint

* Tune the footer icons

* Tune the 'current' state of footer icons

* Add 2xl text styles

* Tune the footer icons a bit more

* Fix lint

* More footer tuning

src/view/screens/Debug.tsx

@@ -207,6 +207,21 @@ function TypographyView() {
   const pal = usePalette('default')
   return (
     <View style={[pal.view]}>
+      <Text type="2xl-thin" style={[pal.text]}>
+        '2xl-thin' lorem ipsum dolor
+      </Text>
+      <Text type="2xl" style={[pal.text]}>
+        '2xl' lorem ipsum dolor
+      </Text>
+      <Text type="2xl-medium" style={[pal.text]}>
+        '2xl-medium' lorem ipsum dolor
+      </Text>
+      <Text type="2xl-bold" style={[pal.text]}>
+        '2xl-bold' lorem ipsum dolor
+      </Text>
+      <Text type="2xl-heavy" style={[pal.text]}>
+        '2xl-heavy' lorem ipsum dolor
+      </Text>
       <Text type="xl-thin" style={[pal.text]}>
         'xl-thin' lorem ipsum dolor
       </Text>

src/view/screens/Home.tsx

@@ -4,7 +4,6 @@ import {observer} from 'mobx-react-lite'
 import useAppState from 'react-native-appstate-hook'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/posts/Feed'
-import {FAB} from '../com/util/FAB'
 import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
 import {useStores} from 'state/index'
 import {ScreenParams} from '../routes'
@@ -17,7 +16,7 @@ const HEADER_HEIGHT = 42
 export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
   const store = useStores()
   const onMainScroll = useOnMainScroll(store)
-  const {screen, track} = useAnalytics()
+  const {screen} = useAnalytics()
   const scrollElRef = React.useRef<FlatList>(null)
   const [wasVisible, setWasVisible] = React.useState<boolean>(false)
   const {appState} = useAppState({
@@ -75,10 +74,6 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
     return cleanup
   }, [visible, store, store.me.mainFeed, navIdx, doPoll, wasVisible, scrollToTop, screen])
 
-  const onPressCompose = (imagesOpen?: boolean) => {
-    track('Home:ComposeButtonPressed')
-    store.shell.openComposer({imagesOpen})
-  }
   const onPressTryAgain = () => {
     store.me.mainFeed.refresh()
   }
@@ -105,11 +100,6 @@ export const Home = observer(function Home({navIdx, visible}: ScreenParams) {
       {store.me.mainFeed.hasNewLatest && !store.me.mainFeed.isRefreshing && (
         <LoadLatestBtn onPress={onPressLoadLatest} />
       )}
-      <FAB
-        testID="composeFAB"
-        icon="plus"
-        onPress={() => onPressCompose(false)}
-      />
     </View>
   )
 })

src/view/screens/Profile.tsx

@@ -13,7 +13,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 {FAB} from '../com/util/FAB'
 import {s, colors} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
@@ -87,10 +86,6 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
     uiState.setup()
   }
 
-  const onPressCompose = () => {
-    store.shell.openComposer({})
-  }
-
   // rendering
   // =
 
@@ -191,7 +186,6 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
       ) : (
         <CenteredView>{renderHeader()}</CenteredView>
       )}
-      <FAB icon="plus" onPress={onPressCompose} />
     </View>
   )
 })