zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

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
zio/stable
Paul Frazee 2023-03-20 14:53:59 -05:00 committed by GitHub
parent d9ed13ea90
commit 4f9e9e609e
11 changed files with 90 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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": {

8
src/view/com/modals/ChangeHandle.tsx
View File

@ -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>
)}

14
src/view/com/notifications/Feed.tsx
View File

@ -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={
<RefreshControl
refreshing={view.isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
/>
}
onEndReached={onEndReached}
onEndReachedThreshold={0.6}
onScroll={onScroll}

14
src/view/com/post-thread/PostRepostedBy.tsx
View File

@ -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}
refreshing={view.isRefreshing}
onRefresh={onRefresh}
refreshControl={
<RefreshControl
refreshing={view.isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
/>
}
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}

12
src/view/com/post-thread/PostThread.tsx
View File

@ -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={
<RefreshControl
refreshing={isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
/>
}
onLayout={onLayout}
onScrollToIndexFailed={onScrollToIndexFailed}
style={s.hContentRegion}

14
src/view/com/post-thread/PostVotedBy.tsx
View File

@ -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}
refreshing={view.isRefreshing}
onRefresh={onRefresh}
refreshControl={
<RefreshControl
refreshing={view.isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
/>
}
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}

15
src/view/com/posts/Feed.tsx
View File

@ -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={
<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}

4
src/view/com/profile/ProfileCard.tsx
View File

@ -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>
)}

14
src/view/com/profile/ProfileFollowers.tsx
View File

@ -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}
refreshing={view.isRefreshing}
onRefresh={onRefresh}
refreshControl={
<RefreshControl
refreshing={view.isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
/>
}
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}

14
src/view/com/profile/ProfileFollows.tsx
View File

@ -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}
refreshing={view.isRefreshing}
onRefresh={onRefresh}
refreshControl={
<RefreshControl
refreshing={view.isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
/>
}
onEndReached={onEndReached}
renderItem={renderItem}
initialNumToRender={15}

7
src/view/screens/Search.tsx
View File

@ -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 />