Android & visual fixes: color themes, repost icon, navigation, back handler, etc (#519)

* Switch android to use slide left/right animations on navigation

* Bump the repost icon down by a pixel

* Tune theme colors for contrast and darker bg on darkmode

* Move back handler to a point in the init flow that leads to more consistent capture of events

* Fix image share flow on android

* Fix lint

* Add todo about sharing not available

* Drop the android slide animation because it's too slow

* Fix 'flashes of white' in dark mode android

2 files changed, 7 insertions, 2 deletions

diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index ed0450c01..0e5b82423 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -32,7 +32,7 @@ export const Composer = observer(
 
     return (
       <View style={styles.mask}>
-        <View style={[styles.container, pal.view]}>
+        <View style={[styles.container, pal.view, pal.border]}>
           <ComposePost
             replyTo={replyTo}
             quote={quote}
@@ -63,5 +63,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 2,
     borderRadius: isMobileWeb ? 0 : 8,
     marginBottom: '10vh',
+    borderWidth: 1,
   },
 })
diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index e0abec777..04ea7c9bf 100644
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@@ -13,6 +13,7 @@ import {DrawerContent} from './Drawer'
 import {Composer} from './Composer'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
+import * as backHandler from 'lib/routes/back-handler'
 import {RoutesContainer, TabsNavigator} from '../../Navigation'
 import {isStateAtTabRoot} from 'lib/routes/helpers'
 
@@ -34,6 +35,9 @@ const ShellInner = observer(() => {
     [store],
   )
   const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
+  React.useEffect(() => {
+    backHandler.init(store)
+  }, [store])
 
   return (
     <>
@@ -69,8 +73,8 @@ const ShellInner = observer(() => {
 })
 
 export const Shell: React.FC = observer(() => {
-  const theme = useTheme()
   const pal = usePalette('default')
+  const theme = useTheme()
   return (
     <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
       <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />