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

Update colour naming 

Fixed #73
Fixed #58
Fixed #47
This commit is contained in:
Zhiyuan Zheng 2021-03-21 14:14:10 +01:00
parent dd345871f8
commit d15e8cb652
No known key found for this signature in database
GPG Key ID: 078A93AB607D85E0
48 changed files with 162 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/@types/react-navigation.d.ts vendored
View File

@ -1,4 +1,6 @@
declare namespace Nav {
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
type RootStackParamList = {
'Screen-Tabs': undefined
'Screen-Actions':
@ -90,7 +92,7 @@ declare namespace Nav {
'Tab-Shared-Search': { text: string | undefined }
'Tab-Shared-Toot': {
toot: Mastodon.Status
rootQueryKey: any
rootQueryKey?: QueryKeyTimeline
}
'Tab-Shared-Users':
| {

2
src/Screens.tsx
View File

@ -144,7 +144,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
return (
<>
<StatusBar barStyle={barStyle[mode]} backgroundColor={theme.background} />
<StatusBar barStyle={barStyle[mode]} backgroundColor={theme.backgroundDefault} />
<NavigationContainer
ref={navigationRef}
theme={themes[mode]}

8
src/components/Button.tsx
View File

@ -81,7 +81,7 @@ const Button: React.FC<Props> = ({
if (destructive) {
return theme.red
} else {
return theme.primary
return theme.primaryDefault
}
}
}
@ -97,16 +97,16 @@ const Button: React.FC<Props> = ({
if (destructive) {
return theme.red
} else {
return theme.primary
return theme.primaryDefault
}
}
}
}, [mode, loading, disabled])
const colorBackground = useMemo(() => {
if (overlay) {
return theme.backgroundOverlay
return theme.backgroundOverlayInvert
} else {
return theme.background
return theme.backgroundDefault
}
}, [mode])

2
src/components/Hashtag.tsx
View File

@ -29,7 +29,7 @@ const ComponentHashtag: React.FC<Props> = ({
return (
<Pressable style={styles.itemDefault} onPress={customOnPress || onPress}>
<Text style={[styles.itemHashtag, { color: theme.primary }]}>
<Text style={[styles.itemHashtag, { color: theme.primaryDefault }]}>
#{hashtag.name}
</Text>
</Pressable>

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

@ -17,7 +17,7 @@ const HeaderCenter = React.memo(
<Text
style={[
styles.text,
{ color: inverted ? theme.primaryOverlay : theme.primary }
{ color: inverted ? theme.primaryOverlay : theme.primaryDefault }
]}
children={content}
/>

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

@ -25,7 +25,7 @@ const HeaderLeft: React.FC<Props> = ({
case 'icon':
return (
<Icon
color={theme.primary}
color={theme.primaryDefault}
name={content || 'ChevronLeft'}
size={StyleConstants.Spacing.M * 1.25}
/>
@ -33,7 +33,7 @@ const HeaderLeft: React.FC<Props> = ({
case 'text':
return (
<Text
style={[styles.text, { color: theme.primary }]}
style={[styles.text, { color: theme.primaryDefault }]}
children={content}
/>
)
@ -47,7 +47,7 @@ const HeaderLeft: React.FC<Props> = ({
style={[
styles.base,
{
backgroundColor: theme.backgroundGradientStart,
backgroundColor: theme.backgroundOverlayDefault,
...(type === 'icon' && {
height: 44,
width: 44,

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

@ -47,7 +47,7 @@ const HeaderRight: React.FC<Props> = ({
name={content}
style={{ opacity: loading ? 0 : 1 }}
size={StyleConstants.Spacing.M * 1.25}
color={disabled ? theme.secondary : theme.primary}
color={disabled ? theme.secondary : theme.primaryDefault}
/>
{loading && loadingSpinkit}
</>
@ -59,7 +59,7 @@ const HeaderRight: React.FC<Props> = ({
style={[
styles.text,
{
color: disabled ? theme.secondary : theme.primary,
color: disabled ? theme.secondary : theme.primaryDefault,
opacity: loading ? 0 : 1
}
]}
@ -79,7 +79,7 @@ const HeaderRight: React.FC<Props> = ({
style={[
styles.base,
{
backgroundColor: theme.backgroundGradientStart,
backgroundColor: theme.backgroundOverlayDefault,
...(type === 'icon' && {
height: 44,
width: 44,

2
src/components/Instance.tsx
View File

@ -142,7 +142,7 @@ const ComponentInstance: React.FC<Props> = ({
style={[
styles.textInput,
{
color: theme.primary,
color: theme.primaryDefault,
borderBottomColor: instanceQuery.isError
? theme.red
: theme.border

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

@ -17,9 +17,9 @@ const InstanceInfo = React.memo(
return (
<View style={[styles.base, style]}>
<Text style={[styles.header, { color: theme.primary }]}>{header}</Text>
<Text style={[styles.header, { color: theme.primaryDefault }]}>{header}</Text>
{content ? (
<Text style={[styles.content, { color: theme.primary }]}>
<Text style={[styles.content, { color: theme.primaryDefault }]}>
{content}
</Text>
) : (

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

@ -28,7 +28,7 @@ export interface Props {
const MenuRow: React.FC<Props> = ({
iconFront,
iconFrontColor = 'primary',
iconFrontColor = 'primaryDefault',
title,
description,
content,
@ -73,7 +73,7 @@ const MenuRow: React.FC<Props> = ({
)}
<View style={styles.main}>
<Text
style={[styles.title, { color: theme.primary }]}
style={[styles.title, { color: theme.primaryDefault }]}
numberOfLines={1}
>
{title}

8
src/components/Message.tsx
View File

@ -87,18 +87,18 @@ const Message = React.memo(
position='top'
floating
style={{
backgroundColor: theme.background,
shadowColor: theme.primary,
backgroundColor: theme.backgroundDefault,
shadowColor: theme.primaryDefault,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: mode === 'light' ? 0.16 : 0.24,
shadowRadius: 4
}}
titleStyle={{
color: theme.primary,
color: theme.primaryDefault,
...StyleConstants.FontStyle.M,
fontWeight: StyleConstants.Font.Weight.Bold
}}
textStyle={{ color: theme.primary, ...StyleConstants.FontStyle.S }}
textStyle={{ color: theme.primaryDefault, ...StyleConstants.FontStyle.S }}
// @ts-ignore
textProps={{ numberOfLines: 2 }}
/>

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

@ -38,7 +38,7 @@ const ParseEmojis = React.memo(
const styles = useMemo(() => {
return StyleSheet.create({
text: {
color: theme.primary,
color: theme.primaryDefault,
fontSize: adaptedFontsize,
lineHeight: adaptedLineheight,
...(fontBold && { fontWeight: StyleConstants.Font.Weight.Bold })

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

@ -83,7 +83,7 @@ const renderNode = ({
<Text
key={index}
style={{
color: accountIndex !== -1 ? theme.blue : theme.primary,
color: accountIndex !== -1 ? theme.blue : theme.primaryDefault,
fontSize: adaptedFontsize,
lineHeight: adaptedLineheight
}}
@ -258,14 +258,14 @@ const ParseHTML = React.memo(
justifyContent: 'center',
marginTop: expanded ? 0 : -adaptedLineheight,
minHeight: 44,
backgroundColor: theme.background
backgroundColor: theme.backgroundDefault
}}
>
<Text
style={{
textAlign: 'center',
...StyleConstants.FontStyle.S,
color: theme.primary
color: theme.primaryDefault
}}
children={t(`HTML.expanded.${expanded.toString()}`, {
hint: expandHint

2
src/components/Separator.tsx
View File

@ -15,7 +15,7 @@ const ComponentSeparator = React.memo(
return (
<View
style={{
backgroundColor: theme.background,
backgroundColor: theme.backgroundDefault,
borderTopColor: theme.border,
borderTopWidth: StyleSheet.hairlineWidth,
marginLeft:

4
src/components/Timeline.tsx
View File

@ -115,8 +115,8 @@ const Timeline: React.FC<Props> = ({
refreshControl: (
<RefreshControl
enabled
colors={[theme.primary]}
progressBackgroundColor={theme.background}
colors={[theme.primaryDefault]}
progressBackgroundColor={theme.backgroundDefault}
refreshing={isFetching || isLoading}
onRefresh={() => refetch()}
/>

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

@ -95,7 +95,7 @@ const TimelineConversation: React.FC<Props> = ({
<Pressable
style={[
styles.base,
{ backgroundColor: theme.background },
{ backgroundColor: theme.backgroundDefault },
conversation.unread && {
borderLeftWidth: StyleConstants.Spacing.XS,
borderLeftColor: theme.blue,

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

@ -65,7 +65,7 @@ const TimelineDefault: React.FC<Props> = ({
style={[
styles.statusView,
{
backgroundColor: theme.background,
backgroundColor: theme.backgroundDefault,
paddingBottom:
disableDetails && disableOnPress
? StyleConstants.Spacing.Global.PagePadding

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

@ -35,9 +35,9 @@ const TimelineEmpty = React.memo(
<Icon
name='Frown'
size={StyleConstants.Font.Size.L}
color={theme.primary}
color={theme.primaryDefault}
/>
<Text style={[styles.error, { color: theme.primary }]}>
<Text style={[styles.error, { color: theme.primaryDefault }]}>
{t('empty.error.message')}
</Text>
<Button
@ -56,9 +56,9 @@ const TimelineEmpty = React.memo(
<Icon
name='Smartphone'
size={StyleConstants.Font.Size.L}
color={theme.primary}
color={theme.primaryDefault}
/>
<Text style={[styles.error, { color: theme.primary }]}>
<Text style={[styles.error, { color: theme.primaryDefault }]}>
{t('empty.success.message')}
</Text>
</>
@ -67,7 +67,7 @@ const TimelineEmpty = React.memo(
}, [mode, i18n.language, status])
return (
<View
style={[styles.base, { backgroundColor: theme.background }]}
style={[styles.base, { backgroundColor: theme.backgroundDefault }]}
children={children}
/>
)

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

@ -56,7 +56,7 @@ const TimelineNotifications: React.FC<Props> = ({
style={[
styles.notificationView,
{
backgroundColor: theme.background,
backgroundColor: theme.backgroundDefault,
paddingBottom: notification.status
? 0
: StyleConstants.Spacing.Global.PagePadding

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

@ -254,7 +254,7 @@ const TimelineRefresh: React.FC<Props> = ({
<>
<View style={styles.container1}>
<Text
style={[styles.explanation, { color: theme.primary }]}
style={[styles.explanation, { color: theme.primaryDefault }]}
onLayout={onLayout}
children={t('refresh.fetchPreviousPage')}
/>
@ -271,14 +271,14 @@ const TimelineRefresh: React.FC<Props> = ({
<Icon
name='ArrowLeft'
size={StyleConstants.Font.Size.M}
color={theme.primary}
color={theme.primaryDefault}
/>
}
/>
</View>
<View style={styles.container2}>
<Text
style={[styles.explanation, { color: theme.primary }]}
style={[styles.explanation, { color: theme.primaryDefault }]}
onLayout={onLayout}
children={t('refresh.refetch')}
/>

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

@ -23,7 +23,7 @@ const TimelineActioned = React.memo(
StackNavigationProp<Nav.TabLocalStackParamList>
>()
const name = account.display_name || account.username
const iconColor = theme.primary
const iconColor = theme.primaryDefault
const content = (content: string) => (
<ParseEmojis content={content} emojis={account.emojis} size='S' />

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

@ -30,7 +30,7 @@ const TimelineActions = React.memo(
const { mode, theme } = useTheme()
const iconColor = theme.secondary
const iconColorAction = (state: boolean) =>
state ? theme.primary : theme.secondary
state ? theme.primaryDefault : theme.secondary
const queryClient = useQueryClient()
const mutation = useTimelineMutation({
@ -194,22 +194,23 @@ const TimelineActions = React.memo(
),
[status.replies_count]
)
const childrenReblog = useMemo(
() => (
const childrenReblog = useMemo(() => {
const color = (state: boolean) => (state ? theme.green : theme.secondary)
return (
<>
<Icon
name='Repeat'
color={
status.visibility === 'private' || status.visibility === 'direct'
? theme.disabled
: iconColorAction(status.reblogged)
: color(status.reblogged)
}
size={StyleConstants.Font.Size.L}
/>
{status.reblogs_count > 0 && (
<Text
style={{
color: iconColorAction(status.reblogged),
color: color(status.reblogged),
fontSize: StyleConstants.Font.Size.M,
marginLeft: StyleConstants.Spacing.XS
}}
@ -218,21 +219,21 @@ const TimelineActions = React.memo(
</Text>
)}
</>
),
[status.reblogged, status.reblogs_count]
)
const childrenFavourite = useMemo(
() => (
)
}, [status.reblogged, status.reblogs_count])
const childrenFavourite = useMemo(() => {
const color = (state: boolean) => (state ? theme.red : theme.secondary)
return (
<>
<Icon
name='Heart'
color={iconColorAction(status.favourited)}
color={color(status.favourited)}
size={StyleConstants.Font.Size.L}
/>
{status.favourites_count > 0 && (
<Text
style={{
color: iconColorAction(status.favourited),
color: color(status.favourited),
fontSize: StyleConstants.Font.Size.M,
marginLeft: StyleConstants.Spacing.XS,
marginTop: 0
@ -242,19 +243,18 @@ const TimelineActions = React.memo(
</Text>
)}
</>
),
[status.favourited, status.favourites_count]
)
const childrenBookmark = useMemo(
() => (
)
}, [status.favourited, status.favourites_count])
const childrenBookmark = useMemo(() => {
const color = (state: boolean) => (state ? theme.yellow : theme.secondary)
return (
<Icon
name='Bookmark'
color={iconColorAction(status.bookmarked)}
color={color(status.bookmarked)}
size={StyleConstants.Font.Size.L}
/>
),
[status.bookmarked]
)
)
}, [status.bookmarked])
return (
<View

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

@ -100,7 +100,7 @@ const AttachmentAudio: React.FC<Props> = ({
alignSelf: 'flex-end',
width: '100%',
height: StyleConstants.Spacing.M + StyleConstants.Spacing.S * 2,
backgroundColor: theme.backgroundOverlay,
backgroundColor: theme.backgroundOverlayInvert,
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
borderRadius: 100,
opacity: sensitiveShown ? 0.35 : undefined

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

@ -47,7 +47,7 @@ const AttachmentUnsupported: React.FC<Props> = ({
<Text
style={[
styles.text,
{ color: attachment.blurhash ? theme.background : theme.primary }
{ color: attachment.blurhash ? theme.backgroundDefault : theme.primaryDefault }
]}
>
{t('shared.attachment.unsupported.text')}

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

@ -34,7 +34,7 @@ const TimelineCard = React.memo(
<View style={styles.right}>
<Text
numberOfLines={2}
style={[styles.rightTitle, { color: theme.primary }]}
style={[styles.rightTitle, { color: theme.primaryDefault }]}
testID='title'
>
{card.title}
@ -42,7 +42,7 @@ const TimelineCard = React.memo(
{card.description ? (
<Text
numberOfLines={1}
style={[styles.rightDescription, { color: theme.primary }]}
style={[styles.rightDescription, { color: theme.primaryDefault }]}
testID='description'
>
{card.description}

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

@ -186,7 +186,7 @@ const TimelinePoll: React.FC<Props> = ({
<Text style={styles.optionText}>
<ParseEmojis content={option.title} emojis={poll.emojis} />
</Text>
<Text style={[styles.optionPercentage, { color: theme.primary }]}>
<Text style={[styles.optionPercentage, { color: theme.primaryDefault }]}>
{poll.votes_count
? Math.round(
(option.votes_count /
@ -246,7 +246,7 @@ const TimelinePoll: React.FC<Props> = ({
style={styles.optionSelection}
name={isSelected(index)}
size={StyleConstants.Font.Size.M}
color={theme.primary}
color={theme.primaryDefault}
/>
<Text style={styles.optionText}>
<ParseEmojis content={option.title} emojis={poll.emojis} />

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

@ -185,7 +185,7 @@ const ScreenActionsRoot = React.memo(
<Animated.View
style={[
styles.overlay,
{ backgroundColor: theme.backgroundOverlay }
{ backgroundColor: theme.backgroundOverlayInvert }
]}
>
<PanGestureHandler onGestureEvent={onGestureEvent}>
@ -194,7 +194,7 @@ const ScreenActionsRoot = React.memo(
styles.container,
styleTop,
{
backgroundColor: theme.background,
backgroundColor: theme.backgroundDefault,
paddingBottom: insets.bottom || StyleConstants.Spacing.L
}
]}

20
src/screens/Announcements.tsx
View File

@ -74,8 +74,8 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
style={[
styles.announcement,
{
borderColor: theme.primary,
backgroundColor: theme.background
borderColor: theme.primaryDefault,
backgroundColor: theme.backgroundDefault
}
]}
>
@ -102,10 +102,10 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
style={[
styles.reaction,
{
borderColor: reaction.me ? theme.disabled : theme.primary,
borderColor: reaction.me ? theme.disabled : theme.primaryDefault,
backgroundColor: reaction.me
? theme.disabled
: theme.background
: theme.backgroundDefault
}
]}
onPress={() => {
@ -130,7 +130,7 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
)}
{reaction.count ? (
<Text
style={[styles.reactionCount, { color: theme.primary }]}
style={[styles.reactionCount, { color: theme.primaryDefault }]}
>
{reaction.count}
</Text>
@ -138,13 +138,13 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
</Pressable>
))}
{/* <Pressable
style={[styles.reaction, { borderColor: theme.primary }]}
style={[styles.reaction, { borderColor: theme.primaryDefault }]}
onPress={() => invisibleTextInputRef.current?.focus()}
>
<Icon
name='Plus'
size={StyleConstants.Font.Size.M}
color={theme.primary}
color={theme.primaryDefault}
/>
</Pressable> */}
</View>
@ -202,7 +202,7 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
blurType={mode}
blurAmount={20}
style={styles.base}
reducedTransparencyFallbackColor={theme.background}
reducedTransparencyFallbackColor={theme.backgroundDefault}
>
<SafeAreaView style={styles.base}>
<View
@ -245,8 +245,8 @@ const ScreenAnnouncements: React.FC<ScreenAnnouncementsProp> = ({
style={[
styles.indicator,
{
borderColor: theme.primary,
backgroundColor: i === index ? theme.primary : undefined,
borderColor: theme.primaryDefault,
backgroundColor: i === index ? theme.primaryDefault : undefined,
marginLeft:
i === query.data.length ? 0 : StyleConstants.Spacing.S
}

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

@ -55,7 +55,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
({ item }: { item: ComposeStateDraft }) => {
return (
<Pressable
style={[styles.draft, { backgroundColor: theme.background }]}
style={[styles.draft, { backgroundColor: theme.backgroundDefault }]}
onPress={async () => {
setCheckingAttachments(true)
let tempDraft = item
@ -103,7 +103,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
<HeaderSharedCreated created_at={item.timestamp} />
<Text
numberOfLines={2}
style={[styles.text, { color: theme.primary }]}
style={[styles.text, { color: theme.primaryDefault }]}
>
{item.text ||
item.spoiler ||
@ -181,7 +181,7 @@ const ComposeDraftsListRoot: React.FC<Props> = ({ timestamp }) => {
visible={checkingAttachments}
children={
<View
style={[styles.modal, { backgroundColor: theme.backgroundOverlay }]}
style={[styles.modal, { backgroundColor: theme.backgroundOverlayInvert }]}
children={
<Text
children='检查附件在服务器的状态…'

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

@ -144,7 +144,7 @@ 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.backgroundOverlay}
fill={theme.backgroundOverlayInvert}
/>
<Circle
stroke={theme.primaryOverlay}
@ -160,7 +160,7 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
</Animated.View>
</PanGestureHandler>
</View>
<Text style={[styles.imageFocusText, { color: theme.primary }]}>
<Text style={[styles.imageFocusText, { color: theme.primaryDefault }]}>
{t('content.editAttachment.content.imageFocus')}
</Text>
</>

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

@ -61,13 +61,13 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
<ScrollView ref={scrollViewRef}>
{mediaDisplay}
<View style={styles.altTextContainer}>
<Text style={[styles.altTextInputHeading, { color: theme.primary }]}>
<Text style={[styles.altTextInputHeading, { color: theme.primaryDefault }]}>
{t('content.editAttachment.content.altText.heading')}
</Text>
<TextInput
style={[
styles.altTextInput,
{ borderColor: theme.border, color: theme.primary }
{ borderColor: theme.border, color: theme.primaryDefault }
]}
onFocus={() => scrollViewRef.current?.scrollToEnd()}
autoCapitalize='none'

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

@ -14,7 +14,7 @@ const ComposePosting = React.memo(
animationType='fade'
visible={composeState.posting}
children={
<View style={{ flex: 1, backgroundColor: theme.backgroundOverlay }} />
<View style={{ flex: 1, backgroundColor: theme.backgroundOverlayInvert }} />
}
/>
)

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

@ -20,7 +20,7 @@ const ComposeActions: React.FC = () => {
if (composeState.poll.active) return theme.disabled
if (composeState.attachments.uploads.length) {
return theme.primary
return theme.primaryDefault
} else {
return theme.secondary
}
@ -43,7 +43,7 @@ const ComposeActions: React.FC = () => {
if (composeState.attachments.uploads.length) return theme.disabled
if (composeState.poll.active) {
return theme.primary
return theme.primaryDefault
} else {
return theme.secondary
}
@ -144,7 +144,7 @@ const ComposeActions: React.FC = () => {
if (!composeState.emoji.emojis) return theme.disabled
if (composeState.emoji.active) {
return theme.primary
return theme.primaryDefault
} else {
return theme.secondary
}
@ -166,7 +166,7 @@ const ComposeActions: React.FC = () => {
<View
style={[
styles.additions,
{ backgroundColor: theme.background, borderTopColor: theme.border }
{ backgroundColor: theme.backgroundDefault, borderTopColor: theme.border }
]}
>
<Pressable
@ -196,7 +196,7 @@ const ComposeActions: React.FC = () => {
name='AlertTriangle'
size={24}
color={
composeState.spoiler.active ? theme.primary : theme.secondary
composeState.spoiler.active ? theme.primaryDefault : theme.secondary
}
/>
}

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

@ -130,8 +130,8 @@ const ComposeAttachments: React.FC = () => {
style={[
styles.duration,
{
color: theme.background,
backgroundColor: theme.backgroundOverlay
color: theme.backgroundDefault,
backgroundColor: theme.backgroundOverlayInvert
}
]}
>
@ -142,7 +142,7 @@ const ComposeAttachments: React.FC = () => {
<View
style={[
styles.uploading,
{ backgroundColor: theme.backgroundOverlay }
{ backgroundColor: theme.backgroundOverlayInvert }
]}
>
<Circle
@ -196,7 +196,7 @@ const ComposeAttachments: React.FC = () => {
styles.container,
{
width: DEFAULT_HEIGHT,
backgroundColor: theme.backgroundOverlay
backgroundColor: theme.backgroundOverlayInvert
}
]}
onPress={async () => {
@ -238,9 +238,9 @@ const ComposeAttachments: React.FC = () => {
<Icon
name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}
size={StyleConstants.Font.Size.L}
color={theme.primary}
color={theme.primaryDefault}
/>
<Text style={[styles.sensitiveText, { color: theme.primary }]}>
<Text style={[styles.sensitiveText, { color: theme.primaryDefault }]}>
{t('content.root.footer.attachments.sensitive')}
</Text>
</Pressable>

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

@ -54,7 +54,7 @@ const ComposePoll: React.FC = () => {
styles.textInput,
{
borderColor: theme.border,
color: hasConflict ? theme.red : theme.primary
color: hasConflict ? theme.red : theme.primaryDefault
}
]}
placeholder={

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

@ -17,7 +17,7 @@ const ComposeSpoilerInput: React.FC = () => {
style={[
styles.spoilerInput,
{
color: theme.primary,
color: theme.primaryDefault,
borderBottomColor: theme.border
}
]}

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

@ -17,7 +17,7 @@ const ComposeTextInput: React.FC = () => {
style={[
styles.textInput,
{
color: theme.primary,
color: theme.primaryDefault,
borderBottomColor: theme.border
}
]}

2
src/screens/Tabs.tsx
View File

@ -96,7 +96,7 @@ const ScreenTabs = React.memo(
)
const tabBarOptions = useMemo(
() => ({
activeTintColor: theme.primary,
activeTintColor: theme.primaryDefault,
inactiveTintColor: theme.secondary,
showLabel: false,
...(Platform.OS === 'android' && { keyboardHidesTabBar: true })

7
src/screens/Tabs/Me/Fontsize.tsx
View File

@ -90,7 +90,8 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
initialSize === size
? StyleConstants.Font.Weight.Bold
: undefined,
color: initialSize === size ? theme.primary : theme.secondary,
color:
initialSize === size ? theme.primaryDefault : theme.secondary,
borderWidth: StyleSheet.hairlineWidth,
borderColor: theme.border
}
@ -105,7 +106,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
return (
<ScrollView scrollEnabled={false}>
<Text style={[styles.header, { color: theme.primary }]}>
<Text style={[styles.header, { color: theme.primaryDefault }]}>
{t('content.showcase')}
</Text>
<View>
@ -119,7 +120,7 @@ const ScreenMeSettingsFontsize: React.FC<StackScreenProps<
extraMarginRight={-StyleConstants.Spacing.Global.PagePadding}
/>
</View>
<Text style={[styles.header, { color: theme.primary }]}>
<Text style={[styles.header, { color: theme.primaryDefault }]}>
{t('content.availableSizes')}
</Text>
<View style={styles.sizesDemo}>{sizesDemo}</View>

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

@ -22,7 +22,7 @@ const SettingsDev: React.FC = () => {
style={{
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
...StyleConstants.FontStyle.S,
color: theme.primary
color: theme.primaryDefault
}}
>
{instances[instanceActive]?.token}

4
src/screens/Tabs/Me/Switch/Root.tsx
View File

@ -56,7 +56,7 @@ const ScreenMeSwitchRoot: React.FC = () => {
return (
<ScrollView style={styles.base} keyboardShouldPersistTaps='always'>
<View style={[styles.firstSection, { borderBottomColor: theme.border }]}>
<Text style={[styles.header, { color: theme.primary }]}>
<Text style={[styles.header, { color: theme.primaryDefault }]}>
{t('content.existing')}
</Text>
<View style={styles.accountButtons}>
@ -87,7 +87,7 @@ const ScreenMeSwitchRoot: React.FC = () => {
</View>
<View style={styles.secondSection}>
<Text style={[styles.header, { color: theme.primary }]}>
<Text style={[styles.header, { color: theme.primaryDefault }]}>
{t('content.new')}
</Text>
<ComponentInstance disableHeaderImage goBack />

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

@ -70,7 +70,7 @@ const AccountAttachments = React.memo(
<View
style={{
marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
backgroundColor: theme.backgroundOverlay,
backgroundColor: theme.backgroundOverlayInvert,
width: width,
height: width,
justifyContent: 'center',

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

@ -34,7 +34,7 @@ const AccountInformationFields = React.memo(
<Icon
name='CheckCircle'
size={StyleConstants.Font.Size.M}
color={theme.primary}
color={theme.primaryDefault}
style={styles.fieldCheck}
/>
) : null}

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

@ -24,7 +24,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
<View style={[styles.stats, { flexDirection: 'row' }]}>
{account ? (
<Text
style={[styles.stat, { color: theme.primary }]}
style={[styles.stat, { color: theme.primaryDefault }]}
children={t('content.summary.statuses_count', {
count: account.statuses_count || 0
})}
@ -46,7 +46,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
)}
{account ? (
<Text
style={[styles.stat, { color: theme.primary, textAlign: 'right' }]}
style={[styles.stat, { color: theme.primaryDefault, textAlign: 'right' }]}
children={t('content.summary.following_count', {
count: account.following_count
})}
@ -73,7 +73,7 @@ const AccountInformationStats: React.FC<Props> = ({ account, myInfo }) => {
)}
{account ? (
<Text
style={[styles.stat, { color: theme.primary, textAlign: 'center' }]}
style={[styles.stat, { color: theme.primaryDefault, textAlign: 'center' }]}
children={t('content.summary.followers_count', {
count: account.followers_count
})}

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

@ -49,7 +49,7 @@ const AccountNav: React.FC<Props> = ({ scrollY, account }) => {
style={[
styles.base,
styleOpacity,
{ backgroundColor: theme.background, height: headerHeight }
{ backgroundColor: theme.backgroundDefault, height: headerHeight }
]}
>
<View

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

@ -73,7 +73,7 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
style={[
styles.emptyDefault,
styles.emptyFontSize,
{ color: theme.primary }
{ color: theme.primaryDefault }
]}
>
<Trans
@ -81,25 +81,25 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
components={{ bold: <Text style={styles.emptyFontBold} /> }}
/>
</Text>
<Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
<Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
{t('content.empty.advanced.header')}
</Text>
<Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
<Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
<Text style={{ color: theme.secondary }}>@username@domain</Text>
{' '}
{t('content.empty.advanced.example.account')}
</Text>
<Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
<Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
<Text style={{ color: theme.secondary }}>#example</Text>
{' '}
{t('content.empty.advanced.example.hashtag')}
</Text>
<Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
<Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
<Text style={{ color: theme.secondary }}>URL</Text>
{' '}
{t('content.empty.advanced.example.statusLink')}
</Text>
<Text style={[styles.emptyAdvanced, { color: theme.primary }]}>
<Text style={[styles.emptyAdvanced, { color: theme.primaryDefault }]}>
<Text style={{ color: theme.secondary }}>URL</Text>
{' '}
{t('content.empty.advanced.example.accountLink')}
@ -113,9 +113,9 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
const sectionHeader = useCallback(
({ section: { translation } }) => (
<View
style={[styles.sectionHeader, { backgroundColor: theme.background }]}
style={[styles.sectionHeader, { backgroundColor: theme.backgroundDefault }]}
>
<Text style={[styles.sectionHeaderText, { color: theme.primary }]}>
<Text style={[styles.sectionHeaderText, { color: theme.primaryDefault }]}>
{translation}
</Text>
</View>
@ -126,7 +126,7 @@ const TabSharedSearch: React.FC<SharedSearchProp> = ({
({ section: { data, translation } }) =>
!data.length ? (
<View
style={[styles.sectionFooter, { backgroundColor: theme.background }]}
style={[styles.sectionFooter, { backgroundColor: theme.backgroundDefault }]}
>
<Text style={[styles.sectionFooterText, { color: theme.secondary }]}>
<Trans

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

@ -14,11 +14,11 @@ import { debounce } from 'lodash'
import React from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { Platform, StyleSheet, Text, TextInput, View } from 'react-native'
import { NativeStackNavigationOptions } from 'react-native-screens/lib/typescript/native-stack'
import { NativeStackNavigationOptions } from 'react-native-screens/lib/typescript'
import {
NativeStackNavigationEventMap,
NativeStackNavigatorProps
} from 'react-native-screens/lib/typescript/native-stack/types'
} from 'react-native-screens/lib/typescript/types'
export type BaseScreens =
| Nav.TabLocalStackParamList
@ -103,7 +103,7 @@ const sharedScreens = (
<Text
style={{
...StyleConstants.FontStyle.M,
color: theme.primary,
color: theme.primaryDefault,
fontWeight: StyleConstants.Font.Weight.Bold
}}
/>
@ -153,7 +153,7 @@ const sharedScreens = (
style={[
styles.textInput,
{
color: theme.primary
color: theme.primaryDefault
}
]}
children={t('sharedSearch:content.header.prefix')}
@ -166,7 +166,7 @@ const sharedScreens = (
styles.textInput,
{
flex: 1,
color: theme.primary,
color: theme.primaryDefault,
paddingLeft: StyleConstants.Spacing.XS
}
]}

51
src/utils/styles/themes.ts
View File

@ -1,16 +1,17 @@
import { DefaultTheme, DarkTheme } from '@react-navigation/native'
export type ColorDefinitions =
| 'primary'
| 'primaryDefault'
| 'primaryOverlay'
| 'secondary'
| 'disabled'
| 'blue'
| 'red'
| 'background'
| 'backgroundGradientStart'
| 'backgroundGradientEnd'
| 'backgroundOverlay'
| 'green'
| 'yellow'
| 'backgroundDefault'
| 'backgroundOverlayDefault'
| 'backgroundOverlayInvert'
| 'border'
| 'shimmerDefault'
| 'shimmerHighlight'
@ -21,7 +22,7 @@ const themeColors: {
dark: string
}
} = {
primary: {
primaryDefault: {
light: 'rgb(18, 18, 18)',
dark: 'rgb(180, 180, 180)'
},
@ -45,27 +46,33 @@ const themeColors: {
light: 'rgb(225, 45, 35)',
dark: 'rgb(225, 78, 79)'
},
green: {
light: 'rgb(18, 158, 80)',
dark: 'rgb(18, 158, 80)'
},
yellow: {
light: 'rgb(230, 166, 30)',
dark: 'rgb(200, 145, 25)'
},
background: {
backgroundDefault: {
light: 'rgb(250, 250, 250)',
dark: 'rgb(18, 18, 18)'
},
backgroundGradientStart: {
backgroundOverlayDefault: {
light: 'rgba(250, 250, 250, 0.5)',
dark: 'rgba(18, 18, 18, 0.5)'
dark: 'rgba(0, 0, 0, 0.5)'
},
backgroundGradientEnd: {
light: 'rgba(250, 250, 250, 1)',
dark: 'rgba(18, 18, 18, 1)'
},
backgroundOverlay: {
backgroundOverlayInvert: {
light: 'rgba(25, 25, 25, 0.5)',
dark: 'rgba(0, 0, 0, 0.5)'
},
border: {
light: 'rgba(25, 25, 25, 0.3)',
dark: 'rgba(255, 255, 255, 0.3)'
},
shimmerDefault: {
light: 'rgba(25, 25, 25, 0.05)',
dark: 'rgba(250, 250, 250, 0.05)'
@ -91,10 +98,10 @@ const themes = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: themeColors.primary.light,
background: themeColors.background.light,
card: themeColors.background.light,
text: themeColors.primary.light,
primary: themeColors.primaryDefault.light,
background: themeColors.backgroundDefault.light,
card: themeColors.backgroundDefault.light,
text: themeColors.primaryDefault.light,
border: themeColors.border.light,
notification: themeColors.red.light
}
@ -103,10 +110,10 @@ const themes = {
...DarkTheme,
colors: {
...DarkTheme.colors,
primary: themeColors.primary.dark,
background: themeColors.background.dark,
card: themeColors.background.dark,
text: themeColors.primary.dark,
primary: themeColors.primaryDefault.dark,
background: themeColors.backgroundDefault.dark,
card: themeColors.backgroundDefault.dark,
text: themeColors.primaryDefault.dark,
border: themeColors.border.dark,
notification: themeColors.red.dark
}