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

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