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