Update colour naming

Fixed #73
Fixed #58
Fixed #47

src/components/Timeline/Shared/Actioned.tsx

@@ -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' />

src/components/Timeline/Shared/Actions.tsx

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

src/components/Timeline/Shared/Attachment/Audio.tsx

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

src/components/Timeline/Shared/Attachment/Unsupported.tsx

@@ -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')}

src/components/Timeline/Shared/Card.tsx

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

src/components/Timeline/Shared/Poll.tsx

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