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

Update colour naming

Browse Source 
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
48 changed files with 162 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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