octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implemented new dark theme

This commit is contained in:
Zhiyuan Zheng 2022-02-12 14:51:01 +01:00
parent 50141b2963
commit 6f0c318d06
108 changed files with 863 additions and 571 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Screens.tsx
View File

@ -26,7 +26,6 @@ import { addScreenshotListener } from 'expo-screen-capture'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Alert, Platform, StatusBar } from 'react-native'
import { useQueryClient } from 'react-query'
import { useDispatch, useSelector } from 'react-redux'
import * as Sentry from 'sentry-expo'
@ -40,7 +39,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
const { t } = useTranslation('screens')
const dispatch = useDispatch()
const instanceActive = useSelector(getInstanceActive)
const { mode, theme } = useTheme()
const { colors, mode, theme } = useTheme()
enum barStyle {
light = 'dark-content',
dark = 'light-content'
@ -53,7 +52,6 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
getInstances,
(prev, next) => prev.length === next.length
)
const queryClient = useQueryClient()
pushUseConnect({ t, instances })
pushUseReceive({ instances })
pushUseRespond({ instances })
@ -77,8 +75,9 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
message: t('localCorrupt.message'),
description: localCorrupt.length ? localCorrupt : undefined,
type: 'error',
mode
theme
})
// @ts-ignore
navigationRef.navigate('Screen-Tabs', {
screen: 'Tab-Me'
})
@ -164,11 +163,11 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
<>
<StatusBar
barStyle={barStyle[mode]}
backgroundColor={theme.backgroundDefault}
backgroundColor={colors.backgroundDefault}
/>
<NavigationContainer
ref={navigationRef}
theme={themes[mode]}
theme={themes[theme]}
onReady={navigationContainerOnReady}
onStateChange={navigationContainerOnStateChange}
>

9
src/components/Account.tsx
View File

@ -20,10 +20,9 @@ const ComponentAccount: React.FC<Props> = ({
onPress: customOnPress,
origin
}) => {
const { theme } = useTheme()
const navigation = useNavigation<
StackNavigationProp<TabLocalStackParamList>
>()
const { colors } = useTheme()
const navigation =
useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const onPress = useCallback(() => {
analytics('search_account_press', { page: origin })
@ -51,7 +50,7 @@ const ComponentAccount: React.FC<Props> = ({
</Text>
<Text
numberOfLines={1}
style={[styles.itemAccountAcct, { color: theme.secondary }]}
style={[styles.itemAccountAcct, { color: colors.secondary }]}
>
@{account.acct}
</Text>

26
src/components/Button.tsx
View File

@ -54,7 +54,7 @@ const Button: React.FC<Props> = ({
overlay = false,
onPress
}) => {
const { mode, theme } = useTheme()
const { colors, theme } = useTheme()
const mounted = useRef(false)
useEffect(() => {
@ -68,35 +68,35 @@ const Button: React.FC<Props> = ({
const loadingSpinkit = useMemo(
() => (
<View style={{ position: 'absolute' }}>
<Flow size={StyleConstants.Font.Size[size]} color={theme.secondary} />
<Flow size={StyleConstants.Font.Size[size]} color={colors.secondary} />
</View>
),
[mode]
[theme]
)
const mainColor = useMemo(() => {
if (selected) {
return theme.blue
return colors.blue
} else if (overlay) {
return theme.primaryOverlay
return colors.primaryOverlay
} else if (disabled || loading) {
return theme.disabled
return colors.disabled
} else {
if (destructive) {
return theme.red
return colors.red
} else {
return theme.primaryDefault
return colors.primaryDefault
}
}
}, [mode, disabled, loading, selected])
}, [theme, disabled, loading, selected])
const colorBackground = useMemo(() => {
if (overlay) {
return theme.backgroundOverlayInvert
return colors.backgroundOverlayInvert
} else {
return theme.backgroundDefault
return colors.backgroundDefault
}
}, [mode])
}, [theme])
const children = useMemo(() => {
switch (type) {
@ -130,7 +130,7 @@ const Button: React.FC<Props> = ({
</>
)
}
}, [mode, content, loading, disabled])
}, [theme, content, loading, disabled])
const [layoutHeight, setLayoutHeight] = useState<number | undefined>()

6
src/components/Emojis/Button.tsx
View File

@ -7,7 +7,7 @@ import EmojisContext from './helpers/EmojisContext'
const EmojisButton = React.memo(
() => {
const { theme } = useTheme()
const { colors } = useTheme()
const { emojisState, emojisDispatch } = useContext(EmojisContext)
return emojisState.enabled ? (
@ -30,8 +30,8 @@ const EmojisButton = React.memo(
size={StyleConstants.Font.Size.L}
color={
emojisState.emojis && emojisState.emojis.length
? theme.primaryDefault
: theme.disabled
? colors.primaryDefault
: colors.disabled
}
/>
}

4
src/components/Emojis/List.tsx
View File

@ -23,11 +23,11 @@ const EmojisList = React.memo(
const { t } = useTranslation()
const { emojisState, emojisDispatch } = useContext(EmojisContext)
const { theme } = useTheme()
const { colors } = useTheme()
const listHeader = useCallback(
({ section: { title } }) => (
<Text style={[styles.group, { color: theme.secondary }]}>{title}</Text>
<Text style={[styles.group, { color: colors.secondary }]}>{title}</Text>
),
[]
)

8
src/components/GracefullyImage.tsx
View File

@ -51,7 +51,7 @@ const GracefullyImage = React.memo(
imageStyle,
setImageDimensions
}: Props) => {
const { theme } = useTheme()
const { colors } = useTheme()
const [originalFailed, setOriginalFailed] = useState(false)
const [imageLoaded, setImageLoaded] = useState(false)
@ -85,7 +85,7 @@ const GracefullyImage = React.memo(
source={{ uri: uri.preview }}
style={[
styles.placeholder,
{ backgroundColor: theme.shimmerDefault }
{ backgroundColor: colors.shimmerDefault }
]}
/>
) : null,
@ -118,7 +118,7 @@ const GracefullyImage = React.memo(
<View
style={[
styles.placeholder,
{ backgroundColor: theme.shimmerDefault }
{ backgroundColor: colors.shimmerDefault }
]}
/>
)
@ -135,7 +135,7 @@ const GracefullyImage = React.memo(
: { accessibilityRole: 'image' })}
accessibilityLabel={accessibilityLabel}
accessibilityHint={accessibilityHint}
style={[style, dimension, { backgroundColor: theme.shimmerDefault }]}
style={[style, dimension, { backgroundColor: colors.shimmerDefault }]}
{...(onPress
? hidden
? { disabled: true }

9
src/components/Hashtag.tsx
View File

@ -17,10 +17,9 @@ const ComponentHashtag: React.FC<Props> = ({
onPress: customOnPress,
origin
}) => {
const { theme } = useTheme()
const navigation = useNavigation<
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const { colors } = useTheme()
const navigation =
useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
const onPress = useCallback(() => {
analytics('search_account_press', { page: origin })
@ -33,7 +32,7 @@ const ComponentHashtag: React.FC<Props> = ({
style={styles.itemDefault}
onPress={customOnPress || onPress}
>
<Text style={[styles.itemHashtag, { color: theme.primaryDefault }]}>
<Text style={[styles.itemHashtag, { color: colors.primaryDefault }]}>
#{hashtag.name}
</Text>
</Pressable>

4
src/components/Header/Center.tsx
View File

@ -11,13 +11,13 @@ export interface Props {
// Used for Android mostly
const HeaderCenter = React.memo(
({ content, inverted = false }: Props) => {
const { theme } = useTheme()
const { colors } = useTheme()
return (
<Text
style={[
styles.text,
{ color: inverted ? theme.primaryOverlay : theme.primaryDefault }
{ color: inverted ? colors.primaryOverlay : colors.primaryDefault }
]}
children={content}
/>

8
src/components/Header/Left.tsx
View File

@ -20,14 +20,14 @@ const HeaderLeft: React.FC<Props> = ({
background = false,
onPress
}) => {
const { theme } = useTheme()
const { colors, theme } = useTheme()
const children = useMemo(() => {
switch (type) {
case 'icon':
return (
<Icon
color={theme.primaryDefault}
color={colors.primaryDefault}
name={content || 'ChevronLeft'}
size={StyleConstants.Spacing.M * 1.25}
/>
@ -35,7 +35,7 @@ const HeaderLeft: React.FC<Props> = ({
case 'text':
return (
<Text
style={[styles.text, { color: theme.primaryDefault }]}
style={[styles.text, { color: colors.primaryDefault }]}
children={content}
/>
)
@ -50,7 +50,7 @@ const HeaderLeft: React.FC<Props> = ({
styles.base,
{
backgroundColor: background
? theme.backgroundOverlayDefault
? colors.backgroundOverlayDefault
: undefined,
minHeight: 44,
minWidth: 44,

10
src/components/Header/Right.tsx
View File

@ -41,14 +41,14 @@ const HeaderRight: React.FC<Props> = ({
disabled,
onPress
}) => {
const { theme } = useTheme()
const { colors, theme } = useTheme()
const loadingSpinkit = useMemo(
() => (
<View style={{ position: 'absolute' }}>
<Flow
size={StyleConstants.Font.Size.M * 1.25}
color={theme.secondary}
color={colors.secondary}
/>
</View>
),
@ -64,7 +64,7 @@ const HeaderRight: React.FC<Props> = ({
name={content}
style={{ opacity: loading ? 0 : 1 }}
size={StyleConstants.Spacing.M * 1.25}
color={disabled ? theme.secondary : theme.primaryDefault}
color={disabled ? colors.secondary : colors.primaryDefault}
/>
{loading && loadingSpinkit}
</>
@ -76,7 +76,7 @@ const HeaderRight: React.FC<Props> = ({
style={[
styles.text,
{
color: disabled ? theme.secondary : theme.primaryDefault,
color: disabled ? colors.secondary : colors.primaryDefault,
opacity: loading ? 0 : 1
}
]}
@ -101,7 +101,7 @@ const HeaderRight: React.FC<Props> = ({
styles.base,
{
backgroundColor: background
? theme.backgroundOverlayDefault
? colors.backgroundOverlayDefault
: undefined,
minHeight: 44,
minWidth: 44,

14
src/components/Input.tsx
View File

@ -57,7 +57,7 @@ const Input: React.FC<Props> = ({
setValue,
options
}) => {
const { mode, theme } = useTheme()
const { colors, mode } = useTheme()
const animateTitle = useAnimatedStyle(() => {
if (value) {
@ -66,7 +66,7 @@ const Input: React.FC<Props> = ({
paddingHorizontal: withTiming(StyleConstants.Spacing.XS),
left: withTiming(StyleConstants.Spacing.S),
top: withTiming(-(StyleConstants.Font.Size.S / 2) - 2),
backgroundColor: withTiming(theme.backgroundDefault)
backgroundColor: withTiming(colors.backgroundDefault)
}
} else {
return {
@ -74,7 +74,7 @@ const Input: React.FC<Props> = ({
paddingHorizontal: withTiming(0),
left: withTiming(StyleConstants.Spacing.S),
top: withTiming(StyleConstants.Spacing.S + 1),
backgroundColor: withTiming(theme.backgroundDefaultTransparent)
backgroundColor: withTiming(colors.backgroundDefaultTransparent)
}
}
}, [mode, value])
@ -109,7 +109,7 @@ const Input: React.FC<Props> = ({
style={[
styles.base,
{
borderColor: theme.border,
borderColor: colors.border,
flexDirection: multiline ? 'column' : 'row',
alignItems: 'stretch'
}
@ -127,7 +127,7 @@ const Input: React.FC<Props> = ({
style={[
styles.textInput,
{
color: theme.primaryDefault,
color: colors.primaryDefault,
minHeight:
Platform.OS === 'ios' && multiline
? StyleConstants.Font.LineHeight.M * 5
@ -149,14 +149,14 @@ const Input: React.FC<Props> = ({
</EmojisContext.Consumer>
{title ? (
<Animated.Text
style={[styles.title, animateTitle, { color: theme.secondary }]}
style={[styles.title, animateTitle, { color: colors.secondary }]}
>
{title}
</Animated.Text>
) : null}
<View style={{ flexDirection: 'row', alignSelf: 'flex-end' }}>
{options?.maxLength && value?.length ? (
<Text style={[styles.maxLength, { color: theme.secondary }]}>
<Text style={[styles.maxLength, { color: colors.secondary }]}>
{value?.length} / {options.maxLength}
</Text>
) : null}

22
src/components/Instance.tsx
View File

@ -39,7 +39,7 @@ const ComponentInstance: React.FC<Props> = ({
goBack = false
}) => {
const { t } = useTranslation('componentInstance')
const { mode, theme } = useTheme()
const { colors, mode } = useTheme()
const { screenReaderEnabled } = useAccessibility()
const instances = useSelector(getInstances, () => true)
@ -149,10 +149,10 @@ const ComponentInstance: React.FC<Props> = ({
style={[
styles.prefix,
{
color: theme.primaryDefault,
color: colors.primaryDefault,
borderBottomColor: instanceQuery.isError
? theme.red
: theme.border
? colors.red
: colors.border
}
]}
editable={false}
@ -162,10 +162,10 @@ const ComponentInstance: React.FC<Props> = ({
style={[
styles.textInput,
{
color: theme.primaryDefault,
color: colors.primaryDefault,
borderBottomColor: instanceQuery.isError
? theme.red
: theme.border
? colors.red
: colors.border
}
]}
onChangeText={onChangeText}
@ -175,7 +175,7 @@ const ComponentInstance: React.FC<Props> = ({
textContentType='URL'
onSubmitEditing={onSubmitEditing}
placeholder={' ' + t('server.textInput.placeholder')}
placeholderTextColor={theme.secondary}
placeholderTextColor={colors.secondary}
returnKeyType='go'
keyboardAppearance={mode}
{...(scrollViewRef && {
@ -234,11 +234,11 @@ const ComponentInstance: React.FC<Props> = ({
<Icon
name='Lock'
size={StyleConstants.Font.Size.S}
color={theme.secondary}
color={colors.secondary}
style={styles.disclaimerIcon}
/>
<Text
style={[styles.disclaimerText, { color: theme.secondary }]}
style={[styles.disclaimerText, { color: colors.secondary }]}
accessibilityRole='link'
onPress={() => {
if (screenReaderEnabled) {
@ -252,7 +252,7 @@ const ComponentInstance: React.FC<Props> = ({
{t('server.disclaimer.base')}
<Text
accessible
style={{ color: theme.blue }}
style={{ color: colors.blue }}
onPress={() => {
analytics('view_privacy')
WebBrowser.openBrowserAsync(

8
src/components/Instance/Info.tsx
View File

@ -13,15 +13,15 @@ export interface Props {
const InstanceInfo = React.memo(
({ style, header, content, potentialWidth }: Props) => {
const { theme } = useTheme()
const { colors } = useTheme()
return (
<View style={[styles.base, style]} accessible>
<Text style={[styles.header, { color: theme.primaryDefault }]}>
<Text style={[styles.header, { color: colors.primaryDefault }]}>
{header}
</Text>
{content ? (
<Text style={[styles.content, { color: theme.primaryDefault }]}>
<Text style={[styles.content, { color: colors.primaryDefault }]}>
{content}
</Text>
) : (
@ -32,7 +32,7 @@ const InstanceInfo = React.memo(
: undefined
}
height={StyleConstants.Font.LineHeight.M}
color={theme.shimmerDefault}
color={colors.shimmerDefault}
noMargin
style={{ borderRadius: 0 }}
/>

4
src/components/Menu/Header.tsx
View File

@ -8,11 +8,11 @@ export interface Props {
}
const MenuHeader: React.FC<Props> = ({ heading }) => {
const { theme } = useTheme()
const { colors } = useTheme()
return (
<View style={styles.base}>
<Text style={[styles.text, { color: theme.secondary }]}>{heading}</Text>
<Text style={[styles.text, { color: colors.secondary }]}>{heading}</Text>
</View>
)
}

18
src/components/Menu/Row.tsx
View File

@ -43,7 +43,7 @@ const MenuRow: React.FC<Props> = ({
loading = false,
onPress
}) => {
const { theme } = useTheme()
const { colors, theme } = useTheme()
const { screenReaderEnabled } = useAccessibility()
const loadingSpinkit = useMemo(
@ -51,7 +51,7 @@ const MenuRow: React.FC<Props> = ({
<View style={{ position: 'absolute' }}>
<Flow
size={StyleConstants.Font.Size.M * 1.25}
color={theme.secondary}
color={colors.secondary}
/>
</View>
),
@ -83,7 +83,7 @@ const MenuRow: React.FC<Props> = ({
<Icon
name={iconFront}
size={StyleConstants.Font.Size.L}
color={theme[iconFrontColor]}
color={colors[iconFrontColor]}
style={styles.iconFront}
/>
)}
@ -92,7 +92,7 @@ const MenuRow: React.FC<Props> = ({
style={{
width: 8,
height: 8,
backgroundColor: theme.red,
backgroundColor: colors.red,
borderRadius: 8,
marginRight: StyleConstants.Spacing.S
}}
@ -100,7 +100,7 @@ const MenuRow: React.FC<Props> = ({
) : null}
<View style={styles.main}>
<Text
style={[styles.title, { color: theme.primaryDefault }]}
style={[styles.title, { color: colors.primaryDefault }]}
numberOfLines={1}
>
{title}
@ -116,7 +116,7 @@ const MenuRow: React.FC<Props> = ({
style={[
styles.content,
{
color: theme.secondary,
color: colors.secondary,
opacity: !iconBack && loading ? 0 : 1
}
]}
@ -133,7 +133,7 @@ const MenuRow: React.FC<Props> = ({
value={switchValue}
onValueChange={switchOnValueChange}
disabled={switchDisabled}
trackColor={{ true: theme.blue, false: theme.disabled }}
trackColor={{ true: colors.blue, false: colors.disabled }}
style={{ opacity: loading ? 0 : 1 }}
/>
) : null}
@ -141,7 +141,7 @@ const MenuRow: React.FC<Props> = ({
<Icon
name={iconBack}
size={StyleConstants.Font.Size.L}
color={theme[iconBackColor]}
color={colors[iconBackColor]}
style={[styles.iconBack, { opacity: loading ? 0 : 1 }]}
/>
) : null}
@ -150,7 +150,7 @@ const MenuRow: React.FC<Props> = ({
) : null}
</View>
{description ? (
<Text style={[styles.description, { color: theme.secondary }]}>
<Text style={[styles.description, { color: colors.secondary }]}>
{description}
</Text>
) : null}

28
src/components/Message.tsx
View File

@ -1,7 +1,7 @@
import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { getTheme } from '@utils/styles/themes'
import { getColors, Theme } from '@utils/styles/themes'
import React, { RefObject } from 'react'
import { AccessibilityInfo } from 'react-native'
import FlashMessage, {
@ -17,7 +17,7 @@ const displayMessage = ({
message,
description,
onPress,
mode,
theme,
type
}:
| {
@ -27,7 +27,7 @@ const displayMessage = ({
message: string
description?: string
onPress?: () => void
mode?: undefined
theme?: undefined
type?: undefined
}
| {
@ -37,7 +37,7 @@ const displayMessage = ({
message: string
description?: string
onPress?: () => void
mode: 'light' | 'dark'
theme: Theme
type: 'success' | 'error' | 'warning'
}) => {
AccessibilityInfo.announceForAccessibility(message + '.' + description)
@ -64,14 +64,14 @@ const displayMessage = ({
message,
description,
onPress,
...(mode &&
...(theme &&
type && {
renderFlashMessageIcon: () => {
return (
<Icon
name={iconMapping[type]}
size={StyleConstants.Font.LineHeight.M}
color={getTheme(mode)[colorMapping[type]]}
color={getColors(theme)[colorMapping[type]]}
style={{ marginRight: StyleConstants.Spacing.S }}
/>
)
@ -85,14 +85,14 @@ const displayMessage = ({
message,
description,
onPress,
...(mode &&
...(theme &&
type && {
renderFlashMessageIcon: () => {
return (
<Icon
name={iconMapping[type]}
size={StyleConstants.Font.LineHeight.M}
color={getTheme(mode)[colorMapping[type]]}
color={getColors(theme)[colorMapping[type]]}
style={{ marginRight: StyleConstants.Spacing.S }}
/>
)
@ -111,7 +111,7 @@ const removeMessage = () => {
}
const Message = React.forwardRef<FlashMessage>((_, ref) => {
const { mode, theme } = useTheme()
const { colors, theme } = useTheme()
return (
<FlashMessage
@ -120,19 +120,19 @@ const Message = React.forwardRef<FlashMessage>((_, ref) => {
position='top'
floating
style={{
backgroundColor: theme.backgroundDefault,
shadowColor: theme.primaryDefault,
backgroundColor: colors.backgroundDefault,
shadowColor: colors.primaryDefault,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: mode === 'light' ? 0.16 : 0.24,
shadowOpacity: theme === 'light' ? 0.16 : 0.24,
shadowRadius: 4
}}
titleStyle={{
color: theme.primaryDefault,
color: colors.primaryDefault,
...StyleConstants.FontStyle.M,
fontWeight: StyleConstants.Font.Weight.Bold
}}
textStyle={{
color: theme.primaryDefault,
color: colors.primaryDefault,
...StyleConstants.FontStyle.S
}}
// @ts-ignore

6
src/components/Parse/Emojis.tsx
View File

@ -39,11 +39,11 @@ const ParseEmojis = React.memo(
adaptiveSize ? adaptiveFontsize : 0
)
const { mode, theme } = useTheme()
const { colors, theme } = useTheme()
const styles = useMemo(() => {
return StyleSheet.create({
text: {
color: theme.primaryDefault,
color: colors.primaryDefault,
fontSize: adaptedFontsize,
lineHeight: adaptedLineheight,
...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })
@ -54,7 +54,7 @@ const ParseEmojis = React.memo(
transform: [{ translateY: -2 }]
}
})
}, [mode, adaptiveFontsize])
}, [theme, adaptiveFontsize])
return (
<Text style={styles.text}>

28
src/components/Parse/HTML.tsx
View File

@ -18,7 +18,7 @@ import { useSelector } from 'react-redux'
// Prevent going to the same hashtag multiple times
const renderNode = ({
routeParams,
theme,
colors,
node,
index,
adaptedFontsize,
@ -30,7 +30,7 @@ const renderNode = ({
disableDetails
}: {
routeParams?: any
theme: any
colors: any
node: any
index: number
adaptedFontsize: number
@ -56,7 +56,7 @@ const renderNode = ({
accessible
key={index}
style={{
color: theme.blue,
color: colors.blue,
fontSize: adaptedFontsize,
lineHeight: adaptedLineheight
}}
@ -84,7 +84,8 @@ const renderNode = ({
<Text
key={index}
style={{
color: accountIndex !== -1 ? theme.blue : theme.primaryDefault,
color:
accountIndex !== -1 ? colors.blue : colors.primaryDefault,
fontSize: adaptedFontsize,
lineHeight: adaptedLineheight
}}
@ -114,7 +115,7 @@ const renderNode = ({
<Text
key={index}
style={{
color: theme.blue,
color: colors.blue,
alignItems: 'center',
fontSize: adaptedFontsize,
lineHeight: adaptedLineheight
@ -132,7 +133,7 @@ const renderNode = ({
(showFullLink ? href : domain[1])}
{!shouldBeTag ? (
<Icon
color={theme.blue}
color={colors.blue}
name='ExternalLink'
size={adaptedFontsize}
style={{
@ -192,11 +193,10 @@ const ParseHTML = React.memo(
adaptiveSize ? adaptiveFontsize : 0
)
const navigation = useNavigation<
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const navigation =
useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
const route = useRoute()
const { mode, theme } = useTheme()
const { colors, theme } = useTheme()
const { t, i18n } = useTranslation('componentParse')
if (!expandHint) {
expandHint = t('HTML.defaultHint')
@ -206,7 +206,7 @@ const ParseHTML = React.memo(
(node, index) =>
renderNode({
routeParams: route.params,
theme,
colors,
node,
index,
adaptedFontsize,
@ -271,14 +271,14 @@ const ParseHTML = React.memo(
justifyContent: 'center',
marginTop: expanded ? 0 : -adaptedLineheight,
minHeight: 44,
backgroundColor: theme.backgroundDefault
backgroundColor: colors.backgroundDefault
}}
>
<Text
style={{
textAlign: 'center',
...StyleConstants.FontStyle.S,
color: theme.primaryDefault
color: colors.primaryDefault
}}
children={t(`HTML.expanded.${expanded.toString()}`, {
hint: expandHint
@ -289,7 +289,7 @@ const ParseHTML = React.memo(
</View>
)
},
[mode, i18n.language]
[theme, i18n.language]
)
return (

4
src/components/Relationship/Incoming.tsx
View File

@ -19,7 +19,7 @@ export interface Props {
}
const RelationshipIncoming: React.FC<Props> = ({ id }) => {
const { mode } = useTheme()
const { theme } = useTheme()
const { t } = useTranslation()
const queryKeyRelationship: QueryKeyRelationship = ['Relationship', { id }]
@ -40,7 +40,7 @@ const RelationshipIncoming: React.FC<Props> = ({ id }) => {
haptics('Error')
displayMessage({
type: 'error',
mode,
theme,
message: t('common:message.error.message', {
function: t(`relationship:${type}.function`)
}),

4
src/components/Relationship/Outgoing.tsx
View File

@ -19,7 +19,7 @@ export interface Props {
const RelationshipOutgoing = React.memo(
({ id }: Props) => {
const { mode } = useTheme()
const { theme } = useTheme()
const { t } = useTranslation('componentRelationship')
const query = useRelationshipQuery({ id })
@ -40,7 +40,7 @@ const RelationshipOutgoing = React.memo(
},
onError: (err: any, { payload: { action } }) => {
displayMessage({
mode,
theme,
type: 'error',
message: t('common:message.error.message', {
function: t(`${action}.function`)

6
src/components/Separator.tsx
View File

@ -10,13 +10,13 @@ export interface Props {
const ComponentSeparator = React.memo(
({ extraMarginLeft = 0, extraMarginRight = 0 }: Props) => {
const { theme } = useTheme()
const { colors } = useTheme()
return (
<View
style={{
backgroundColor: theme.backgroundDefault,
borderTopColor: theme.border,
backgroundColor: colors.backgroundDefault,
borderTopColor: colors.border,
borderTopWidth: StyleSheet.hairlineWidth,
marginLeft:
StyleConstants.Spacing.Global.PagePadding + extraMarginLeft,

6
src/components/Timeline.tsx
View File

@ -48,7 +48,7 @@ const Timeline: React.FC<Props> = ({
lookback,
customProps
}) => {
const { theme } = useTheme()
const { colors } = useTheme()
const {
data,
@ -118,8 +118,8 @@ const Timeline: React.FC<Props> = ({
refreshControl: (
<RefreshControl
enabled
colors={[theme.primaryDefault]}
progressBackgroundColor={theme.backgroundDefault}
colors={[colors.primaryDefault]}
progressBackgroundColor={colors.backgroundDefault}
refreshing={isFetching || isLoading}
onRefresh={() => refetch()}
/>

11
src/components/Timeline/Conversation.tsx
View File

@ -62,7 +62,7 @@ const TimelineConversation: React.FC<Props> = ({
getInstanceAccount,
(prev, next) => prev?.id === next?.id
)
const { theme } = useTheme()
const { colors } = useTheme()
const queryClient = useQueryClient()
const fireMutation = useCallback(() => {
@ -77,9 +77,8 @@ const TimelineConversation: React.FC<Props> = ({
}
})
const navigation = useNavigation<
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const navigation =
useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
const onPress = useCallback(() => {
analytics('timeline_conversation_press')
if (conversation.last_status) {
@ -95,10 +94,10 @@ const TimelineConversation: React.FC<Props> = ({
<Pressable
style={[
styles.base,
{ backgroundColor: theme.backgroundDefault },
{ backgroundColor: colors.backgroundDefault },
conversation.unread && {
borderLeftWidth: StyleConstants.Spacing.XS,
borderLeftColor: theme.blue,
borderLeftColor: colors.blue,
paddingLeft:
StyleConstants.Spacing.Global.PagePadding -
StyleConstants.Spacing.XS

9
src/components/Timeline/Default.tsx
View File

@ -42,11 +42,10 @@ const TimelineDefault: React.FC<Props> = ({
disableDetails = false,
disableOnPress = false
}) => {
const { theme } = useTheme()
const { colors } = useTheme()
const instanceAccount = useSelector(getInstanceAccount, () => true)
const navigation = useNavigation<
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const navigation =
useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
const actualStatus = item.reblog ? item.reblog : item
@ -78,7 +77,7 @@ const TimelineDefault: React.FC<Props> = ({
style={[
styles.statusView,
{
backgroundColor: theme.backgroundDefault,
backgroundColor: colors.backgroundDefault,
paddingBottom:
disableDetails && disableOnPress
? StyleConstants.Spacing.Global.PagePadding

19
src/components/Timeline/Empty.tsx
View File

@ -20,14 +20,17 @@ const TimelineEmpty = React.memo(
options: { notifyOnChangeProps: ['status'] }
})
const { mode, theme } = useTheme()
const { colors, theme } = useTheme()
const { t, i18n } = useTranslation('componentTimeline')
const children = useMemo(() => {
switch (status) {
case 'loading':
return (
<Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
<Circle
size={StyleConstants.Font.Size.L}
color={colors.secondary}
/>
)
case 'error':
return (
@ -35,9 +38,9 @@ const TimelineEmpty = React.memo(
<Icon
name='Frown'
size={StyleConstants.Font.Size.L}
color={theme.primaryDefault}
color={colors.primaryDefault}
/>
<Text style={[styles.error, { color: theme.primaryDefault }]}>
<Text style={[styles.error, { color: colors.primaryDefault }]}>
{t('empty.error.message')}
</Text>
<Button
@ -56,18 +59,18 @@ const TimelineEmpty = React.memo(
<Icon
name='Smartphone'
size={StyleConstants.Font.Size.L}
color={theme.primaryDefault}
color={colors.primaryDefault}
/>
<Text style={[styles.error, { color: theme.primaryDefault }]}>
<Text style={[styles.error, { color: colors.primaryDefault }]}>
{t('empty.success.message')}
</Text>
</>
)
}
}, [mode, i18n.language, status])
}, [theme, i18n.language, status])
return (
<View
style={[styles.base, { backgroundColor: theme.backgroundDefault }]}
style={[styles.base, { backgroundColor: colors.backgroundDefault }]}
children={children}
/>
)

8
src/components/Timeline/Footer.tsx
View File

@ -24,21 +24,21 @@ const TimelineFooter = React.memo(
}
})
const { theme } = useTheme()
const { colors } = useTheme()
return (
<View style={styles.base}>
{!disableInfinity && hasNextPage ? (
<Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
<Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
) : (
<Text style={[styles.text, { color: theme.secondary }]}>
<Text style={[styles.text, { color: colors.secondary }]}>
<Trans
i18nKey='componentTimeline:end.message'
components={[
<Icon
name='Coffee'
size={StyleConstants.Font.Size.S}
color={theme.secondary}
color={colors.secondary}
/>
]}
/>

8
src/components/Timeline/Lookback.tsx
View File

@ -7,12 +7,14 @@ import { StyleSheet, Text, View } from 'react-native'
const TimelineLookback = React.memo(
() => {
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const { colors } = useTheme()
return (
<View style={[styles.base, { backgroundColor: theme.backgroundDefault }]}>
<View
style={[styles.base, { backgroundColor: colors.backgroundDefault }]}
>
<Text
style={[StyleConstants.FontStyle.S, { color: theme.primaryDefault }]}
style={[StyleConstants.FontStyle.S, { color: colors.primaryDefault }]}
>
{t('lookback.message')}
</Text>

15
src/components/Timeline/Notifications.tsx
View File

@ -38,14 +38,13 @@ const TimelineNotifications: React.FC<Props> = ({
return <TimelineFiltered />
}
const { theme } = useTheme()
const { colors } = useTheme()
const instanceAccount = useSelector(
getInstanceAccount,
(prev, next) => prev?.id === next?.id
)
const navigation = useNavigation<
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const navigation =
useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
const actualAccount = notification.status
? notification.status.account
@ -65,7 +64,7 @@ const TimelineNotifications: React.FC<Props> = ({
style={[
styles.notificationView,
{
backgroundColor: theme.backgroundDefault,
backgroundColor: colors.backgroundDefault,
paddingBottom: notification.status
? 0
: StyleConstants.Spacing.Global.PagePadding
@ -148,8 +147,10 @@ const TimelineNotifications: React.FC<Props> = ({
status={notification.status}
highlighted={highlighted}
accts={uniqBy(
([notification.status.account] as Mastodon.Account[] &
Mastodon.Mention[])
(
[notification.status.account] as Mastodon.Account[] &
Mastodon.Mention[]
)
.concat(notification.status.mentions)
.filter(d => d?.id !== instanceAccount?.id),
d => d?.id

13
src/components/Timeline/Refresh.tsx
View File

@ -101,7 +101,7 @@ const TimelineRefresh: React.FC<Props> = ({
})
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const { colors } = useTheme()
const queryClient = useQueryClient()
const clearFirstPage = () => {
@ -254,13 +254,16 @@ const TimelineRefresh: React.FC<Props> = ({
<View style={styles.base}>
{isFetching ? (
<View style={styles.container2}>
<Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
<Circle
size={StyleConstants.Font.Size.L}
color={colors.secondary}
/>
</View>
) : (
<>
<View style={styles.container1}>
<Text
style={[styles.explanation, { color: theme.primaryDefault }]}
style={[styles.explanation, { color: colors.primaryDefault }]}
onLayout={onLayout}
children={t('refresh.fetchPreviousPage')}
/>
@ -277,14 +280,14 @@ const TimelineRefresh: React.FC<Props> = ({
<Icon
name='ArrowLeft'
size={StyleConstants.Font.Size.M}
color={theme.primaryDefault}
color={colors.primaryDefault}
/>
}
/>
</View>
<View style={styles.container2}>
<Text
style={[styles.explanation, { color: theme.primaryDefault }]}
style={[styles.explanation, { color: colors.primaryDefault }]}
onLayout={onLayout}
children={t('refresh.refetch')}
/>

9
src/components/Timeline/Shared/Actioned.tsx
View File

@ -18,12 +18,11 @@ export interface Props {
const TimelineActioned = React.memo(
({ account, action, notification = false }: Props) => {
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const navigation = useNavigation<
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const { colors } = useTheme()
const navigation =
useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
const name = account.display_name || account.username
const iconColor = theme.primaryDefault
const iconColor = colors.primaryDefault
const content = (content: string) => (
<ParseEmojis content={content} emojis={account.emojis} size='S' />

16
src/components/Timeline/Shared/Actions.tsx
View File

@ -33,8 +33,8 @@ const TimelineActions: React.FC<Props> = ({
}) => {
const navigation = useNavigation()
const { t } = useTranslation('componentTimeline')
const { mode, theme } = useTheme()
const iconColor = theme.secondary
const { colors, theme } = useTheme()
const iconColor = colors.secondary
const queryClient = useQueryClient()
const mutation = useTimelineMutation({
@ -83,7 +83,7 @@ const TimelineActions: React.FC<Props> = ({
onError: (err: any, params, oldData) => {
const correctParam = params as MutationVarsTimelineUpdateStatusProperty
displayMessage({
mode,
theme,
type: 'error',
message: t('common:message.error.message', {
function: t(
@ -185,7 +185,7 @@ const TimelineActions: React.FC<Props> = ({
{status.replies_count > 0 ? (
<Text
style={{
color: theme.secondary,
color: colors.secondary,
fontSize: StyleConstants.Font.Size.M,
marginLeft: StyleConstants.Spacing.XS
}}
@ -198,14 +198,14 @@ const TimelineActions: React.FC<Props> = ({
[status.replies_count]
)
const childrenReblog = useMemo(() => {
const color = (state: boolean) => (state ? theme.green : theme.secondary)
const color = (state: boolean) => (state ? colors.green : colors.secondary)
return (
<>
<Icon
name='Repeat'
color={
status.visibility === 'private' || status.visibility === 'direct'
? theme.disabled
? colors.disabled
: color(status.reblogged)
}
size={StyleConstants.Font.Size.L}
@ -225,7 +225,7 @@ const TimelineActions: React.FC<Props> = ({
)
}, [status.reblogged, status.reblogs_count])
const childrenFavourite = useMemo(() => {
const color = (state: boolean) => (state ? theme.red : theme.secondary)
const color = (state: boolean) => (state ? colors.red : colors.secondary)
return (
<>
<Icon
@ -249,7 +249,7 @@ const TimelineActions: React.FC<Props> = ({
)
}, [status.favourited, status.favourites_count])
const childrenBookmark = useMemo(() => {
const color = (state: boolean) => (state ? theme.yellow : theme.secondary)
const color = (state: boolean) => (state ? colors.yellow : colors.secondary)
return (
<Icon
name='Bookmark'

11
src/components/Timeline/Shared/ActionsUsers.tsx
View File

@ -19,10 +19,9 @@ const TimelineActionsUsers = React.memo(
}
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const navigation = useNavigation<
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const { colors } = useTheme()
const navigation =
useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
return (
<View style={styles.base}>
@ -38,7 +37,7 @@ const TimelineActionsUsers = React.memo(
'shared.actionsUsers.reblogged_by.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { color: theme.blue }]}
style={[styles.text, { color: colors.blue }]}
onPress={() => {
analytics('timeline_shared_actionsusers_press_boosted', {
count: status.reblogs_count
@ -68,7 +67,7 @@ const TimelineActionsUsers = React.memo(
'shared.actionsUsers.favourited_by.accessibilityHint'
)}
accessibilityRole='button'
style={[styles.text, { color: theme.blue }]}
style={[styles.text, { color: colors.blue }]}
onPress={() => {
analytics('timeline_shared_actionsusers_press_boosted', {
count: status.favourites_count

12
src/components/Timeline/Shared/Attachment/Audio.tsx
View File

@ -23,7 +23,7 @@ const AttachmentAudio: React.FC<Props> = ({
sensitiveShown,
audio
}) => {
const { theme } = useTheme()
const { colors } = useTheme()
const [audioPlayer, setAudioPlayer] = useState<Audio.Sound>()
const [audioPlaying, setAudioPlaying] = useState(false)
@ -56,7 +56,7 @@ const AttachmentAudio: React.FC<Props> = ({
style={[
styles.base,
{
backgroundColor: theme.disabled,
backgroundColor: colors.disabled,
aspectRatio: attachmentAspectRatio({ total, index })
}
]}
@ -102,7 +102,7 @@ const AttachmentAudio: React.FC<Props> = ({
alignSelf: 'flex-end',
width: '100%',
height: StyleConstants.Spacing.M + StyleConstants.Spacing.S * 2,
backgroundColor: theme.backgroundOverlayInvert,
backgroundColor: colors.backgroundOverlayInvert,
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
borderRadius: 100,
opacity: sensitiveShown ? 0.35 : undefined
@ -112,8 +112,8 @@ const AttachmentAudio: React.FC<Props> = ({
minimumValue={0}
maximumValue={audio.meta.original.duration * 1000}
value={audioPosition}
minimumTrackTintColor={theme.secondary}
maximumTrackTintColor={theme.disabled}
minimumTrackTintColor={colors.secondary}
maximumTrackTintColor={colors.disabled}
// onSlidingStart={() => {
// audioPlayer?.pauseAsync()
// setAudioPlaying(false)
@ -123,7 +123,7 @@ const AttachmentAudio: React.FC<Props> = ({
// }}
enabled={false} // Bug in above sliding actions
thumbSize={StyleConstants.Spacing.M}
thumbTintColor={theme.primaryOverlay}
thumbTintColor={colors.primaryOverlay}
/>
</View>
) : null}

6
src/components/Timeline/Shared/Attachment/Unsupported.tsx
View File

@ -23,7 +23,7 @@ const AttachmentUnsupported: React.FC<Props> = ({
attachment
}) => {
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const { colors } = useTheme()
return (
<View
@ -49,8 +49,8 @@ const AttachmentUnsupported: React.FC<Props> = ({
styles.text,
{
color: attachment.blurhash
? theme.backgroundDefault
: theme.primaryDefault
? colors.backgroundDefault
: colors.primaryDefault
}
]}
>

13
src/components/Timeline/Shared/Card.tsx
View File

@ -13,14 +13,14 @@ export interface Props {
const TimelineCard = React.memo(
({ card }: Props) => {
const { theme } = useTheme()
const { colors } = useTheme()
const navigation = useNavigation()
return (
<Pressable
accessible
accessibilityRole='link'
style={[styles.card, { borderColor: theme.border }]}
style={[styles.card, { borderColor: colors.border }]}
onPress={async () => {
analytics('timeline_shared_card_press')
await openLink(card.url, navigation)
@ -38,7 +38,7 @@ const TimelineCard = React.memo(
<View style={styles.right}>
<Text
numberOfLines={2}
style={[styles.rightTitle, { color: theme.primaryDefault }]}
style={[styles.rightTitle, { color: colors.primaryDefault }]}
testID='title'
>
{card.title}
@ -46,7 +46,10 @@ const TimelineCard = React.memo(
{card.description ? (
<Text
numberOfLines={1}
style={[styles.rightDescription, { color: theme.primaryDefault }]}
style={[
styles.rightDescription,
{ color: colors.primaryDefault }
]}
testID='description'
>
{card.description}
@ -54,7 +57,7 @@ const TimelineCard = React.memo(
) : null}
<Text
numberOfLines={1}
style={[styles.rightLink, { color: theme.secondary }]}
style={[styles.rightLink, { color: colors.secondary }]}
>
{card.url}
</Text>

6
src/components/Timeline/Shared/Filtered.tsx
View File

@ -10,15 +10,15 @@ import { Text, View } from 'react-native'
const TimelineFiltered = React.memo(
() => {
const { theme } = useTheme()
const { colors } = useTheme()
const { t } = useTranslation('componentTimeline')
return (
<View style={{ backgroundColor: theme.backgroundDefault }}>
<View style={{ backgroundColor: colors.backgroundDefault }}>
<Text
style={{
...StyleConstants.FontStyle.S,
color: theme.secondary,
color: colors.secondary,
textAlign: 'center',
paddingVertical: StyleConstants.Spacing.S,
paddingLeft: StyleConstants.Avatar.M + StyleConstants.Spacing.S

4
src/components/Timeline/Shared/FullConversation.tsx
View File

@ -13,7 +13,7 @@ export interface Props {
const TimelineFullConversation = React.memo(
({ queryKey, status }: Props) => {
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const { colors } = useTheme()
return queryKey &&
queryKey[1].page !== 'Toot' &&
@ -25,7 +25,7 @@ const TimelineFullConversation = React.memo(
<Text
style={{
...StyleConstants.FontStyle.S,
color: theme.blue,
color: colors.blue,
marginTop: StyleConstants.Spacing.S
}}
>

12
src/components/Timeline/Shared/HeaderConversation.tsx
View File

@ -18,12 +18,12 @@ import HeaderSharedMuted from './HeaderShared/Muted'
const Names = React.memo(
({ accounts }: { accounts: Mastodon.Account[] }) => {
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const { colors } = useTheme()
return (
<Text
numberOfLines={1}
style={[styles.namesLeading, { color: theme.secondary }]}
style={[styles.namesLeading, { color: colors.secondary }]}
>
<Text>{t('shared.header.conversation.withAccounts')}</Text>
{accounts.map((account, index) => (
@ -49,7 +49,7 @@ export interface Props {
const HeaderConversation = React.memo(
({ queryKey, conversation }: Props) => {
const { mode } = useTheme()
const { colors, theme } = useTheme()
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
@ -57,7 +57,7 @@ const HeaderConversation = React.memo(
onMutate: true,
onError: (err: any, _, oldData) => {
displayMessage({
mode,
theme,
type: 'error',
message: t('common:message.error.message', {
function: t(`shared.header.conversation.delete.function`)
@ -74,8 +74,6 @@ const HeaderConversation = React.memo(
}
})
const { theme } = useTheme()
const actionOnPress = useCallback(() => {
analytics('timeline_conversation_delete_press')
mutation.mutate({
@ -90,7 +88,7 @@ const HeaderConversation = React.memo(
() => (
<Icon
name='Trash'
color={theme.secondary}
color={colors.secondary}
size={StyleConstants.Font.Size.L}
/>
),

4
src/components/Timeline/Shared/HeaderDefault.tsx
View File

@ -22,7 +22,7 @@ const TimelineHeaderDefault = React.memo(
({ queryKey, rootQueryKey, status }: Props) => {
const { t } = useTranslation('componentTimeline')
const navigation = useNavigation()
const { theme } = useTheme()
const { colors } = useTheme()
return (
<View style={styles.base}>
@ -52,7 +52,7 @@ const TimelineHeaderDefault = React.memo(
children={
<Icon
name='MoreHorizontal'
color={theme.secondary}
color={colors.secondary}
size={StyleConstants.Font.Size.L}
/>
}

4
src/components/Timeline/Shared/HeaderNotification.tsx
View File

@ -23,7 +23,7 @@ export interface Props {
const TimelineHeaderNotification = React.memo(
({ queryKey, notification }: Props) => {
const navigation = useNavigation()
const { theme } = useTheme()
const { colors } = useTheme()
const actions = useMemo(() => {
switch (notification.type) {
@ -52,7 +52,7 @@ const TimelineHeaderNotification = React.memo(
children={
<Icon
name='MoreHorizontal'
color={theme.secondary}
color={colors.secondary}
size={StyleConstants.Font.Size.L}
/>
}

4
src/components/Timeline/Shared/HeaderShared/Account.tsx
View File

@ -13,7 +13,7 @@ export interface Props {
const HeaderSharedAccount = React.memo(
({ account, withoutName = false }: Props) => {
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const { colors } = useTheme()
return (
<View style={styles.base}>
@ -36,7 +36,7 @@ const HeaderSharedAccount = React.memo(
accessibilityHint={t(
'shared.header.shared.account.account.accessibilityHint'
)}
style={[styles.acct, { color: theme.secondary }]}
style={[styles.acct, { color: colors.secondary }]}
numberOfLines={1}
>
@{account.acct}

4
src/components/Timeline/Shared/HeaderShared/Application.tsx
View File

@ -12,7 +12,7 @@ export interface Props {
const HeaderSharedApplication = React.memo(
({ application }: Props) => {
const { theme } = useTheme()
const { colors } = useTheme()
const { t } = useTranslation('componentTimeline')
return application && application.name !== 'Web' ? (
@ -24,7 +24,7 @@ const HeaderSharedApplication = React.memo(
})
application.website && (await openLink(application.website))
}}
style={[styles.application, { color: theme.secondary }]}
style={[styles.application, { color: colors.secondary }]}
numberOfLines={1}
>
{t('shared.header.shared.application', {

4
src/components/Timeline/Shared/HeaderShared/Created.tsx
View File

@ -10,10 +10,10 @@ export interface Props {
const HeaderSharedCreated = React.memo(
({ created_at }: Props) => {
const { theme } = useTheme()
const { colors } = useTheme()
return (
<Text style={[styles.created_at, { color: theme.secondary }]}>
<Text style={[styles.created_at, { color: colors.secondary }]}>
<RelativeTime date={created_at} />
</Text>
)

4
src/components/Timeline/Shared/HeaderShared/Muted.tsx
View File

@ -12,14 +12,14 @@ export interface Props {
const HeaderSharedMuted = React.memo(
({ muted }: Props) => {
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const { colors } = useTheme()
return muted ? (
<Icon
accessibilityLabel={t('shared.header.shared.muted.accessibilityLabel')}
name='VolumeX'
size={StyleConstants.Font.Size.S}
color={theme.secondary}
color={colors.secondary}
style={styles.visibility}
/>
) : null

6
src/components/Timeline/Shared/HeaderShared/Visibility.tsx
View File

@ -12,7 +12,7 @@ export interface Props {
const HeaderSharedVisibility = React.memo(
({ visibility }: Props) => {
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const { colors } = useTheme()
switch (visibility) {
case 'private':
@ -23,7 +23,7 @@ const HeaderSharedVisibility = React.memo(
)}
name='Lock'
size={StyleConstants.Font.Size.S}
color={theme.secondary}
color={colors.secondary}
style={styles.visibility}
/>
)
@ -35,7 +35,7 @@ const HeaderSharedVisibility = React.memo(
)}
name='Mail'
size={StyleConstants.Font.Size.S}
color={theme.secondary}
color={colors.secondary}
style={styles.visibility}
/>
)

36
src/components/Timeline/Shared/Poll.tsx
View File

@ -36,7 +36,7 @@ const TimelinePoll: React.FC<Props> = ({
reblog,
sameAccount
}) => {
const { mode, theme } = useTheme()
const { colors, theme } = useTheme()
const { t, i18n } = useTranslation('componentTimeline')
const [allOptions, setAllOptions] = useState(
@ -53,7 +53,7 @@ const TimelinePoll: React.FC<Props> = ({
haptics('Success')
switch (theParams.payload.property) {
case 'poll':
theParams.payload.data = (body as unknown) as Mastodon.Poll
theParams.payload.data = body as unknown as Mastodon.Poll
updateStatusProperty(theParams)
break
}
@ -61,7 +61,7 @@ const TimelinePoll: React.FC<Props> = ({
onError: (err: any, params) => {
const theParams = params as MutationVarsTimelineUpdateStatusProperty
displayMessage({
mode,
theme,
type: 'error',
message: t('common:message.error.message', {
// @ts-ignore
@ -136,7 +136,7 @@ const TimelinePoll: React.FC<Props> = ({
}
}
}, [
mode,
theme,
i18n.language,
poll.expired,
poll.voted,
@ -147,14 +147,14 @@ const TimelinePoll: React.FC<Props> = ({
const pollExpiration = useMemo(() => {
if (poll.expired) {
return (
<Text style={[styles.expiration, { color: theme.secondary }]}>
<Text style={[styles.expiration, { color: colors.secondary }]}>
{t('shared.poll.meta.expiration.expired')}
</Text>
)
} else {
if (poll.expires_at) {
return (
<Text style={[styles.expiration, { color: theme.secondary }]}>
<Text style={[styles.expiration, { color: colors.secondary }]}>
<Trans
i18nKey='componentTimeline:shared.poll.meta.expiration.until'
components={[<RelativeTime date={poll.expires_at} />]}
@ -163,7 +163,7 @@ const TimelinePoll: React.FC<Props> = ({
)
}
}
}, [mode, i18n.language, poll.expired, poll.expires_at])
}, [theme, i18n.language, poll.expired, poll.expires_at])
const isSelected = useCallback(
(index: number): string =>
@ -174,8 +174,10 @@ const TimelinePoll: React.FC<Props> = ({
)
const pollBodyDisallow = useMemo(() => {
const maxValue = maxBy(poll.options, option => option.votes_count)
?.votes_count
const maxValue = maxBy(
poll.options,
option => option.votes_count
)?.votes_count
return poll.options.map((option, index) => (
<View key={index} style={styles.optionContainer}>
<View style={styles.optionContent}>
@ -188,14 +190,14 @@ const TimelinePoll: React.FC<Props> = ({
}
size={StyleConstants.Font.Size.M}
color={
poll.own_votes?.includes(index) ? theme.blue : theme.disabled
poll.own_votes?.includes(index) ? colors.blue : colors.disabled
}
/>
<Text style={styles.optionText}>
<ParseEmojis content={option.title} emojis={poll.emojis} />
</Text>
<Text
style={[styles.optionPercentage, { color: theme.primaryDefault }]}
style={[styles.optionPercentage, { color: colors.primaryDefault }]}
>
{poll.votes_count
? Math.round(
@ -217,13 +219,13 @@ const TimelinePoll: React.FC<Props> = ({
100
)}%`,
backgroundColor:
option.votes_count === maxValue ? theme.blue : theme.disabled
option.votes_count === maxValue ? colors.blue : colors.disabled
}
]}
/>
</View>
))
}, [mode, poll.options])
}, [theme, poll.options])
const pollBodyAllow = useMemo(() => {
return poll.options.map((option, index) => (
<Pressable
@ -256,7 +258,7 @@ const TimelinePoll: React.FC<Props> = ({
style={styles.optionSelection}
name={isSelected(index)}
size={StyleConstants.Font.Size.M}
color={theme.primaryDefault}
color={colors.primaryDefault}
/>
<Text style={styles.optionText}>
<ParseEmojis content={option.title} emojis={poll.emojis} />
@ -264,19 +266,19 @@ const TimelinePoll: React.FC<Props> = ({
</View>
</Pressable>
))
}, [mode, allOptions])
}, [theme, allOptions])
const pollVoteCounts = useMemo(() => {
if (poll.voters_count !== null) {
return (
<Text style={[styles.votes, { color: theme.secondary }]}>
<Text style={[styles.votes, { color: colors.secondary }]}>
{t('shared.poll.meta.count.voters', { count: poll.voters_count })}
{' • '}
</Text>
)
} else if (poll.votes_count !== null) {
return (
<Text style={[styles.votes, { color: theme.secondary }]}>
<Text style={[styles.votes, { color: colors.secondary }]}>
{t('shared.poll.meta.count.votes', { count: poll.votes_count })}
{' • '}
</Text>

10
src/components/Timeline/Shared/Translate.tsx
View File

@ -26,7 +26,7 @@ const TimelineTranslate = React.memo(
}
const { t } = useTranslation('componentTimeline')
const { theme } = useTheme()
const { colors } = useTheme()
const tootLanguage = status.language.slice(0, 2)
@ -82,10 +82,10 @@ const TimelineTranslate = React.memo(
...StyleConstants.FontStyle.M,
color:
isLoading || isSuccess
? theme.secondary
? colors.secondary
: isError
? theme.red
: theme.blue
? colors.red
: colors.blue
}}
>
{isError
@ -109,7 +109,7 @@ const TimelineTranslate = React.memo(
{isLoading ? (
<Circle
size={StyleConstants.Font.Size.M}
color={theme.disabled}
color={colors.disabled}
style={{ marginLeft: StyleConstants.Spacing.S }}
/>
) : null}

8
src/i18n/en/screens/tabs.json
View File

@ -232,6 +232,14 @@
"cancel": "$t(common:buttons.cancel)"
}
},
"darkTheme": {
"heading": "Dark theme",
"options": {
"lighter": "Lighter",
"darker": "Darker",
"cancel": "$t(common:buttons.cancel)"
}
},
"browser": {
"heading": "Opening Link",
"options": {

8
src/screens/Actions.tsx
View File

@ -68,7 +68,7 @@ const ScreenActions = React.memo(
break
}
const { theme } = useTheme()
const { colors } = useTheme()
const insets = useSafeAreaInsets()
const DEFAULT_VALUE = 350
@ -189,7 +189,7 @@ const ScreenActions = React.memo(
<Animated.View
style={[
styles.overlay,
{ backgroundColor: theme.backgroundOverlayInvert }
{ backgroundColor: colors.backgroundOverlayInvert }
]}
>
<PanGestureHandler onGestureEvent={onGestureEvent}>
@ -198,7 +198,7 @@ const ScreenActions = React.memo(
styles.container,
styleTop,
{
backgroundColor: theme.backgroundDefault,
backgroundColor: colors.backgroundDefault,
paddingBottom: insets.bottom || StyleConstants.Spacing.L
}
]}
@ -206,7 +206,7 @@ const ScreenActions = React.memo(
<View
style={[
styles.handle,
{ backgroundColor: theme.primaryOverlay }
{ backgroundColor: colors.primaryOverlay }
]}
/>
{actions}

6
src/screens/Actions/Account.tsx
View File

@ -24,7 +24,7 @@ const ActionsAccount: React.FC<Props> = ({
account,
dismiss
}) => {
const { mode } = useTheme()
const { theme } = useTheme()
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
@ -32,7 +32,7 @@ const ActionsAccount: React.FC<Props> = ({
onSuccess: (_, params) => {
const theParams = params as MutationVarsTimelineUpdateAccountProperty
displayMessage({
mode,
theme,
type: 'success',
message: t('common:message.success.message', {
function: t(
@ -47,7 +47,7 @@ const ActionsAccount: React.FC<Props> = ({
onError: (err: any, params) => {
const theParams = params as MutationVarsTimelineUpdateAccountProperty
displayMessage({
mode,
theme,
type: 'error',
message: t('common:message.error.message', {
function: t(

4
src/screens/Actions/Domain.tsx
View File

@ -26,13 +26,13 @@ const ActionsDomain: React.FC<Props> = ({
domain,
dismiss
}) => {
const { mode } = useTheme()
const { theme } = useTheme()
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
const mutation = useTimelineMutation({
onSettled: () => {
displayMessage({
mode,
theme,
type: 'success',
message: t('common:message.success.message', {
function: t(`shared.header.actions.domain.block.function`)

4
src/screens/Actions/Status.tsx
View File

@ -30,7 +30,7 @@ const ActionsStatus: React.FC<Props> = ({
status,
dismiss
}) => {
const { mode } = useTheme()
const { theme } = useTheme()
const { t } = useTranslation('componentTimeline')
const queryClient = useQueryClient()
@ -42,7 +42,7 @@ const ActionsStatus: React.FC<Props> = ({
? (params as MutationVarsTimelineUpdateStatusProperty).payload.property
: 'delete'
displayMessage({
mode,
theme,
type: 'error',
message: t('common:message.error.message', {
function: t(`shared.header.actions.status.${theFunction}.function`)

38
src/screens/Announcements.tsx
View File

@ -36,7 +36,7 @@ const ScreenAnnouncements: React.FC<
navigation
}) => {
const { reduceMotionEnabled } = useAccessibility()
const { mode, theme } = useTheme()
const { colors, mode } = useTheme()
const [index, setIndex] = useState(0)
const { t } = useTranslation('screenAnnouncements')
@ -73,12 +73,12 @@ const ScreenAnnouncements: React.FC<
style={[
styles.announcement,
{
borderColor: theme.primaryDefault,
backgroundColor: theme.backgroundDefault
borderColor: colors.primaryDefault,
backgroundColor: colors.backgroundDefault
}
]}
>
<Text style={[styles.published, { color: theme.secondary }]}>
<Text style={[styles.published, { color: colors.secondary }]}>
<Trans
i18nKey='screenAnnouncements:content.published'
components={[<RelativeTime date={item.published_at} />]}
@ -103,11 +103,11 @@ const ScreenAnnouncements: React.FC<
styles.reaction,
{
borderColor: reaction.me
? theme.disabled
: theme.primaryDefault,
? colors.disabled
: colors.primaryDefault,
backgroundColor: reaction.me
? theme.disabled
: theme.backgroundDefault
? colors.disabled
: colors.backgroundDefault
}
]}
onPress={() => {
@ -138,7 +138,7 @@ const ScreenAnnouncements: React.FC<
<Text
style={[
styles.reactionCount,
{ color: theme.primaryDefault }
{ color: colors.primaryDefault }
]}
>
{reaction.count}
@ -147,13 +147,13 @@ const ScreenAnnouncements: React.FC<
</Pressable>
))}
{/* <Pressable
style={[styles.reaction, { borderColor: theme.primaryDefault }]}
style={[styles.reaction, { borderColor: colors.primaryDefault }]}
onPress={() => invisibleTextInputRef.current?.focus()}
>
<Icon
name='Plus'
size={StyleConstants.Font.Size.M}
color={theme.primaryDefault}
color={colors.primaryDefault}
/>
</Pressable> */}
</View>
@ -177,7 +177,7 @@ const ScreenAnnouncements: React.FC<
</View>
</View>
),
[theme]
[mode]
)
const onMomentumScrollEnd = useCallback(
@ -201,7 +201,7 @@ const ScreenAnnouncements: React.FC<
alignItems: 'center'
}}
>
<Circle size={StyleConstants.Font.Size.L} color={theme.secondary} />
<Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
</View>
)
}, [])
@ -211,7 +211,7 @@ const ScreenAnnouncements: React.FC<
blurType={mode}
blurAmount={20}
style={styles.base}
reducedTransparencyFallbackColor={theme.backgroundDefault}
reducedTransparencyFallbackColor={colors.backgroundDefault}
>
<SafeAreaView style={styles.base}>
<FlatList
@ -232,9 +232,9 @@ const ScreenAnnouncements: React.FC<
style={[
styles.indicator,
{
borderColor: theme.primaryDefault,
borderColor: colors.primaryDefault,
backgroundColor:
i === index ? theme.primaryDefault : undefined,
i === index ? colors.primaryDefault : undefined,
marginLeft:
i === query.data.length ? 0 : StyleConstants.Spacing.S
}
@ -248,7 +248,7 @@ const ScreenAnnouncements: React.FC<
</BlurView>
) : (
<SafeAreaView
style={[styles.base, { backgroundColor: theme.backgroundDefault }]}
style={[styles.base, { backgroundColor: colors.backgroundDefault }]}
>
<FlatList
horizontal
@ -268,9 +268,9 @@ const ScreenAnnouncements: React.FC<
style={[
styles.indicator,
{
borderColor: theme.primaryDefault,
borderColor: colors.primaryDefault,
backgroundColor:
i === index ? theme.primaryDefault : undefined,
i === index ? colors.primaryDefault : undefined,
marginLeft:
i === query.data.length ? 0 : StyleConstants.Spacing.S
}

6
src/screens/Compose.tsx
View File

@ -50,7 +50,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
navigation
}) => {
const { t } = useTranslation('screenCompose')
const { theme } = useTheme()
const { colors } = useTheme()
const queryClient = useQueryClient()
const [hasKeyboard, setHasKeyboard] = useState(false)
@ -373,7 +373,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
component={ComposeRoot}
options={{
title: headerContent,
titleStyle: {
headerTitleStyle: {
fontWeight:
totalTextCount > maxTootChars
? StyleConstants.Font.Weight.Bold
@ -381,7 +381,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
fontSize: StyleConstants.Font.Size.M
},
headerTintColor:
totalTextCount > maxTootChars ? theme.red : theme.secondary,
totalTextCount > maxTootChars ? colors.red : colors.secondary,
headerLeft,
headerRight
}}

18
src/screens/Compose/DraftsList/Root.tsx
View File

@ -37,7 +37,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
const { t } = useTranslation('screenCompose')
const navigation = useNavigation()
const dispatch = useDispatch()
const { mode, theme } = useTheme()
const { colors, theme } = useTheme()
const instanceDrafts = useSelector(getInstanceDrafts)?.filter(
draft => draft.timestamp !== timestamp
)
@ -56,7 +56,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
return (
<Pressable
accessibilityHint={t('content.draftsList.content.accessibilityHint')}
style={[styles.draft, { backgroundColor: theme.backgroundDefault }]}
style={[styles.draft, { backgroundColor: colors.backgroundDefault }]}
onPress={async () => {
setCheckingAttachments(true)
let tempDraft = item
@ -104,7 +104,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
<HeaderSharedCreated created_at={item.timestamp} />
<Text
numberOfLines={2}
style={[styles.text, { color: theme.primaryDefault }]}
style={[styles.text, { color: colors.primaryDefault }]}
>
{item.text ||
item.spoiler ||
@ -132,12 +132,12 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
</Pressable>
)
},
[mode]
[theme]
)
const renderHiddenItem = useCallback(
({ item }) => (
<View
style={[styles.hiddenBase, { backgroundColor: theme.red }]}
style={[styles.hiddenBase, { backgroundColor: colors.red }]}
children={
<Pressable
style={styles.action}
@ -146,14 +146,14 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
<Icon
name='Trash'
size={StyleConstants.Font.Size.L}
color={theme.primaryOverlay}
color={colors.primaryOverlay}
/>
}
/>
}
/>
),
[mode]
[theme]
)
return (
@ -184,14 +184,14 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
<View
style={[
styles.modal,
{ backgroundColor: theme.backgroundOverlayInvert }
{ backgroundColor: colors.backgroundOverlayInvert }
]}
children={
<Text
children='检查附件在服务器的状态…'
style={{
...StyleConstants.FontStyle.M,
color: theme.primaryOverlay
color: colors.primaryOverlay
}}
/>
}

15
src/screens/Compose/EditAttachment/Image.tsx
View File

@ -22,7 +22,7 @@ export interface Props {
const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
const { t } = useTranslation('screenCompose')
const { theme } = useTheme()
const { colors } = useTheme()
const { screenReaderEnabled } = useAccessibility()
const { composeState, composeDispatch } = useContext(ComposeContext)
@ -146,16 +146,21 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
<G>
<Path
d='M1000,0 L1000,1000 L0,1000 L0,0 L1000,0 Z M500,475 C486.192881,475 475,486.192881 475,500 C475,513.807119 486.192881,525 500,525 C513.807119,525 525,513.807119 525,500 C525,486.192881 513.807119,475 500,475 Z'
fill={theme.backgroundOverlayInvert}
fill={colors.backgroundOverlayInvert}
/>
<Circle
stroke={theme.primaryOverlay}
stroke={colors.primaryOverlay}
stroke-width='2'
cx='500'
cy='500'
r='24'
/>
<Circle fill={theme.primaryOverlay} cx='500' cy='500' r='2' />
<Circle
fill={colors.primaryOverlay}
cx='500'
cy='500'
r='2'
/>
</G>
</G>
</Svg>
@ -163,7 +168,7 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
</PanGestureHandler>
</View>
{screenReaderEnabled ? null : (
<Text style={[styles.imageFocusText, { color: theme.primaryDefault }]}>
<Text style={[styles.imageFocusText, { color: colors.primaryDefault }]}>
{t('content.editAttachment.content.imageFocus')}
</Text>
)}

12
src/screens/Compose/EditAttachment/Root.tsx
View File

@ -13,7 +13,7 @@ export interface Props {
const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
const { t } = useTranslation('screenCompose')
const { mode, theme } = useTheme()
const { colors, mode } = useTheme()
const { composeState, composeDispatch } = useContext(ComposeContext)
const theAttachment = composeState.attachments.uploads[index].remote!
@ -61,13 +61,15 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
<ScrollView ref={scrollViewRef}>
{mediaDisplay}
<View style={styles.altTextContainer}>
<Text style={[styles.altTextInputHeading, { color: theme.primaryDefault }]}>
<Text
style={[styles.altTextInputHeading, { color: colors.primaryDefault }]}
>
{t('content.editAttachment.content.altText.heading')}
</Text>
<TextInput
style={[
styles.altTextInput,
{ borderColor: theme.border, color: theme.primaryDefault }
{ borderColor: colors.border, color: colors.primaryDefault }
]}
onFocus={() => scrollViewRef.current?.scrollToEnd()}
autoCapitalize='none'
@ -76,12 +78,12 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
multiline
onChangeText={onChangeText}
placeholder={t('content.editAttachment.content.altText.placeholder')}
placeholderTextColor={theme.secondary}
placeholderTextColor={colors.secondary}
scrollEnabled
value={theAttachment.description}
keyboardAppearance={mode}
/>
<Text style={[styles.altTextLength, { color: theme.secondary }]}>
<Text style={[styles.altTextLength, { color: colors.secondary }]}>
{theAttachment.description?.length || 0} / 1500
</Text>
</View>

6
src/screens/Compose/Posting.tsx
View File

@ -6,7 +6,7 @@ import ComposeContext from './utils/createContext'
const ComposePosting = React.memo(
() => {
const { composeState } = useContext(ComposeContext)
const { theme } = useTheme()
const { colors } = useTheme()
return (
<Modal
@ -14,7 +14,9 @@ const ComposePosting = React.memo(
animationType='fade'
visible={composeState.posting}
children={
<View style={{ flex: 1, backgroundColor: theme.backgroundOverlayInvert }} />
<View
style={{ flex: 1, backgroundColor: colors.backgroundOverlayInvert }}
/>
}
/>
)

4
src/screens/Compose/Root.tsx
View File

@ -61,7 +61,7 @@ export let instanceConfigurationStatusCharsURL = 23
const ComposeRoot = React.memo(
() => {
const { reduceMotionEnabled } = useAccessibility()
const { theme } = useTheme()
const { colors } = useTheme()
instanceConfigurationStatusCharsURL = useSelector(
getInstanceConfigurationStatusCharsURL,
@ -122,7 +122,7 @@ const ComposeRoot = React.memo(
<View key='listEmpty' style={styles.loading}>
<Circle
size={StyleConstants.Font.Size.M * 1.25}
color={theme.secondary}
color={colors.secondary}
/>
</View>
)

33
src/screens/Compose/Root/Actions.tsx
View File

@ -16,19 +16,19 @@ const ComposeActions: React.FC = () => {
const { showActionSheetWithOptions } = useActionSheet()
const { composeState, composeDispatch } = useContext(ComposeContext)
const { t } = useTranslation('screenCompose')
const { theme } = useTheme()
const { colors, mode } = useTheme()
const instanceConfigurationStatusMaxAttachments = useSelector(
getInstanceConfigurationStatusMaxAttachments,
() => true
)
const attachmentColor = useMemo(() => {
if (composeState.poll.active) return theme.disabled
if (composeState.poll.active) return colors.disabled
if (composeState.attachments.uploads.length) {
return theme.primaryDefault
return colors.primaryDefault
} else {
return theme.secondary
return colors.secondary
}
}, [composeState.poll.active, composeState.attachments.uploads])
const attachmentOnPress = useCallback(async () => {
@ -49,12 +49,12 @@ const ComposeActions: React.FC = () => {
}, [composeState.poll.active, composeState.attachments.uploads])
const pollColor = useMemo(() => {
if (composeState.attachments.uploads.length) return theme.disabled
if (composeState.attachments.uploads.length) return colors.disabled
if (composeState.poll.active) {
return theme.primaryDefault
return colors.primaryDefault
} else {
return theme.secondary
return colors.secondary
}
}, [composeState.poll.active, composeState.attachments.uploads])
const pollOnPress = useCallback(() => {
@ -97,7 +97,8 @@ const ComposeActions: React.FC = () => {
t('content.root.actions.visibility.options.direct'),
t('content.root.actions.visibility.options.cancel')
],
cancelButtonIndex: 4
cancelButtonIndex: 4,
userInterfaceStyle: mode
},
buttonIndex => {
switch (buttonIndex) {
@ -150,12 +151,12 @@ const ComposeActions: React.FC = () => {
}, [composeState.spoiler.active, composeState.textInputFocus])
const emojiColor = useMemo(() => {
if (!composeState.emoji.emojis) return theme.disabled
if (!composeState.emoji.emojis) return colors.disabled
if (composeState.emoji.active) {
return theme.primaryDefault
return colors.primaryDefault
} else {
return theme.secondary
return colors.secondary
}
}, [composeState.emoji.active, composeState.emoji.emojis])
const emojiOnPress = useCallback(() => {
@ -177,8 +178,8 @@ const ComposeActions: React.FC = () => {
style={[
styles.additions,
{
backgroundColor: theme.backgroundDefault,
borderTopColor: theme.border
backgroundColor: colors.backgroundDefault,
borderTopColor: colors.border
}
]}
>
@ -223,7 +224,7 @@ const ComposeActions: React.FC = () => {
name={visibilityIcon}
size={24}
color={
composeState.visibilityLock ? theme.disabled : theme.secondary
composeState.visibilityLock ? colors.disabled : colors.secondary
}
/>
}
@ -242,8 +243,8 @@ const ComposeActions: React.FC = () => {
size={24}
color={
composeState.spoiler.active
? theme.primaryDefault
: theme.secondary
? colors.primaryDefault
: colors.secondary
}
/>
}

16
src/screens/Compose/Root/Footer/Attachments.tsx
View File

@ -39,7 +39,7 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
const { showActionSheetWithOptions } = useActionSheet()
const { composeState, composeDispatch } = useContext(ComposeContext)
const { t } = useTranslation('screenCompose')
const { theme } = useTheme()
const { colors, mode } = useTheme()
const navigation = useNavigation<any>()
const flatListRef = useRef<FlatList>(null)
@ -135,8 +135,8 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
style={[
styles.duration,
{
color: theme.backgroundDefault,
backgroundColor: theme.backgroundOverlayInvert
color: colors.backgroundDefault,
backgroundColor: colors.backgroundOverlayInvert
}
]}
>
@ -147,12 +147,12 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
<View
style={[
styles.uploading,
{ backgroundColor: theme.backgroundOverlayInvert }
{ backgroundColor: colors.backgroundOverlayInvert }
]}
>
<Circle
size={StyleConstants.Font.Size.L}
color={theme.primaryOverlay}
color={colors.primaryOverlay}
/>
</View>
) : (
@ -213,7 +213,7 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
styles.container,
{
width: DEFAULT_HEIGHT,
backgroundColor: theme.backgroundOverlayInvert
backgroundColor: colors.backgroundOverlayInvert
}
]}
onPress={async () => {
@ -255,9 +255,9 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
<Icon
name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}
size={StyleConstants.Font.Size.L}
color={theme.primaryDefault}
color={colors.primaryDefault}
/>
<Text style={[styles.sensitiveText, { color: theme.primaryDefault }]}>
<Text style={[styles.sensitiveText, { color: colors.primaryDefault }]}>
{t('content.root.footer.attachments.sensitive')}
</Text>
</Pressable>

4
src/screens/Compose/Root/Footer/Emojis.tsx
View File

@ -25,7 +25,7 @@ export interface Props {
const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
const { composeState, composeDispatch } = useContext(ComposeContext)
const { reduceMotionEnabled } = useAccessibility()
const { theme } = useTheme()
const { colors } = useTheme()
const { t } = useTranslation()
useEffect(() => {
@ -37,7 +37,7 @@ const ComposeEmojis: React.FC<Props> = ({ accessibleRefEmojis }) => {
const listHeader = useCallback(
({ section: { title } }) => (
<Text style={[styles.group, { color: theme.secondary }]}>{title}</Text>
<Text style={[styles.group, { color: colors.secondary }]}>{title}</Text>
),
[]
)

18
src/screens/Compose/Root/Footer/Poll.tsx
View File

@ -21,7 +21,7 @@ const ComposePoll: React.FC = () => {
composeDispatch
} = useContext(ComposeContext)
const { t } = useTranslation('screenCompose')
const { mode, theme } = useTheme()
const { colors, mode } = useTheme()
const instanceConfigurationPoll = useSelector(
getInstanceConfigurationPoll,
@ -39,7 +39,7 @@ const ComposePoll: React.FC = () => {
}, [])
return (
<View style={[styles.base, { borderColor: theme.border }]}>
<View style={[styles.base, { borderColor: colors.border }]}>
<View style={styles.options}>
{[...Array(total)].map((e, i) => {
const restOptions = Object.keys(options).filter(
@ -57,7 +57,7 @@ const ComposePoll: React.FC = () => {
<Icon
name={multiple ? 'Square' : 'Circle'}
size={StyleConstants.Font.Size.L}
color={theme.secondary}
color={colors.secondary}
/>
<TextInput
accessibilityLabel={t(
@ -69,8 +69,8 @@ const ComposePoll: React.FC = () => {
style={[
styles.textInput,
{
borderColor: theme.border,
color: hasConflict ? theme.red : theme.primaryDefault
borderColor: colors.border,
color: hasConflict ? colors.red : colors.primaryDefault
}
]}
placeholder={
@ -78,7 +78,7 @@ const ComposePoll: React.FC = () => {
? t('content.root.footer.poll.option.placeholder.multiple')
: t('content.root.footer.poll.option.placeholder.single')
}
placeholderTextColor={theme.disabled}
placeholderTextColor={colors.disabled}
maxLength={MAX_CHARS_PER_OPTION}
// @ts-ignore
value={options[i]}
@ -168,7 +168,8 @@ const ComposePoll: React.FC = () => {
t('content.root.footer.poll.multiple.options.multiple'),
t('content.root.footer.poll.multiple.options.cancel')
],
cancelButtonIndex: 2
cancelButtonIndex: 2,
userInterfaceStyle: mode
},
index => {
if (index && index < 2) {
@ -211,7 +212,8 @@ const ComposePoll: React.FC = () => {
),
t('content.root.footer.poll.expiration.options.cancel')
],
cancelButtonIndex: expirations.length
cancelButtonIndex: expirations.length,
userInterfaceStyle: mode
},
index => {
if (index && index < expirations.length) {

4
src/screens/Compose/Root/Footer/Reply.tsx
View File

@ -8,10 +8,10 @@ const ComposeReply: React.FC = () => {
const {
composeState: { replyToStatus }
} = useContext(ComposeContext)
const { theme } = useTheme()
const { colors } = useTheme()
return (
<View style={[styles.base, { borderTopColor: theme.border }]}>
<View style={[styles.base, { borderTopColor: colors.border }]}>
<TimelineDefault item={replyToStatus!} disableDetails disableOnPress />
</View>
)

4
src/screens/Compose/Root/Header/PostingAs.tsx
View File

@ -12,7 +12,7 @@ import { useSelector } from 'react-redux'
const ComposePostingAs = React.memo(
() => {
const { t } = useTranslation('screenCompose')
const { theme } = useTheme()
const { colors } = useTheme()
const instanceAccount = useSelector(
getInstanceAccount,
@ -21,7 +21,7 @@ const ComposePostingAs = React.memo(
const instanceUri = useSelector(getInstanceUri)
return (
<Text style={[styles.text, { color: theme.secondary }]}>
<Text style={[styles.text, { color: colors.secondary }]}>
{t('content.root.header.postingAs', {
acct: instanceAccount?.acct,
domain: instanceUri

8
src/screens/Compose/Root/Header/SpoilerInput.tsx
View File

@ -9,7 +9,7 @@ import ComposeContext from '../../utils/createContext'
const ComposeSpoilerInput: React.FC = () => {
const { composeState, composeDispatch } = useContext(ComposeContext)
const { t } = useTranslation('screenCompose')
const { mode, theme } = useTheme()
const { colors, mode } = useTheme()
return (
<TextInput
@ -17,8 +17,8 @@ const ComposeSpoilerInput: React.FC = () => {
style={[
styles.spoilerInput,
{
color: theme.primaryDefault,
borderBottomColor: theme.border
color: colors.primaryDefault,
borderBottomColor: colors.border
}
]}
autoCapitalize='none'
@ -27,7 +27,7 @@ const ComposeSpoilerInput: React.FC = () => {
enablesReturnKeyAutomatically
multiline
placeholder={t('content.root.header.spoilerInput.placeholder')}
placeholderTextColor={theme.secondary}
placeholderTextColor={colors.secondary}
onChangeText={content =>
formatText({
textInput: 'spoiler',

8
src/screens/Compose/Root/Header/TextInput.tsx
View File

@ -9,7 +9,7 @@ import ComposeContext from '../../utils/createContext'
const ComposeTextInput: React.FC = () => {
const { composeState, composeDispatch } = useContext(ComposeContext)
const { t } = useTranslation('screenCompose')
const { mode, theme } = useTheme()
const { colors, mode } = useTheme()
return (
<TextInput
@ -17,15 +17,15 @@ const ComposeTextInput: React.FC = () => {
style={[
styles.textInput,
{
color: theme.primaryDefault,
borderBottomColor: theme.border
color: colors.primaryDefault,
borderBottomColor: colors.border
}
]}
autoFocus
enablesReturnKeyAutomatically
multiline
placeholder={t('content.root.header.textInput.placeholder')}
placeholderTextColor={theme.secondary}
placeholderTextColor={colors.secondary}
onChangeText={content =>
formatText({
textInput: 'text',

4
src/screens/Compose/formatText.tsx
View File

@ -16,9 +16,9 @@ export interface Params {
}
const TagText = ({ text }: { text: string }) => {
const { theme } = useTheme()
const { colors } = useTheme()
return <Text style={{ color: theme.blue }}>{text}</Text>
return <Text style={{ color: colors.blue }}>{text}</Text>
}
const debouncedSuggestions = debounce(

23
src/screens/ImageViewer/save.ts
View File

@ -2,6 +2,7 @@ import haptics from '@components/haptics'
import { displayMessage } from '@components/Message'
import CameraRoll from '@react-native-community/cameraroll'
import { RootStackParamList } from '@utils/navigation/navigators'
import { Theme } from '@utils/styles/themes'
import * as FileSystem from 'expo-file-system'
import i18next from 'i18next'
import { RefObject } from 'react'
@ -10,17 +11,17 @@ import FlashMessage from 'react-native-flash-message'
type CommonProps = {
messageRef: RefObject<FlashMessage>
mode: 'light' | 'dark'
theme: Theme
image: RootStackParamList['Screen-ImagesViewer']['imageUrls'][0]
}
const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
const saveIos = async ({ messageRef, theme, image }: CommonProps) => {
CameraRoll.save(image.url)
.then(() => {
haptics('Success')
displayMessage({
ref: messageRef,
mode,
theme,
type: 'success',
message: i18next.t('screenImageViewer:content.save.succeed')
})
@ -32,7 +33,7 @@ const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
haptics('Success')
displayMessage({
ref: messageRef,
mode,
theme,
type: 'success',
message: i18next.t('screenImageViewer:content.save.succeed')
})
@ -41,7 +42,7 @@ const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
haptics('Error')
displayMessage({
ref: messageRef,
mode,
theme,
type: 'error',
message: i18next.t('screenImageViewer:content.save.failed')
})
@ -50,7 +51,7 @@ const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
haptics('Error')
displayMessage({
ref: messageRef,
mode,
theme,
type: 'error',
message: i18next.t('screenImageViewer:content.save.failed')
})
@ -58,7 +59,7 @@ const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
})
}
const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
const saveAndroid = async ({ messageRef, theme, image }: CommonProps) => {
const fileUri: string = `${FileSystem.documentDirectory}${image.id}.jpg`
const downloadedFile: FileSystem.FileSystemDownloadResult =
await FileSystem.downloadAsync(image.url, fileUri)
@ -67,7 +68,7 @@ const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
haptics('Error')
displayMessage({
ref: messageRef,
mode,
theme,
type: 'error',
message: i18next.t('screenImageViewer:content.save.failed')
})
@ -83,7 +84,7 @@ const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
haptics('Error')
displayMessage({
ref: messageRef,
mode,
theme,
type: 'error',
message: i18next.t('screenImageViewer:content.save.failed')
})
@ -96,7 +97,7 @@ const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
haptics('Success')
displayMessage({
ref: messageRef,
mode,
theme,
type: 'success',
message: i18next.t('screenImageViewer:content.save.succeed')
})
@ -105,7 +106,7 @@ const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
haptics('Error')
displayMessage({
ref: messageRef,
mode,
theme,
type: 'error',
message: i18next.t('screenImageViewer:content.save.failed')
})

11
src/screens/ImagesViewer.tsx
View File

@ -35,7 +35,7 @@ const HeaderComponent = React.memo(
imageUrls: RootStackParamList['Screen-ImagesViewer']['imageUrls']
}) => {
const insets = useSafeAreaInsets()
const { mode } = useTheme()
const { mode, theme } = useTheme()
const { t } = useTranslation('screenImageViewer')
const { showActionSheetWithOptions } = useActionSheet()
@ -48,13 +48,14 @@ const HeaderComponent = React.memo(
t('content.options.share'),
t('content.options.cancel')
],
cancelButtonIndex: 2
cancelButtonIndex: 2,
userInterfaceStyle: mode
},
async buttonIndex => {
switch (buttonIndex) {
case 0:
analytics('imageviewer_more_save_press')
saveImage({ messageRef, mode, image: imageUrls[currentIndex] })
saveImage({ messageRef, theme, image: imageUrls[currentIndex] })
break
case 1:
analytics('imageviewer_more_share_press')
@ -117,7 +118,7 @@ const ScreenImagesViewer = ({
return null
}
const { mode } = useTheme()
const { theme } = useTheme()
const initialIndex = imageUrls.findIndex(image => image.id === id)
const [currentIndex, setCurrentIndex] = useState(initialIndex)
@ -132,7 +133,7 @@ const ScreenImagesViewer = ({
imageIndex={initialIndex}
onImageIndexChange={index => setCurrentIndex(index)}
onRequestClose={() => navigation.goBack()}
onLongPress={image => saveImage({ messageRef, mode, image })}
onLongPress={image => saveImage({ messageRef, theme, image })}
HeaderComponent={() => (
<HeaderComponent
messageRef={messageRef}

8
src/screens/Tabs.tsx
View File

@ -31,7 +31,7 @@ const Tab = createBottomTabNavigator<ScreenTabsStackParamList>()
const ScreenTabs = React.memo(
({ navigation }: RootStackScreenProps<'Screen-Tabs'>) => {
const { theme } = useTheme()
const { colors } = useTheme()
const instanceActive = useSelector(getInstanceActive)
const instanceAccount = useSelector(
@ -42,8 +42,8 @@ const ScreenTabs = React.memo(
const screenOptions = useCallback(
({ route }): BottomTabNavigationOptions => ({
headerShown: false,
tabBarActiveTintColor: theme.primaryDefault,
tabBarInactiveTintColor: theme.secondary,
tabBarActiveTintColor: colors.primaryDefault,
tabBarInactiveTintColor: colors.secondary,
tabBarShowLabel: false,
...(Platform.OS === 'android' && { tabBarHideOnKeyboard: true }),
tabBarStyle: { display: instanceActive !== -1 ? 'flex' : 'none' },
@ -78,7 +78,7 @@ const ScreenTabs = React.memo(
borderRadius: size,
overflow: 'hidden',
borderWidth: focused ? 2 : 0,
borderColor: focused ? theme.secondary : color
borderColor: focused ? colors.secondary : color
}}
/>
)

16
src/screens/Tabs/Me/Profile/Fields.tsx
View File

@ -23,16 +23,18 @@ const prepareFields = (
})
}
const TabMeProfileFields: React.FC<TabMeProfileStackScreenProps<
'Tab-Me-Profile-Fields'
> & { messageRef: RefObject<FlashMessage> }> = ({
const TabMeProfileFields: React.FC<
TabMeProfileStackScreenProps<'Tab-Me-Profile-Fields'> & {
messageRef: RefObject<FlashMessage>
}
> = ({
messageRef,
route: {
params: { fields }
},
navigation
}) => {
const { mode, theme } = useTheme()
const { colors, theme } = useTheme()
const { t, i18n } = useTranslation('screenTabs')
const { mutateAsync, status } = useProfileMutation()
@ -77,7 +79,7 @@ const TabMeProfileFields: React.FC<TabMeProfileStackScreenProps<
content='Save'
onPress={async () => {
mutateAsync({
mode,
theme,
messageRef,
message: {
text: 'me.profile.root.note.title',
@ -95,14 +97,14 @@ const TabMeProfileFields: React.FC<TabMeProfileStackScreenProps<
/>
)
})
}, [mode, i18n.language, dirty, status, newFields])
}, [theme, i18n.language, dirty, status, newFields])
return (
<ScrollView style={styles.base} keyboardShouldPersistTaps='always'>
<View style={{ marginBottom: StyleConstants.Spacing.L * 2 }}>
{Array.from(Array(4).keys()).map(index => (
<View key={index} style={styles.group}>
<Text style={[styles.headline, { color: theme.primaryDefault }]}>
<Text style={[styles.headline, { color: colors.primaryDefault }]}>
{t('me.profile.fields.group', { index: index + 1 })}
</Text>
<Input

6
src/screens/Tabs/Me/Profile/Name.tsx
View File

@ -21,7 +21,7 @@ const TabMeProfileName: React.FC<
},
navigation
}) => {
const { mode } = useTheme()
const { theme } = useTheme()
const { t, i18n } = useTranslation('screenTabs')
const { mutateAsync, status } = useProfileMutation()
@ -66,7 +66,7 @@ const TabMeProfileName: React.FC<
content='Save'
onPress={async () => {
mutateAsync({
mode,
theme,
messageRef,
message: {
text: 'me.profile.root.name.title',
@ -82,7 +82,7 @@ const TabMeProfileName: React.FC<
/>
)
})
}, [mode, i18n.language, dirty, status, displayName])
}, [theme, i18n.language, dirty, status, displayName])
return (
<ScrollView style={styles.base} keyboardShouldPersistTaps='always'>

14
src/screens/Tabs/Me/Profile/Note.tsx
View File

@ -10,16 +10,18 @@ import { Alert, StyleSheet, View } from 'react-native'
import FlashMessage from 'react-native-flash-message'
import { ScrollView } from 'react-native-gesture-handler'
const TabMeProfileNote: React.FC<TabMeProfileStackScreenProps<
'Tab-Me-Profile-Note'
> & { messageRef: RefObject<FlashMessage> }> = ({
const TabMeProfileNote: React.FC<
TabMeProfileStackScreenProps<'Tab-Me-Profile-Note'> & {
messageRef: RefObject<FlashMessage>
}
> = ({
messageRef,
route: {
params: { note }
},
navigation
}) => {
const { mode } = useTheme()
const { theme } = useTheme()
const { t, i18n } = useTranslation('screenTabs')
const { mutateAsync, status } = useProfileMutation()
@ -64,7 +66,7 @@ const TabMeProfileNote: React.FC<TabMeProfileStackScreenProps<
content='Save'
onPress={async () => {
mutateAsync({
mode,
theme,
messageRef,
message: {
text: 'me.profile.root.note.title',
@ -80,7 +82,7 @@ const TabMeProfileNote: React.FC<TabMeProfileStackScreenProps<
/>
)
})
}, [mode, i18n.language, dirty, status, newNote])
}, [theme, i18n.language, dirty, status, newNote])
return (
<ScrollView style={styles.base} keyboardShouldPersistTaps='always'>

27
src/screens/Tabs/Me/Profile/Root.tsx
View File

@ -12,10 +12,12 @@ import { ScrollView } from 'react-native-gesture-handler'
import { useDispatch } from 'react-redux'
import ProfileAvatarHeader from './Root/AvatarHeader'
const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
'Tab-Me-Profile-Root'
> & { messageRef: RefObject<FlashMessage> }> = ({ messageRef, navigation }) => {
const { mode } = useTheme()
const TabMeProfileRoot: React.FC<
TabMeProfileStackScreenProps<'Tab-Me-Profile-Root'> & {
messageRef: RefObject<FlashMessage>
}
> = ({ messageRef, navigation }) => {
const { mode, theme } = useTheme()
const { t } = useTranslation('screenTabs')
const { showActionSheetWithOptions } = useActionSheet()
@ -34,7 +36,8 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
t('me.profile.root.visibility.options.private'),
t('me.profile.root.visibility.options.cancel')
],
cancelButtonIndex: 3
cancelButtonIndex: 3,
userInterfaceStyle: mode
},
async buttonIndex => {
switch (buttonIndex) {
@ -54,7 +57,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
new: indexVisibilityMapping[buttonIndex]
})
mutateAsync({
mode,
theme,
messageRef,
message: {
text: 'me.profile.root.visibility.title',
@ -69,7 +72,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
}
}
)
}, [data?.source.privacy])
}, [theme, data?.source.privacy])
const onPressSensitive = useCallback(() => {
analytics('me_profile_sensitive', {
@ -77,7 +80,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
new: data?.source.sensitive === undefined ? true : !data.source.sensitive
})
mutateAsync({
mode,
theme,
messageRef,
message: {
text: 'me.profile.root.sensitive.title',
@ -95,7 +98,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
new: data?.locked === undefined ? true : !data.locked
})
mutateAsync({
mode,
theme,
messageRef,
message: {
text: 'me.profile.root.lock.title',
@ -105,7 +108,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
type: 'locked',
data: data?.locked === undefined ? true : !data.locked
})
}, [data?.locked])
}, [theme, data?.locked])
const onPressBot = useCallback(() => {
analytics('me_profile_bot', {
@ -113,7 +116,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
new: data?.bot === undefined ? true : !data.bot
})
mutateAsync({
mode,
theme,
messageRef,
message: {
text: 'me.profile.root.bot.title',
@ -123,7 +126,7 @@ const TabMeProfileRoot: React.FC<TabMeProfileStackScreenProps<
type: 'bot',
data: data?.bot === undefined ? true : !data.bot
})
}, [data?.bot])
}, [theme, data?.bot])
return (
<ScrollView>

4
src/screens/Tabs/Me/Profile/Root/AvatarHeader.tsx
View File

@ -14,7 +14,7 @@ export interface Props {
}
const ProfileAvatarHeader: React.FC<Props> = ({ type, messageRef }) => {
const { mode } = useTheme()
const { theme } = useTheme()
const { t } = useTranslation('screenTabs')
const { showActionSheetWithOptions } = useActionSheet()
@ -35,7 +35,7 @@ const ProfileAvatarHeader: React.FC<Props> = ({ type, messageRef }) => {
resize: { width: 400, height: 400 }
})
mutation.mutate({
mode,
theme,
messageRef,
message: {
text: `me.profile.root.${type}.title`,

6
src/screens/Tabs/Me/Push.tsx
View File

@ -23,7 +23,7 @@ import { AppState, Linking, ScrollView, Text, View } from 'react-native'
import { useDispatch, useSelector } from 'react-redux'
const TabMePush: React.FC = () => {
const { theme } = useTheme()
const { colors } = useTheme()
const { t } = useTranslation('screenTabs')
const instanceAccount = useSelector(
getInstanceAccount,
@ -202,12 +202,12 @@ const TabMePush: React.FC = () => {
<Icon
name='Frown'
size={StyleConstants.Font.Size.L}
color={theme.primaryDefault}
color={colors.primaryDefault}
/>
<Text
style={{
...StyleConstants.FontStyle.M,
color: theme.primaryDefault
color: colors.primaryDefault
}}
>
{t('me.push.notAvailable')}

4
src/screens/Tabs/Me/Settings/Analytics.tsx
View File

@ -13,7 +13,7 @@ import { useDispatch, useSelector } from 'react-redux'
const SettingsAnalytics: React.FC = () => {
const dispatch = useDispatch()
const { theme } = useTheme()
const { colors } = useTheme()
const { t } = useTranslation('screenTabs')
const settingsAnalytics = useSelector(getSettingsAnalytics)
@ -28,7 +28,7 @@ const SettingsAnalytics: React.FC = () => {
dispatch(changeAnalytics(!settingsAnalytics))
}
/>
<Text style={[styles.version, { color: theme.secondary }]}>
<Text style={[styles.version, { color: colors.secondary }]}>
{t('me.settings.version', { version: Constants.manifest?.version })}
</Text>
</MenuContainer>

50
src/screens/Tabs/Me/Settings/App.tsx
View File

@ -12,7 +12,9 @@ import {
changeTheme,
getSettingsTheme,
getSettingsBrowser,
getSettingsFontsize
getSettingsFontsize,
getSettingsDarkTheme,
changeDarkTheme
} from '@utils/slices/settingsSlice'
import { useTheme } from '@utils/styles/ThemeManager'
import * as Notifications from 'expo-notifications'
@ -26,12 +28,13 @@ const SettingsApp: React.FC = () => {
const navigation = useNavigation<any>()
const dispatch = useDispatch()
const { showActionSheetWithOptions } = useActionSheet()
const { setTheme } = useTheme()
const { mode } = useTheme()
const { t, i18n } = useTranslation('screenTabs')
const instances = useSelector(getInstances, () => true)
const settingsFontsize = useSelector(getSettingsFontsize)
const settingsTheme = useSelector(getSettingsTheme)
const settingsDarkTheme = useSelector(getSettingsDarkTheme)
const settingsBrowser = useSelector(getSettingsBrowser)
return (
@ -61,7 +64,8 @@ const SettingsApp: React.FC = () => {
{
title: t('me.settings.language.heading'),
options,
cancelButtonIndex: options.length - 1
cancelButtonIndex: options.length - 1,
userInterfaceStyle: mode
},
buttonIndex => {
if (buttonIndex === undefined) return
@ -171,7 +175,6 @@ const SettingsApp: React.FC = () => {
})
haptics('Success')
dispatch(changeTheme('light'))
setTheme('light')
break
case 2:
analytics('settings_appearance_press', {
@ -180,7 +183,44 @@ const SettingsApp: React.FC = () => {
})
haptics('Success')
dispatch(changeTheme('dark'))
setTheme('dark')
break
}
}
)
}
/>
<MenuRow
title={t('me.settings.darkTheme.heading')}
content={t(`me.settings.darkTheme.options.${settingsDarkTheme}`)}
iconBack='ChevronRight'
onPress={() =>
showActionSheetWithOptions(
{
title: t('me.settings.darkTheme.heading'),
options: [
t('me.settings.darkTheme.options.lighter'),
t('me.settings.darkTheme.options.darker'),
t('me.settings.darkTheme.options.cancel')
],
cancelButtonIndex: 2
},
buttonIndex => {
switch (buttonIndex) {
case 0:
analytics('settings_darktheme_press', {
current: settingsDarkTheme,
new: 'lighter'
})
haptics('Success')
dispatch(changeDarkTheme('lighter'))
break
case 1:
analytics('settings_darktheme_press', {
current: settingsDarkTheme,
new: 'darker'
})
haptics('Success')
dispatch(changeDarkTheme('darker'))
break
}
}

7
src/screens/Tabs/Me/Settings/Dev.tsx
View File

@ -11,7 +11,7 @@ import { DevSettings, Text } from 'react-native'
import { useSelector } from 'react-redux'
const SettingsDev: React.FC = () => {
const { theme } = useTheme()
const { colors, mode } = useTheme()
const { showActionSheetWithOptions } = useActionSheet()
const instanceActive = useSelector(getInstanceActive)
const instances = useSelector(getInstances, () => true)
@ -23,7 +23,7 @@ const SettingsDev: React.FC = () => {
style={{
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
...StyleConstants.FontStyle.S,
color: theme.primaryDefault
color: colors.primaryDefault
}}
>
{instances[instanceActive]?.token}
@ -45,7 +45,8 @@ const SettingsDev: React.FC = () => {
return instance.url + ': ' + instance.account.id
})
.concat(['Cancel']),
cancelButtonIndex: instances.length
cancelButtonIndex: instances.length,
userInterfaceStyle: mode
},
() => {}
)

8
src/screens/Tabs/Me/Settings/Tooot.tsx
View File

@ -16,7 +16,7 @@ import { isDevelopment, isRelease } from '@utils/checkEnvironment'
const SettingsTooot: React.FC = () => {
const instanceActive = useSelector(getInstanceActive)
const navigation = useNavigation<any>()
const { theme } = useTheme()
const { colors } = useTheme()
const { t } = useTranslation('screenTabs')
return (
@ -27,7 +27,7 @@ const SettingsTooot: React.FC = () => {
<Icon
name='MessageSquare'
size={StyleConstants.Font.Size.M}
color={theme.secondary}
color={colors.secondary}
/>
}
iconBack='ChevronRight'
@ -42,7 +42,7 @@ const SettingsTooot: React.FC = () => {
<Icon
name='Heart'
size={StyleConstants.Font.Size.M}
color={theme.red}
color={colors.red}
/>
}
iconBack='ChevronRight'
@ -76,7 +76,7 @@ const SettingsTooot: React.FC = () => {
<Icon
name='Mail'
size={StyleConstants.Font.Size.M}
color={theme.secondary}
color={colors.secondary}
/>
}
iconBack='ChevronRight'

14
src/screens/Tabs/Me/SettingsFontsize.tsx
View File

@ -35,7 +35,7 @@ export const mapFontsizeToName = (size: SettingsState['fontsize']) => {
const TabMeSettingsFontsize: React.FC<
TabMeStackScreenProps<'Tab-Me-Settings-Fontsize'>
> = () => {
const { mode, theme } = useTheme()
const { colors, theme } = useTheme()
const { t } = useTranslation('screenTabs')
const initialSize = useSelector(getSettingsFontsize)
const dispatch = useDispatch()
@ -90,9 +90,11 @@ const TabMeSettingsFontsize: React.FC<
? StyleConstants.Font.Weight.Bold
: undefined,
color:
initialSize === size ? theme.primaryDefault : theme.secondary,
initialSize === size
? colors.primaryDefault
: colors.secondary,
borderWidth: StyleSheet.hairlineWidth,
borderColor: theme.border
borderColor: colors.border
}
]}
>
@ -101,11 +103,11 @@ const TabMeSettingsFontsize: React.FC<
))}
</>
)
}, [mode, initialSize])
}, [theme, initialSize])
return (
<ScrollView scrollEnabled={false}>
<Text style={[styles.header, { color: theme.primaryDefault }]}>
<Text style={[styles.header, { color: colors.primaryDefault }]}>
{t('me.fontSize.showcase')}
</Text>
<View>
@ -124,7 +126,7 @@ const TabMeSettingsFontsize: React.FC<
extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
/>
</View>
<Text style={[styles.header, { color: theme.primaryDefault }]}>
<Text style={[styles.header, { color: colors.primaryDefault }]}>
{t('me.fontSize.availableSizes')}
</Text>
<View style={styles.sizesDemo}>{sizesDemo}</View>

8
src/screens/Tabs/Me/Switch.tsx
View File

@ -51,7 +51,7 @@ const AccountButton: React.FC<Props> = ({ instance, selected = false }) => {
const TabMeSwitch: React.FC = () => {
const { t } = useTranslation('screenTabs')
const { theme } = useTheme()
const { colors } = useTheme()
const instances = useSelector(getInstances, () => true)
const instanceActive = useSelector(getInstanceActive, () => true)
@ -68,9 +68,9 @@ const TabMeSwitch: React.FC = () => {
keyboardShouldPersistTaps='always'
>
<View
style={[styles.firstSection, { borderBottomColor: theme.border }]}
style={[styles.firstSection, { borderBottomColor: colors.border }]}
>
<Text style={[styles.header, { color: theme.primaryDefault }]}>
<Text style={[styles.header, { color: colors.primaryDefault }]}>
{t('me.switch.existing')}
</Text>
<View style={styles.accountButtons}>
@ -101,7 +101,7 @@ const TabMeSwitch: React.FC = () => {
</View>
<View style={styles.secondSection}>
<Text style={[styles.header, { color: theme.primaryDefault }]}>
<Text style={[styles.header, { color: colors.primaryDefault }]}>
{t('me.switch.new')}
</Text>
<ComponentInstance

10
src/screens/Tabs/Shared/Account.tsx
View File

@ -18,16 +18,16 @@ import AccountHeader from './Account/Header'
import AccountInformation from './Account/Information'
import AccountNav from './Account/Nav'
const TabSharedAccount: React.FC<TabSharedStackScreenProps<
'Tab-Shared-Account'
>> = ({
const TabSharedAccount: React.FC<
TabSharedStackScreenProps<'Tab-Shared-Account'>
> = ({
route: {
params: { account }
},
navigation
}) => {
const { t, i18n } = useTranslation('screenTabs')
const { mode, theme } = useTheme()
const { colors, mode } = useTheme()
const { data } = useAccountQuery({ id: account.id })
@ -83,7 +83,7 @@ const TabSharedAccount: React.FC<TabSharedStackScreenProps<
const ListHeaderComponent = useMemo(() => {
return (
<>
<View style={[styles.header, { borderBottomColor: theme.border }]}>
<View style={[styles.header, { borderBottomColor: colors.border }]}>
<AccountHeader account={data} />
<AccountInformation account={data} />
{fetchedTimeline.current ? (

13
src/screens/Tabs/Shared/Account/Attachments.tsx
View File

@ -24,10 +24,9 @@ export interface Props {
const AccountAttachments = React.memo(
({ account }: Props) => {
const navigation = useNavigation<
StackNavigationProp<TabLocalStackParamList>
>()
const { theme } = useTheme()
const navigation =
useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const { colors } = useTheme()
const DISPLAY_AMOUNT = 6
@ -71,7 +70,7 @@ const AccountAttachments = React.memo(
<View
style={{
marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
backgroundColor: theme.backgroundOverlayInvert,
backgroundColor: colors.backgroundOverlayInvert,
width: width,
height: width,
justifyContent: 'center',
@ -80,7 +79,7 @@ const AccountAttachments = React.memo(
children={
<Icon
name='MoreHorizontal'
color={theme.primaryOverlay}
color={colors.primaryOverlay}
size={StyleConstants.Font.Size.L * 1.5}
/>
}
@ -117,7 +116,7 @@ const AccountAttachments = React.memo(
),
paddingVertical: StyleConstants.Spacing.Global.PagePadding,
borderTopWidth: 1,
borderTopColor: theme.border
borderTopColor: colors.border
}
} else {
return {}

4
src/screens/Tabs/Shared/Account/Header.tsx
View File

@ -13,7 +13,7 @@ export interface Props {
const AccountHeader = React.memo(
({ account, edit }: Props) => {
const { reduceMotionEnabled } = useAccessibility()
const { theme } = useTheme()
const { colors } = useTheme()
const topInset = useSafeAreaInsets().top
return (
@ -24,7 +24,7 @@ const AccountHeader = React.memo(
}}
style={{
height: Dimensions.get('screen').width / 3 + topInset,
backgroundColor: theme.disabled
backgroundColor: colors.disabled
}}
/>
{edit ? (

6
src/screens/Tabs/Shared/Account/Information.tsx
View File

@ -19,16 +19,16 @@ export interface Props {
const AccountInformation = React.memo(
({ account }: Props) => {
const { mode, theme } = useTheme()
const { colors, theme } = useTheme()
const { name } = useRoute()
const myInfo = name !== 'Tab-Shared-Account'
const animation = useCallback(
props => (
<Fade {...props} style={{ backgroundColor: theme.shimmerHighlight }} />
<Fade {...props} style={{ backgroundColor: colors.shimmerHighlight }} />
),
[mode]
[theme]
)
return (

17
src/screens/Tabs/Shared/Account/Information/Account.tsx
View File

@ -15,8 +15,11 @@ export interface Props {
localInstance: boolean
}
const AccountInformationAccount: React.FC<Props> = ({ account, localInstance }) => {
const { theme } = useTheme()
const AccountInformationAccount: React.FC<Props> = ({
account,
localInstance
}) => {
const { colors } = useTheme()
const instanceAccount = useSelector(
getInstanceAccount,
(prev, next) => prev?.acct === next?.acct
@ -38,7 +41,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, localInstance })
<Text
style={[
styles.moved,
{ color: theme.secondary, ...StyleConstants.FontStyle.M }
{ color: colors.secondary, ...StyleConstants.FontStyle.M }
]}
selectable
>
@ -57,7 +60,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, localInstance })
style={[
movedStyle.base,
{
color: theme.secondary,
color: colors.secondary,
...StyleConstants.FontStyle.M
}
]}
@ -71,7 +74,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, localInstance })
<Icon
name='Lock'
style={styles.type}
color={theme.secondary}
color={colors.secondary}
size={StyleConstants.Font.Size.M}
/>
) : null}
@ -79,7 +82,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, localInstance })
<Icon
name='HardDrive'
style={styles.type}
color={theme.secondary}
color={colors.secondary}
size={StyleConstants.Font.Size.M}
/>
) : null}
@ -90,7 +93,7 @@ const AccountInformationAccount: React.FC<Props> = ({ account, localInstance })
<PlaceholderLine
width={StyleConstants.Font.Size.M * 3}
height={StyleConstants.Font.LineHeight.M}
color={theme.shimmerDefault}
color={colors.shimmerDefault}
noMargin
style={styles.base}
/>

8
src/screens/Tabs/Shared/Account/Information/Created.tsx
View File

@ -18,7 +18,7 @@ const AccountInformationCreated = React.memo(
}
const { i18n } = useTranslation()
const { theme } = useTheme()
const { colors } = useTheme()
const { t } = useTranslation('screenTabs')
if (account) {
@ -29,12 +29,12 @@ const AccountInformationCreated = React.memo(
<Icon
name='Calendar'
size={StyleConstants.Font.Size.S}
color={theme.secondary}
color={colors.secondary}
style={styles.icon}
/>
<Text
style={{
color: theme.secondary,
color: colors.secondary,
...StyleConstants.FontStyle.S
}}
>
@ -56,7 +56,7 @@ const AccountInformationCreated = React.memo(
<PlaceholderLine
width={StyleConstants.Font.Size.S * 4}
height={StyleConstants.Font.LineHeight.S}
color={theme.shimmerDefault}
color={colors.shimmerDefault}
noMargin
style={styles.base}
/>

10
src/screens/Tabs/Shared/Account/Information/Fields.tsx
View File

@ -16,17 +16,17 @@ const AccountInformationFields = React.memo(
return null
}
const { theme } = useTheme()
const { colors } = useTheme()
return (
<View style={[styles.fields, { borderTopColor: theme.border }]}>
<View style={[styles.fields, { borderTopColor: colors.border }]}>
{account.fields.map((field, index) => (
<View
key={index}
style={[styles.field, { borderBottomColor: theme.border }]}
style={[styles.field, { borderBottomColor: colors.border }]}
>
<View
style={[styles.fieldLeft, { borderRightColor: theme.border }]}
style={[styles.fieldLeft, { borderRightColor: colors.border }]}
>
<ParseHTML
content={field.name}
@ -40,7 +40,7 @@ const AccountInformationFields = React.memo(
<Icon
name='CheckCircle'
size={StyleConstants.Font.Size.M}
color={theme.primaryDefault}
color={colors.primaryDefault}
style={styles.fieldCheck}
/>
) : null}

4
src/screens/Tabs/Shared/Account/Information/Name.tsx
View File

@ -12,7 +12,7 @@ export interface Props {
}
const AccountInformationName: React.FC<Props> = ({ account, edit }) => {
const { theme } = useTheme()
const { colors } = useTheme()
const movedContent = useMemo(() => {
if (account?.moved) {
@ -57,7 +57,7 @@ const AccountInformationName: React.FC<Props> = ({ account, edit }) => {
<PlaceholderLine
width={StyleConstants.Font.Size.L * 2}
height={StyleConstants.Font.LineHeight.L}
color={theme.shimmerDefault}
color={colors.shimmerDefault}
noMargin
style={{ borderRadius: 0 }}
/>

19
src/screens/Tabs/Shared/Account/Information/Stats.tsx
View File

@ -15,17 +15,16 @@ export interface Props {
}
const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
const navigation = useNavigation<
StackNavigationProp<TabLocalStackParamList>
>()
const { theme } = useTheme()
const navigation =
useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const { colors } = useTheme()
const { t } = useTranslation('screenTabs')
return (
<View style={[styles.stats, { flexDirection: 'row' }]}>
{account ? (
<Text
style={[styles.stat, { color: theme.primaryDefault }]}
style={[styles.stat, { color: colors.primaryDefault }]}
children={t('shared.account.summary.statuses_count', {
count: account.statuses_count || 0
})}
@ -40,7 +39,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
<PlaceholderLine
width={StyleConstants.Font.Size.S * 1.25}
height={StyleConstants.Font.LineHeight.S}
color={theme.shimmerDefault}
color={colors.shimmerDefault}
noMargin
style={{ borderRadius: 0 }}
/>
@ -49,7 +48,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
<Text
style={[
styles.stat,
{ color: theme.primaryDefault, textAlign: 'right' }
{ color: colors.primaryDefault, textAlign: 'right' }
]}
children={t('shared.account.summary.following_count', {
count: account.following_count
@ -70,7 +69,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
<PlaceholderLine
width={StyleConstants.Font.Size.S * 1.25}
height={StyleConstants.Font.LineHeight.S}
color={theme.shimmerDefault}
color={colors.shimmerDefault}
noMargin
style={{ borderRadius: 0 }}
/>
@ -79,7 +78,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
<Text
style={[
styles.stat,
{ color: theme.primaryDefault, textAlign: 'center' }
{ color: colors.primaryDefault, textAlign: 'center' }
]}
children={t('shared.account.summary.followers_count', {
count: account.followers_count
@ -100,7 +99,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
<PlaceholderLine
width={StyleConstants.Font.Size.S * 1.25}
height={StyleConstants.Font.LineHeight.S}
color={theme.shimmerDefault}
color={colors.shimmerDefault}
noMargin
style={{ borderRadius: 0 }}
/>

4
src/screens/Tabs/Shared/Account/Nav.tsx
View File

@ -17,7 +17,7 @@ export interface Props {
const AccountNav = React.memo(
({ scrollY, account }: Props) => {
const { theme } = useTheme()
const { colors } = useTheme()
const headerHeight = useSafeAreaInsets().top + 44
const nameY =
@ -48,7 +48,7 @@ const AccountNav = React.memo(
style={[
styles.base,
styleOpacity,
{ backgroundColor: theme.backgroundDefault, height: headerHeight }
{ backgroundColor: colors.backgroundDefault, height: headerHeight }
]}
>
<View

10
src/screens/Tabs/Shared/Root.tsx
View File

@ -20,7 +20,7 @@ const TabSharedRoot = ({
}: {
Stack: ReturnType<typeof createNativeStackNavigator>
}) => {
const { mode, theme } = useTheme()
const { colors, mode } = useTheme()
const { t } = useTranslation('screenTabs')
return (
@ -72,7 +72,7 @@ const TabSharedRoot = ({
<Text
style={{
...StyleConstants.FontStyle.M,
color: theme.primaryDefault,
color: colors.primaryDefault,
fontWeight: StyleConstants.Font.Weight.Bold
}}
/>
@ -124,7 +124,7 @@ const TabSharedRoot = ({
style={[
styles.textInput,
{
color: theme.primaryDefault
color: colors.primaryDefault
}
]}
defaultValue={t('shared.search.header.prefix')}
@ -136,7 +136,7 @@ const TabSharedRoot = ({
styles.textInput,
{
flex: 1,
color: theme.primaryDefault,
color: colors.primaryDefault,
paddingLeft: StyleConstants.Spacing.XS
}
]}
@ -150,7 +150,7 @@ const TabSharedRoot = ({
navigation.setParams({ text })
}
placeholder={t('shared.search.header.placeholder')}
placeholderTextColor={theme.secondary}
placeholderTextColor={colors.secondary}
returnKeyType='go'
/>
</View>

34
src/screens/Tabs/Shared/Search.tsx
View File

@ -26,7 +26,7 @@ const TabSharedSearch: React.FC<
}
}) => {
const { t } = useTranslation('screenTabs')
const { theme } = useTheme()
const { colors } = useTheme()
const mapKeyToTranslations = {
accounts: t('shared.search.sections.accounts'),
@ -72,7 +72,7 @@ const TabSharedSearch: React.FC<
<View style={styles.loading}>
<Circle
size={StyleConstants.Font.Size.M * 1.25}
color={theme.secondary}
color={colors.secondary}
/>
</View>
) : (
@ -81,7 +81,7 @@ const TabSharedSearch: React.FC<
style={[
styles.emptyDefault,
styles.emptyFontSize,
{ color: theme.primaryDefault }
{ color: colors.primaryDefault }
]}
>
<Trans
@ -90,35 +90,37 @@ const TabSharedSearch: React.FC<
/>
</Text>
<Text
style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}
style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
>
{t('shared.search.empty.advanced.header')}
</Text>
<Text
style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}
style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
>
<Text style={{ color: theme.secondary }}>@username@domain</Text>
<Text style={{ color: colors.secondary }}>
@username@domain
</Text>
{' '}
{t('shared.search.empty.advanced.example.account')}
</Text>
<Text
style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}
style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
>
<Text style={{ color: theme.secondary }}>#example</Text>
<Text style={{ color: colors.secondary }}>#example</Text>
{' '}
{t('shared.search.empty.advanced.example.hashtag')}
</Text>
<Text
style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}
style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
>
<Text style={{ color: theme.secondary }}>URL</Text>
<Text style={{ color: colors.secondary }}>URL</Text>
{' '}
{t('shared.search.empty.advanced.example.statusLink')}
</Text>
<Text
style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}
style={[styles.emptyAdvanced, { color: colors.primaryDefault }]}
>
<Text style={{ color: theme.secondary }}>URL</Text>
<Text style={{ color: colors.secondary }}>URL</Text>
{' '}
{t('shared.search.empty.advanced.example.accountLink')}
</Text>
@ -133,11 +135,11 @@ const TabSharedSearch: React.FC<
<View
style={[
styles.sectionHeader,
{ backgroundColor: theme.backgroundDefault }
{ backgroundColor: colors.backgroundDefault }
]}
>
<Text
style={[styles.sectionHeaderText, { color: theme.primaryDefault }]}
style={[styles.sectionHeaderText, { color: colors.primaryDefault }]}
>
{translation}
</Text>
@ -151,10 +153,10 @@ const TabSharedSearch: React.FC<
<View
style={[
styles.sectionFooter,
{ backgroundColor: theme.backgroundDefault }
{ backgroundColor: colors.backgroundDefault }
]}
>
<Text style={[styles.sectionFooterText, { color: theme.secondary }]}>
<Text style={[styles.sectionFooterText, { color: colors.secondary }]}>
<Trans
i18nKey='screenTabs:shared.search.notFound'
values={{ searchTerm: text, type: translation }}

8
src/store.ts
View File

@ -3,6 +3,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
import { AnyAction, configureStore, Reducer } from '@reduxjs/toolkit'
import contextsMigration from '@utils/migrations/contexts/migration'
import instancesMigration from '@utils/migrations/instances/migration'
import settingsMigration from '@utils/migrations/settings/migration'
import contextsSlice, { ContextsState } from '@utils/slices/contextsSlice'
import instancesSlice, { InstancesState } from '@utils/slices/instancesSlice'
import settingsSlice, { SettingsState } from '@utils/slices/settingsSlice'
@ -17,7 +18,7 @@ const contextsPersistConfig = {
key: 'contexts',
prefix,
storage: AsyncStorage,
version: 1,
version: 2,
// @ts-ignore
migrate: createMigrate(contextsMigration)
}
@ -34,7 +35,10 @@ const instancesPersistConfig = {
const settingsPersistConfig = {
key: 'settings',
prefix,
storage: AsyncStorage
storage: AsyncStorage,
version: 1,
// @ts-ignore
migrate: createMigrate(settingsMigration)
}
const store = configureStore({

15
src/utils/migrations/contexts/migration.ts
View File

@ -1,21 +1,20 @@
import { ContextsV0 } from './v0'
import { ContextsV1 } from './v1'
import { ContextsV2 } from './v2'
const contextsMigration = {
1: (state: ContextsV0) => {
return (state = {
1: (state: ContextsV0): ContextsV1 => {
return {
...state,
// @ts-ignore
mePage: {
lists: { shown: false },
announcements: { shown: false, unread: 0 }
}
})
}
},
2: (state: ContextsV1) => {
// @ts-ignore
delete state.mePage
return state
2: (state: ContextsV1): ContextsV2 => {
const { mePage, ...rest } = state
return rest
}
}

13
src/utils/migrations/contexts/v2.ts Normal file
View File

@ -0,0 +1,13 @@
export type ContextsV2 = {
storeReview: {
context: Readonly<number>
current: number
shown: boolean
}
publicRemoteNotice: {
context: Readonly<number>
current: number
hidden: boolean
}
previousTab: 'Tab-Local' | 'Tab-Public' | 'Tab-Notifications' | 'Tab-Me'
}

41
src/utils/migrations/instances/migration.ts
View File

@ -2,15 +2,15 @@ import { InstanceV3 } from './v3'
import { InstanceV4 } from './v4'
import { InstanceV5 } from './v5'
import { InstanceV6 } from './v6'
import { InstanceV7 } from './v7'
const instancesMigration = {
4: (state: InstanceV3) => {
4: (state: InstanceV3): InstanceV4 => {
return {
instances: state.local.instances.map((instance, index) => {
// @ts-ignore
delete instance.notification
const { notification, ...rest } = instance
return {
...instance,
...rest,
active: state.local.activeIndex === index,
push: {
global: { loading: false, value: false },
@ -28,35 +28,42 @@ const instancesMigration = {
})
}
},
5: (state: InstanceV4) => {
5: (state: InstanceV4): InstanceV5 => {
// @ts-ignore
if (state.instances.length && !state.instances[0].notifications_filter) {
return {
// @ts-ignore
instances: state.instances.map(instance => {
// @ts-ignore
instance.notifications_filter = {
follow: true,
favourite: true,
reblog: true,
mention: true,
poll: true,
follow_request: true
return {
...instance,
notifications_filter: {
follow: true,
favourite: true,
reblog: true,
mention: true,
poll: true,
follow_request: true
}
}
return instance
})
}
} else {
// @ts-ignore
return state
}
},
6: (state: InstanceV5) => {
6: (state: InstanceV5): InstanceV6 => {
return {
// @ts-ignore
instances: state.instances.map(instance => {
return { ...instance, configuration: undefined }
return {
...instance,
configuration: undefined
}
})
}
},
7: (state: InstanceV6) => {
7: (state: InstanceV6): InstanceV7 => {
return {
instances: state.instances.map(instance => {
return {

77
src/utils/migrations/instances/v7.ts Normal file
View File

@ -0,0 +1,77 @@
import { ComposeStateDraft } from '@screens/Compose/utils/types'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
type Instance = {
active: boolean
appData: {
clientId: string
clientSecret: string
}
url: string
token: string
uri: Mastodon.Instance['uri']
urls: Mastodon.Instance['urls']
account: {
id: Mastodon.Account['id']
acct: Mastodon.Account['acct']
avatarStatic: Mastodon.Account['avatar_static']
preferences: Mastodon.Preferences
}
max_toot_chars?: number // To be deprecated in v4
configuration?: Mastodon.Instance['configuration']
filters: Mastodon.Filter[]
notifications_filter: {
follow: boolean
favourite: boolean
reblog: boolean
mention: boolean
poll: boolean
follow_request: boolean
}
push: {
global: { loading: boolean; value: boolean }
decode: { loading: boolean; value: boolean }
alerts: {
follow: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['follow']
}
favourite: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['favourite']
}
reblog: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['reblog']
}
mention: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['mention']
}
poll: {
loading: boolean
value: Mastodon.PushSubscription['alerts']['poll']
}
}
keys: {
auth?: string
public?: string // legacy
private?: string // legacy
}
}
timelinesLookback?: {
[key: string]: {
queryKey: QueryKeyTimeline
ids: Mastodon.Status['id'][]
}
}
mePage: {
lists: { shown: boolean }
announcements: { shown: boolean; unread: number }
}
drafts: ComposeStateDraft[]
}
export type InstanceV7 = {
instances: Instance[]
}

Some files were not shown because too many files have changed in this diff Show More