Fixes to dark mode (#238)

src/view/com/composer/ComposePost.tsx

@@ -379,7 +379,7 @@ export const ComposePost = observer(function ComposePost({
           </View>
           {isProcessing ? (
             <View style={[pal.btn, styles.processingLine]}>
-              <Text style={s.black}>{processingState}</Text>
+              <Text style={pal.text}>{processingState}</Text>
             </View>
           ) : undefined}
           {error !== '' && (
@@ -468,7 +468,7 @@ export const ComposePost = observer(function ComposePost({
                   key={`suggested-${url}`}
                   style={[pal.borderDark, styles.addExtLinkBtn]}
                   onPress={() => onPressAddLinkCard(url)}>
-                  <Text>
+                  <Text style={pal.text}>
                     Add link card: <Text style={pal.link}>{url}</Text>
                   </Text>
                 </TouchableOpacity>

src/view/com/modals/EditProfile.tsx

@@ -106,7 +106,7 @@ export function Component({
   }
 
   return (
-    <View style={s.flex1}>
+    <View style={[s.flex1, pal.view]}>
       <ScrollView style={styles.inner}>
         <Text style={[styles.title, pal.text]}>Edit my profile</Text>
         <View style={styles.photos}>
@@ -130,7 +130,7 @@ export function Component({
           </View>
         )}
         <View>
-          <Text style={styles.label}>Display Name</Text>
+          <Text style={[styles.label, pal.text]}>Display Name</Text>
           <TextInput
             style={[styles.textInput, pal.text]}
             placeholder="e.g. Alice Roberts"

src/view/com/modals/ReportAccount.tsx

@@ -14,6 +14,7 @@ import {Text} from '../util/text/Text'
 import * as Toast from '../util/Toast'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {cleanError} from 'lib/strings/errors'
+import {usePalette} from 'lib/hooks/usePalette'
 
 const ITEMS: RadioGroupItem[] = [
   {key: 'spam', label: 'Spam or excessive repeat posts'},
@@ -25,6 +26,7 @@ export const snapPoints = ['50%']
 
 export function Component({did}: {did: string}) {
   const store = useStores()
+  const pal = usePalette('default')
   const [isProcessing, setIsProcessing] = useState<boolean>(false)
   const [error, setError] = useState<string>('')
   const [issue, setIssue] = useState<string>('')
@@ -59,9 +61,9 @@ export function Component({did}: {did: string}) {
     }
   }
   return (
-    <View style={[s.flex1, s.pl10, s.pr10]}>
+    <View style={[s.flex1, s.pl10, s.pr10, pal.view]}>
-      <Text style={styles.title}>Report account</Text>
+      <Text style={[pal.text, styles.title]}>Report account</Text>
-      <Text style={styles.description}>
+      <Text style={[pal.textLight, styles.description]}>
         What is the issue with this account?
       </Text>
       <RadioGroup items={ITEMS} onSelect={onSelectIssue} />
@@ -100,7 +102,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontSize: 17,
     paddingHorizontal: 22,
-    color: colors.gray5,
     marginBottom: 10,
   },
   btn: {

src/view/com/modals/ReportPost.tsx

@@ -14,6 +14,7 @@ import {Text} from '../util/text/Text'
 import * as Toast from '../util/Toast'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {cleanError} from 'lib/strings/errors'
+import {usePalette} from 'lib/hooks/usePalette'
 
 const ITEMS: RadioGroupItem[] = [
   {key: 'spam', label: 'Spam or excessive repeat posts'},
@@ -32,6 +33,7 @@ export function Component({
   postCid: string
 }) {
   const store = useStores()
+  const pal = usePalette('default')
   const [isProcessing, setIsProcessing] = useState<boolean>(false)
   const [error, setError] = useState<string>('')
   const [issue, setIssue] = useState<string>('')
@@ -67,9 +69,11 @@ export function Component({
     }
   }
   return (
-    <View style={[s.flex1, s.pl10, s.pr10]}>
+    <View style={[s.flex1, s.pl10, s.pr10, pal.view]}>
-      <Text style={styles.title}>Report post</Text>
+      <Text style={[pal.text, styles.title]}>Report post</Text>
-      <Text style={styles.description}>What is the issue with this post?</Text>
+      <Text style={[pal.textLight, styles.description]}>
+        What is the issue with this post?
+      </Text>
       <RadioGroup items={ITEMS} onSelect={onSelectIssue} />
       {error ? (
         <View style={s.mt10}>
@@ -106,7 +110,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontSize: 17,
     paddingHorizontal: 22,
-    color: colors.gray5,
     marginBottom: 10,
   },
   btn: {

src/view/screens/Search.tsx

@@ -81,6 +81,7 @@ export const Search = observer(({navIdx, visible, params}: ScreenParams) => {
   const onPressCancelSearch = () => {
     setQuery('')
     autocompleteView.setActive(false)
+    textInput.current?.blur()
   }
 
   return (
@@ -127,10 +128,10 @@ export const Search = observer(({navIdx, visible, params}: ScreenParams) => {
               onChangeText={onChangeQuery}
             />
           </View>
-          {query ? (
+          {query || isInputFocused ? (
             <View style={styles.headerCancelBtn}>
               <TouchableOpacity onPress={onPressCancelSearch}>
-                <Text>Cancel</Text>
+                <Text style={pal.text}>Cancel</Text>
               </TouchableOpacity>
             </View>
           ) : undefined}

src/view/screens/Settings.tsx

@@ -5,7 +5,10 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
 import {observer} from 'mobx-react-lite'
 import * as AppInfo from 'lib/app-info'
 import {useStores} from 'state/index'
@@ -151,7 +154,10 @@ export const Settings = observer(function Settings({
               isSwitching && styles.dimmed,
             ]}
             onPress={isSwitching ? undefined : onPressAddAccount}>
-            <FontAwesomeIcon icon="plus" />
+            <FontAwesomeIcon
+              icon="plus"
+              style={pal.text as FontAwesomeIconStyle}
+            />
             <View style={[s.ml5]}>
               <Text type="md-medium" style={pal.text}>
                 Add account
@@ -160,7 +166,7 @@ export const Settings = observer(function Settings({
           </TouchableOpacity>
 
           <View style={styles.spacer} />
-          <Text type="sm-medium" style={[s.mb5]}>
+          <Text type="sm-medium" style={[s.mb5, pal.text]}>
             Danger zone
           </Text>
           <TouchableOpacity
@@ -168,7 +174,7 @@ export const Settings = observer(function Settings({
             onPress={onPressDeleteAccount}>
             <Text style={pal.textLight}>Delete my account</Text>
           </TouchableOpacity>
-          <Text type="sm-medium" style={[s.mt10, s.mb5]}>
+          <Text type="sm-medium" style={[s.mt10, s.mb5, pal.text]}>
             Developer tools
           </Text>
           <Link