Fixed notification

src/components/Timelines/Timeline/Notifications.tsx

@@ -55,6 +55,14 @@ const TimelineNotifications: React.FC<Props> = ({
         notification
       />
 
+      <View
+        style={{
+          opacity:
+            notification.type === 'follow' || notification.type === 'mention'
+              ? 1
+              : 0.5
+        }}
+      >
         <View style={styles.header}>
           <TimelineAvatar queryKey={queryKey} account={actualAccount} />
           <TimelineHeaderNotification notification={notification} />
@@ -94,6 +102,7 @@ const TimelineNotifications: React.FC<Props> = ({
             )}
           </View>
         ) : null}
+      </View>
 
       {notification.status && (
         <View

src/components/Timelines/Timeline/Shared/Actioned.tsx

@@ -62,7 +62,7 @@ const TimelineActioned: React.FC<Props> = ({
         <Feather
           name='bar-chart-2'
           size={StyleConstants.Font.Size.S}
-          color='black'
+          color={iconColor}
           style={styles.icon}
         />
       )
@@ -87,11 +87,7 @@ const TimelineActioned: React.FC<Props> = ({
       {content && (
         <View style={styles.content}>
           {account.emojis ? (
-            <Emojis
+            <Emojis content={content} emojis={account.emojis} size='S' />
-              content={content}
-              emojis={account.emojis}
-              size='S'
-            />
           ) : (
             <Text>{content}</Text>
           )}

src/components/Timelines/Timeline/Shared/HeaderConversation.tsx

@@ -134,7 +134,8 @@ const styles = StyleSheet.create({
     width: '80%'
   },
   name: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    alignItems: 'center'
   },
   account: {
     flexShrink: 1,

src/components/Timelines/Timeline/Shared/HeaderNotification.tsx

@@ -17,10 +17,12 @@ export interface Props {
 }
 
 const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
-  const name =
+  const actualAccount = notification.status
-    notification.account.display_name || notification.account.username
+    ? notification.status.account
-  const emojis = notification.account.emojis
+    : notification.account
-  const account = notification.account.acct
+  const name = actualAccount.display_name || actualAccount.username
+  const emojis = actualAccount.emojis
+  const account = actualAccount.acct
   const { theme } = useTheme()
 
   const [since, setSince] = useState(relativeTime(notification.created_at))
@@ -123,14 +125,9 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
   return (
     <View style={styles.base}>
       <View style={styles.nameAndMeta}>
-        <View style={styles.name}>
+        <View style={styles.nameAndAccount}>
           {emojis?.length ? (
-            <Emojis
+            <Emojis content={name} emojis={emojis} size='M' fontBold={true} />
-              content={name}
-              emojis={emojis}
-              size='M'
-              fontBold={true}
-            />
           ) : (
             <Text
               numberOfLines={1}
@@ -190,8 +187,9 @@ const styles = StyleSheet.create({
   nameAndMeta: {
     width: '80%'
   },
-  name: {
+  nameAndAccount: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    alignItems: 'center'
   },
   nameWithoutEmoji: {
     ...StyleConstants.FontStyle.M,