From 70f4debc0b27cc5245cceaede2a50ec03c1d67d5 Mon Sep 17 00:00:00 2001
From: João Ferreiro <ferreiro@pinkroom.dev>
Date: Wed, 14 Dec 2022 17:53:26 +0000
Subject: initial android fixes

---
 src/view/com/composer/ComposePost.tsx  |  7 +++++--
 src/view/com/modals/ServerInput.tsx    | 15 +++++++++++++--
 src/view/com/posts/FeedItem.tsx        |  1 +
 src/view/com/profile/ProfileHeader.tsx | 14 +++++++-------
 src/view/com/util/PostMeta.tsx         |  4 ++--
 src/view/com/util/RichText.tsx         |  6 +++---
 src/view/com/util/ViewHeader.tsx       |  7 ++++++-
 src/view/shell/mobile/Composer.tsx     |  8 ++++++--
 8 files changed, 43 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx
index 6248e136e..03c7af32f 100644
--- a/src/view/com/composer/ComposePost.tsx
+++ b/src/view/com/composer/ComposePost.tsx
@@ -3,6 +3,7 @@ import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
   KeyboardAvoidingView,
+  Platform,
   SafeAreaView,
   ScrollView,
   StyleSheet,
@@ -175,7 +176,9 @@ export const ComposePost = observer(function ComposePost({
   }, [text])
 
   return (
-    <KeyboardAvoidingView behavior="padding" style={styles.outer}>
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.outer}>
       <SafeAreaView style={s.flex1}>
         <View style={styles.topbar}>
           <TouchableOpacity onPress={onPressCancel}>
@@ -345,7 +348,6 @@ const styles = StyleSheet.create({
   topbar: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingTop: 10,
     paddingBottom: 10,
     paddingHorizontal: 5,
     height: 55,
@@ -398,6 +400,7 @@ const styles = StyleSheet.create({
     padding: 5,
     fontSize: 18,
     marginLeft: 8,
+    alignSelf: 'flex-start',
   },
   replyToLayout: {
     flexDirection: 'row',
diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx
index c885ff164..15632ba39 100644
--- a/src/view/com/modals/ServerInput.tsx
+++ b/src/view/com/modals/ServerInput.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
+import {Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
 import {useStores} from '../../../state'
@@ -76,7 +76,7 @@ export function Component({
               onPress={() => doSelect(customUrl)}>
               <FontAwesomeIcon
                 icon="check"
-                style={[s.black, {position: 'relative', top: 2}]}
+                style={[s.black, styles.checkIcon]}
                 size={18}
               />
             </TouchableOpacity>
@@ -133,4 +133,15 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: colors.white,
   },
+  checkIcon: {
+    position: 'relative',
+    ...Platform.select({
+      android: {
+        top: 8,
+      },
+      ios: {
+        top: 2,
+      },
+    }),
+  },
 })
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index db7b757cc..48be582dc 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -331,6 +331,7 @@ const styles = StyleSheet.create({
     fontFamily: 'System',
     fontSize: 16,
     lineHeight: 20.8, // 1.3 of 16px
+    color: colors.black,
   },
   postEmbeds: {
     marginBottom: 10,
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index de9ae1dd2..e35f40cdf 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -168,7 +168,7 @@ export const ProfileHeader = observer(function ProfileHeader({
             <TouchableOpacity
               onPress={onPressEditProfile}
               style={[styles.btn, styles.mainBtn]}>
-              <Text style={[s.fw400, s.f14]}>Edit Profile</Text>
+              <Text style={[s.fw400, s.f14, s.black]}>Edit Profile</Text>
             </TouchableOpacity>
           ) : (
             <>
@@ -177,7 +177,7 @@ export const ProfileHeader = observer(function ProfileHeader({
                   onPress={onPressToggleFollow}
                   style={[styles.btn, styles.mainBtn]}>
                   <FontAwesomeIcon icon="check" style={[s.mr5]} size={14} />
-                  <Text style={[s.fw400, s.f14]}>Following</Text>
+                  <Text style={[s.fw400, s.f14, s.black]}>Following</Text>
                 </TouchableOpacity>
               ) : (
                 <TouchableOpacity onPress={onPressToggleFollow}>
@@ -202,7 +202,7 @@ export const ProfileHeader = observer(function ProfileHeader({
           ) : undefined}
         </View>
         <View style={styles.displayNameLine}>
-          <Text style={styles.displayName}>
+          <Text style={[styles.displayName, s.black]}>
             {view.displayName || view.handle}
           </Text>
         </View>
@@ -218,7 +218,7 @@ export const ProfileHeader = observer(function ProfileHeader({
           <TouchableOpacity
             style={[s.flexRow, s.mr10]}
             onPress={onPressFollowers}>
-            <Text style={[s.bold, s.mr2, styles.metricsText]}>
+            <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}>
               {view.followersCount}
             </Text>
             <Text style={[s.gray5, styles.metricsText]}>
@@ -229,7 +229,7 @@ export const ProfileHeader = observer(function ProfileHeader({
             <TouchableOpacity
               style={[s.flexRow, s.mr10]}
               onPress={onPressFollows}>
-              <Text style={[s.bold, s.mr2, styles.metricsText]}>
+              <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}>
                 {view.followsCount}
               </Text>
               <Text style={[s.gray5, styles.metricsText]}>following</Text>
@@ -239,7 +239,7 @@ export const ProfileHeader = observer(function ProfileHeader({
             <TouchableOpacity
               style={[s.flexRow, s.mr10]}
               onPress={onPressMembers}>
-              <Text style={[s.bold, s.mr2, styles.metricsText]}>
+              <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}>
                 {view.membersCount}
               </Text>
               <Text style={[s.gray5, styles.metricsText]}>
@@ -248,7 +248,7 @@ export const ProfileHeader = observer(function ProfileHeader({
             </TouchableOpacity>
           ) : undefined}
           <View style={[s.flexRow, s.mr10]}>
-            <Text style={[s.bold, s.mr2, styles.metricsText]}>
+            <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}>
               {view.postsCount}
             </Text>
             <Text style={[s.gray5, styles.metricsText]}>
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 1994580c1..6d94c7719 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -25,9 +25,9 @@ export function PostMeta(opts: PostMetaOpts) {
         style={styles.metaItem}
         href={opts.authorHref}
         title={opts.authorHandle}>
-        <Text style={[s.f17, s.bold]} numberOfLines={1}>
+        <Text style={[s.f17, s.bold, s.black]} numberOfLines={1}>
           {opts.authorDisplayName || opts.authorHandle}
-          <Text style={[s.f15, s.gray5, s.normal]} numberOfLines={1}>
+          <Text style={[s.f15, s.gray5, s.normal, s.black]} numberOfLines={1}>
             &nbsp;{opts.authorHandle}
           </Text>
         </Text>
diff --git a/src/view/com/util/RichText.tsx b/src/view/com/util/RichText.tsx
index 66b0e2536..1f6d9cbcd 100644
--- a/src/view/com/util/RichText.tsx
+++ b/src/view/com/util/RichText.tsx
@@ -28,9 +28,9 @@ export function RichText({
         fontSize: 26,
         lineHeight: 30,
       }
-      return <Text style={style}>{text}</Text>
+      return <Text style={[style]}>{text}</Text>
     }
-    return <Text style={style}>{text}</Text>
+    return <Text style={[style]}>{text}</Text>
   }
   if (!style) style = []
   else if (!Array.isArray(style)) style = [style]
@@ -65,7 +65,7 @@ export function RichText({
     key++
   }
   return (
-    <Text style={style} numberOfLines={numberOfLines}>
+    <Text style={[style]} numberOfLines={numberOfLines}>
       {els}
     </Text>
   )
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 9b029ab10..141d2dd50 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -56,7 +56,11 @@ export const ViewHeader = observer(function ViewHeader({
         hitSlop={BACK_HITSLOP}
         style={canGoBack ? styles.backIcon : styles.backIconWide}>
         {canGoBack ? (
-          <FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} />
+          <FontAwesomeIcon
+            size={18}
+            icon="angle-left"
+            style={{marginTop: 6, color: colors.black}}
+          />
         ) : (
           <UserAvatar
             size={30}
@@ -138,6 +142,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 21,
     fontWeight: '600',
+    color: colors.black,
   },
   subtitle: {
     fontSize: 18,
diff --git a/src/view/shell/mobile/Composer.tsx b/src/view/shell/mobile/Composer.tsx
index d72311ea9..c586bc871 100644
--- a/src/view/shell/mobile/Composer.tsx
+++ b/src/view/shell/mobile/Composer.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
-import {Animated, Easing, StyleSheet, View} from 'react-native'
+import {Animated, Easing, Platform, StyleSheet, View} from 'react-native'
 import {ComposePost} from '../../com/composer/ComposePost'
 import {ComposerOpts} from '../../../state/models/shell-ui'
 import {useAnimatedValue} from '../../lib/useAnimatedValue'
@@ -69,6 +69,10 @@ const styles = StyleSheet.create({
     bottom: 0,
     width: '100%',
     backgroundColor: '#fff',
-    paddingTop: 24,
+    ...Platform.select({
+      ios: {
+        paddingTop: 24,
+      },
+    }),
   },
 })
-- 
cgit 1.4.1