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

src/view/com/composer/Composer.tsx

@@ -33,7 +33,7 @@ import {OpenCameraBtn} from './photos/OpenCameraBtn'
 import {usePalette} from 'lib/hooks/usePalette'
 import QuoteEmbed from '../util/post-embeds/QuoteEmbed'
 import {useExternalLinkFetch} from './useExternalLinkFetch'
-import {isDesktopWeb} from 'platform/detection'
+import {isDesktopWeb, isAndroid} from 'platform/detection'
 import {GalleryModel} from 'state/models/media/gallery'
 import {Gallery} from './photos/Gallery'
 
@@ -195,8 +195,8 @@ export const ComposePost = observer(function ComposePost({
 
   const canSelectImages = gallery.size <= 4
   const viewStyles = {
-    paddingBottom: Platform.OS === 'android' ? insets.bottom : 0,
-    paddingTop: Platform.OS === 'android' ? insets.top : 15,
+    paddingBottom: isAndroid ? insets.bottom : 0,
+    paddingTop: isAndroid ? insets.top : isDesktopWeb ? 0 : 15,
   }
 
   return (

src/view/com/modals/Modal.web.tsx

@@ -97,6 +97,7 @@ function Modal({modal}: {modal: ModalIface}) {
               styles.container,
               isMobileWeb && styles.containerMobile,
               pal.view,
+              pal.border,
             ]}>
             {element}
           </View>
@@ -124,6 +125,7 @@ const styles = StyleSheet.create({
     paddingVertical: 20,
     paddingHorizontal: 24,
     borderRadius: 8,
+    borderWidth: 1,
   },
   containerMobile: {
     borderRadius: 0,

src/view/com/util/forms/DropdownButton.tsx

@@ -291,6 +291,8 @@ const DropdownItems = ({
   const theme = useTheme()
   const dropDownBackgroundColor =
     theme.colorScheme === 'dark' ? pal.btn : pal.view
+  const separatorColor =
+    theme.colorScheme === 'dark' ? pal.borderDark : pal.border
 
   return (
     <>
@@ -322,7 +324,9 @@ const DropdownItems = ({
               </TouchableOpacity>
             )
           } else if (isSep(item)) {
-            return <View key={index} style={[styles.separator, pal.border]} />
+            return (
+              <View key={index} style={[styles.separator, separatorColor]} />
+            )
           }
           return null
         })}

src/view/screens/Settings.tsx

@@ -35,6 +35,7 @@ import {AccountData} from 'state/models/session'
 import {useAnalytics} from 'lib/analytics'
 import {NavigationProp} from 'lib/routes/types'
 import {pluralize} from 'lib/strings/helpers'
+import {isDesktopWeb} from 'platform/detection'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
 export const SettingsScreen = withAuthRequired(
@@ -139,9 +140,12 @@ export const SettingsScreen = withAuthRequired(
     }, [store])
 
     return (
-      <View style={[s.hContentRegion]} testID="settingsScreen">
-        <ViewHeader title="Settings" showOnDesktop />
-        <ScrollView style={s.hContentRegion} scrollIndicatorInsets={{right: 1}}>
+      <View style={s.hContentRegion} testID="settingsScreen">
+        <ViewHeader title="Settings" />
+        <ScrollView
+          style={s.hContentRegion}
+          contentContainerStyle={!isDesktopWeb && pal.viewLight}
+          scrollIndicatorInsets={{right: 1}}>
           <View style={styles.spacer20} />
           <View style={[s.flexRow, styles.heading]}>
             <Text type="xl-bold" style={pal.text}>

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,
   },
 })

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'} />