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

3 files changed, 10 insertions, 4 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 275001309..78c5fd6ea 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/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 (
diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
index e1972f89c..07d5168ed 100644
--- a/src/view/com/modals/Modal.web.tsx
+++ b/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,
diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx
index 2aeae9bae..fcb209005 100644
--- a/src/view/com/util/forms/DropdownButton.tsx
+++ b/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
         })}