octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Implemented new dark theme

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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}