From 4f9e9e609e7ab902e2479447a555c94b719018d8 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Mon, 20 Mar 2023 14:53:59 -0500 Subject: [PATCH] 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 | 2 +- src/view/com/modals/ChangeHandle.tsx | 8 ++++---- src/view/com/notifications/Feed.tsx | 14 +++++++++++--- src/view/com/post-thread/PostRepostedBy.tsx | 14 +++++++++++--- src/view/com/post-thread/PostThread.tsx | 12 +++++++++--- src/view/com/post-thread/PostVotedBy.tsx | 14 +++++++++++--- src/view/com/posts/Feed.tsx | 15 ++++++++++++--- src/view/com/profile/ProfileCard.tsx | 4 +++- src/view/com/profile/ProfileFollowers.tsx | 14 +++++++++++--- src/view/com/profile/ProfileFollows.tsx | 14 +++++++++++--- src/view/screens/Search.tsx | 7 ++++++- 11 files changed, 90 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 194c649e..47db6c8a 100644 --- a/package.json +++ b/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": { diff --git a/src/view/com/modals/ChangeHandle.tsx b/src/view/com/modals/ChangeHandle.tsx index 0795d6d2..f15f7ca4 100644 --- a/src/view/com/modals/ChangeHandle.tsx +++ b/src/view/com/modals/ChangeHandle.tsx @@ -363,7 +363,7 @@ function CustomHandleForm({ Add the following record to your domain: - + Domain: @@ -371,7 +371,7 @@ function CustomHandleForm({ _atproto.{handle} - + Type: @@ -379,7 +379,7 @@ function CustomHandleForm({ TXT - + Value: @@ -415,7 +415,7 @@ function CustomHandleForm({ {isVerifying ? ( ) : ( - + {canSave ? `Update to ${handle}` : 'Verify DNS Record'} )} diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index 09d5bf7b..b2fba0fc 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/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} - refreshing={view.isRefreshing} - onRefresh={onRefresh} + refreshControl={ + + } onEndReached={onEndReached} onEndReachedThreshold={0.6} onScroll={onScroll} diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx index a9fabac3..fda54469 100644 --- a/src/view/com/post-thread/PostRepostedBy.tsx +++ b/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({ item.did} - refreshing={view.isRefreshing} - onRefresh={onRefresh} + refreshControl={ + + } onEndReached={onEndReached} renderItem={renderItem} initialNumToRender={15} diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index f84593db..d0452331 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/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} - refreshing={isRefreshing} - onRefresh={onRefresh} + refreshControl={ + + } onLayout={onLayout} onScrollToIndexFailed={onScrollToIndexFailed} style={s.hContentRegion} diff --git a/src/view/com/post-thread/PostVotedBy.tsx b/src/view/com/post-thread/PostVotedBy.tsx index 2734aaea..f8679809 100644 --- a/src/view/com/post-thread/PostVotedBy.tsx +++ b/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({ item.actor.did} - refreshing={view.isRefreshing} - onRefresh={onRefresh} + refreshControl={ + + } onEndReached={onEndReached} renderItem={renderItem} initialNumToRender={15} diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index c910b70e..45cf2cc2 100644 --- a/src/view/com/posts/Feed.tsx +++ b/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} - refreshing={isRefreshing} + refreshControl={ + + } contentContainerStyle={s.contentContainer} onScroll={onScroll} - onRefresh={onRefresh} onEndReached={onEndReached} onEndReachedThreshold={0.6} removeClippedSubviews={true} diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx index 53f45fb1..7b454cc8 100644 --- a/src/view/com/profile/ProfileCard.tsx +++ b/src/view/com/profile/ProfileCard.tsx @@ -62,7 +62,9 @@ export function ProfileCard({ {isFollowedBy && ( - Follows You + + Follows You + )} diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx index 7db770e4..d1488403 100644 --- a/src/view/com/profile/ProfileFollowers.tsx +++ b/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({ item.did} - refreshing={view.isRefreshing} - onRefresh={onRefresh} + refreshControl={ + + } onEndReached={onEndReached} renderItem={renderItem} initialNumToRender={15} diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index fb7f08ed..ddb64787 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/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({ item.did} - refreshing={view.isRefreshing} - onRefresh={onRefresh} + refreshControl={ + + } onEndReached={onEndReached} renderItem={renderItem} initialNumToRender={15} diff --git a/src/view/screens/Search.tsx b/src/view/screens/Search.tsx index 6ae5fba0..a21ef970 100644 --- a/src/view/screens/Search.tsx +++ b/src/view/screens/Search.tsx @@ -201,7 +201,12 @@ export const SearchScreen = withAuthRequired( onScroll={onMainScroll} scrollEventThrottle={100} refreshControl={ - + }> {foafsView.isLoading ? (