Darkmode fixes (#301) (#327)

* Fix dark mode rendering of 'follows you' pill

* Fix the darkmode coloring of the PTR

* Fix dark mode styles in dns instructions

* Only lint the src dir

package.json

@@ -14,7 +14,7 @@
     "test-watch": "jest --watchAll",
     "test-ci": "jest --ci --forceExit --reporters=default --reporters=jest-junit",
     "test-coverage": "jest --coverage",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
     "e2e": "detox test --configuration ios.sim.debug --take-screenshots all"
   },
   "dependencies": {

src/view/com/modals/ChangeHandle.tsx

@@ -363,7 +363,7 @@ function CustomHandleForm({
         Add the following record to your domain:
       </Text>
       <View style={[styles.dnsTable, pal.btn]}>
-        <Text type="md-medium" style={styles.dnsLabel}>
+        <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
           Domain:
         </Text>
         <View style={[styles.dnsValue]}>
@@ -371,7 +371,7 @@ function CustomHandleForm({
             _atproto.{handle}
           </Text>
         </View>
-        <Text type="md-medium" style={styles.dnsLabel}>
+        <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
           Type:
         </Text>
         <View style={[styles.dnsValue]}>
@@ -379,7 +379,7 @@ function CustomHandleForm({
             TXT
           </Text>
         </View>
-        <Text type="md-medium" style={styles.dnsLabel}>
+        <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
           Value:
         </Text>
         <View style={[styles.dnsValue]}>
@@ -415,7 +415,7 @@ function CustomHandleForm({
         {isVerifying ? (
           <ActivityIndicator color="white" />
         ) : (
-          <Text type="xl-medium" style={[pal.textInverted, s.textCenter]}>
+          <Text type="xl-medium" style={[s.white, s.textCenter]}>
             {canSave ? `Update to ${handle}` : 'Verify DNS Record'}
           </Text>
         )}

src/view/com/notifications/Feed.tsx

@@ -1,7 +1,7 @@
 import React, {MutableRefObject} from 'react'
 import {observer} from 'mobx-react-lite'
 import {CenteredView, FlatList} from '../util/Views'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, RefreshControl, StyleSheet, View} from 'react-native'
 import {NotificationsViewModel} from 'state/models/notifications-view'
 import {FeedItem} from './FeedItem'
 import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
@@ -9,6 +9,7 @@ import {ErrorMessage} from '../util/error/ErrorMessage'
 import {EmptyState} from '../util/EmptyState'
 import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
 import {s} from 'lib/styles'
+import {usePalette} from 'lib/hooks/usePalette'
 
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
 
@@ -23,6 +24,7 @@ export const Feed = observer(function Feed({
   onPressTryAgain?: () => void
   onScroll?: OnScrollCb
 }) {
+  const pal = usePalette('default')
   const data = React.useMemo(() => {
     let feedItems
     if (view.hasLoaded) {
@@ -98,8 +100,14 @@ export const Feed = observer(function Feed({
           keyExtractor={item => item._reactKey}
           renderItem={renderItem}
           ListFooterComponent={FeedFooter}
+          refreshControl={
+            <RefreshControl
               refreshing={view.isRefreshing}
               onRefresh={onRefresh}
+              tintColor={pal.colors.text}
+              titleColor={pal.colors.text}
+            />
+          }
           onEndReached={onEndReached}
           onEndReachedThreshold={0.6}
           onScroll={onScroll}

src/view/com/post-thread/PostRepostedBy.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, RefreshControl, StyleSheet, View} from 'react-native'
 import {CenteredView, FlatList} from '../util/Views'
 import {
   RepostedByViewModel,
@@ -9,12 +9,14 @@ import {
 import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
 
 export const PostRepostedBy = observer(function PostRepostedBy({
   uri,
 }: {
   uri: string
 }) {
+  const pal = usePalette('default')
   const store = useStores()
   const view = React.useMemo(
     () => new RepostedByViewModel(store, {uri}),
@@ -73,8 +75,14 @@ export const PostRepostedBy = observer(function PostRepostedBy({
     <FlatList
       data={view.repostedBy}
       keyExtractor={item => item.did}
+      refreshControl={
+        <RefreshControl
           refreshing={view.isRefreshing}
           onRefresh={onRefresh}
+          tintColor={pal.colors.text}
+          titleColor={pal.colors.text}
+        />
+      }
       onEndReached={onEndReached}
       renderItem={renderItem}
       initialNumToRender={15}

src/view/com/post-thread/PostThread.tsx

@@ -1,6 +1,6 @@
 import React, {useRef} from 'react'
 import {observer} from 'mobx-react-lite'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, RefreshControl, StyleSheet, View} from 'react-native'
 import {CenteredView, FlatList} from '../util/Views'
 import {
   PostThreadViewModel,
@@ -120,8 +120,14 @@ export const PostThread = observer(function PostThread({
       initialNumToRender={posts.length}
       keyExtractor={item => item._reactKey}
       renderItem={renderItem}
+      refreshControl={
+        <RefreshControl
           refreshing={isRefreshing}
           onRefresh={onRefresh}
+          tintColor={pal.colors.text}
+          titleColor={pal.colors.text}
+        />
+      }
       onLayout={onLayout}
       onScrollToIndexFailed={onScrollToIndexFailed}
       style={s.hContentRegion}

src/view/com/post-thread/PostVotedBy.tsx

@@ -1,11 +1,12 @@
 import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, RefreshControl, StyleSheet, View} from 'react-native'
 import {CenteredView, FlatList} from '../util/Views'
 import {VotesViewModel, VoteItem} from 'state/models/votes-view'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
 import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
 
 export const PostVotedBy = observer(function PostVotedBy({
   uri,
@@ -14,6 +15,7 @@ export const PostVotedBy = observer(function PostVotedBy({
   uri: string
   direction: 'up' | 'down'
 }) {
+  const pal = usePalette('default')
   const store = useStores()
   const view = React.useMemo(
     () => new VotesViewModel(store, {uri, direction}),
@@ -68,8 +70,14 @@ export const PostVotedBy = observer(function PostVotedBy({
     <FlatList
       data={view.votes}
       keyExtractor={item => item.actor.did}
+      refreshControl={
+        <RefreshControl
           refreshing={view.isRefreshing}
           onRefresh={onRefresh}
+          tintColor={pal.colors.text}
+          titleColor={pal.colors.text}
+        />
+      }
       onEndReached={onEndReached}
       renderItem={renderItem}
       initialNumToRender={15}

src/view/com/posts/Feed.tsx

@@ -2,9 +2,10 @@ import React, {MutableRefObject} from 'react'
 import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
-  View,
+  RefreshControl,
   StyleProp,
   StyleSheet,
+  View,
   ViewStyle,
 } from 'react-native'
 import {CenteredView, FlatList} from '../util/Views'
@@ -16,6 +17,7 @@ import {FeedSlice} from './FeedSlice'
 import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
 import {s} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
 
 const HEADER_ITEM = {_reactKey: '__header__'}
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
@@ -42,6 +44,7 @@ export const Feed = observer(function Feed({
   testID?: string
   headerOffset?: number
 }) {
+  const pal = usePalette('default')
   const {track} = useAnalytics()
   const [isRefreshing, setIsRefreshing] = React.useState(false)
 
@@ -134,10 +137,16 @@ export const Feed = observer(function Feed({
           keyExtractor={item => item._reactKey}
           renderItem={renderItem}
           ListFooterComponent={FeedFooter}
+          refreshControl={
+            <RefreshControl
               refreshing={isRefreshing}
+              onRefresh={onRefresh}
+              tintColor={pal.colors.text}
+              titleColor={pal.colors.text}
+            />
+          }
           contentContainerStyle={s.contentContainer}
           onScroll={onScroll}
-          onRefresh={onRefresh}
           onEndReached={onEndReached}
           onEndReachedThreshold={0.6}
           removeClippedSubviews={true}

src/view/com/profile/ProfileCard.tsx

@@ -62,7 +62,9 @@ export function ProfileCard({
           {isFollowedBy && (
             <View style={s.flexRow}>
               <View style={[s.mt5, pal.btn, styles.pill]}>
-                <Text type="xs">Follows You</Text>
+                <Text type="xs" style={pal.text}>
+                  Follows You
+                </Text>
               </View>
             </View>
           )}

src/view/com/profile/ProfileFollowers.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, RefreshControl, StyleSheet, View} from 'react-native'
 import {
   UserFollowersViewModel,
   FollowerItem,
@@ -9,12 +9,14 @@ import {CenteredView, FlatList} from '../util/Views'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {ProfileCardWithFollowBtn} from './ProfileCard'
 import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
 
 export const ProfileFollowers = observer(function ProfileFollowers({
   name,
 }: {
   name: string
 }) {
+  const pal = usePalette('default')
   const store = useStores()
   const view = React.useMemo(
     () => new UserFollowersViewModel(store, {user: name}),
@@ -73,8 +75,14 @@ export const ProfileFollowers = observer(function ProfileFollowers({
     <FlatList
       data={view.followers}
       keyExtractor={item => item.did}
+      refreshControl={
+        <RefreshControl
           refreshing={view.isRefreshing}
           onRefresh={onRefresh}
+          tintColor={pal.colors.text}
+          titleColor={pal.colors.text}
+        />
+      }
       onEndReached={onEndReached}
       renderItem={renderItem}
       initialNumToRender={15}

src/view/com/profile/ProfileFollows.tsx

@@ -1,17 +1,19 @@
 import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, RefreshControl, StyleSheet, View} from 'react-native'
 import {CenteredView, FlatList} from '../util/Views'
 import {UserFollowsViewModel, FollowItem} from 'state/models/user-follows-view'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {ProfileCardWithFollowBtn} from './ProfileCard'
 import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
 
 export const ProfileFollows = observer(function ProfileFollows({
   name,
 }: {
   name: string
 }) {
+  const pal = usePalette('default')
   const store = useStores()
   const view = React.useMemo(
     () => new UserFollowsViewModel(store, {user: name}),
@@ -70,8 +72,14 @@ export const ProfileFollows = observer(function ProfileFollows({
     <FlatList
       data={view.follows}
       keyExtractor={item => item.did}
+      refreshControl={
+        <RefreshControl
           refreshing={view.isRefreshing}
           onRefresh={onRefresh}
+          tintColor={pal.colors.text}
+          titleColor={pal.colors.text}
+        />
+      }
       onEndReached={onEndReached}
       renderItem={renderItem}
       initialNumToRender={15}

src/view/screens/Search.tsx

@@ -201,7 +201,12 @@ export const SearchScreen = withAuthRequired(
               onScroll={onMainScroll}
               scrollEventThrottle={100}
               refreshControl={
-                <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+                <RefreshControl
+                  refreshing={refreshing}
+                  onRefresh={onRefresh}
+                  tintColor={pal.colors.text}
+                  titleColor={pal.colors.text}
+                />
               }>
               {foafsView.isLoading ? (
                 <ProfileCardFeedLoadingPlaceholder />