Fixed notification

src/components/Timelines/Timeline/Notifications.tsx

@@ -55,45 +55,54 @@ const TimelineNotifications: React.FC<Props> = ({
         notification
       />
 
-      <View style={styles.header}>
+      <View
-        <TimelineAvatar queryKey={queryKey} account={actualAccount} />
+        style={{
-        <TimelineHeaderNotification notification={notification} />
+          opacity:
-      </View>
+            notification.type === 'follow' || notification.type === 'mention'
-
+              ? 1
-      {notification.status ? (
+              : 0.5
-        <View
+        }}
-          style={{
+      >
-            paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+        <View style={styles.header}>
-            paddingLeft: highlighted
+          <TimelineAvatar queryKey={queryKey} account={actualAccount} />
-              ? 0
+          <TimelineHeaderNotification notification={notification} />
-              : StyleConstants.Avatar.M + StyleConstants.Spacing.S
-          }}
-        >
-          {notification.status.content.length > 0 && (
-            <TimelineContent
-              status={notification.status}
-              highlighted={highlighted}
-            />
-          )}
-          {notification.status.poll && (
-            <TimelinePoll
-              queryKey={queryKey}
-              poll={notification.status.poll}
-              reblog={false}
-              sameAccount={notification.account.id === localAccountId}
-            />
-          )}
-          {notification.status.media_attachments.length > 0 && (
-            <TimelineAttachment
-              status={notification.status}
-              contentWidth={contentWidth}
-            />
-          )}
-          {notification.status.card && (
-            <TimelineCard card={notification.status.card} />
-          )}
         </View>
-      ) : null}
+
+        {notification.status ? (
+          <View
+            style={{
+              paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+              paddingLeft: highlighted
+                ? 0
+                : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+            }}
+          >
+            {notification.status.content.length > 0 && (
+              <TimelineContent
+                status={notification.status}
+                highlighted={highlighted}
+              />
+            )}
+            {notification.status.poll && (
+              <TimelinePoll
+                queryKey={queryKey}
+                poll={notification.status.poll}
+                reblog={false}
+                sameAccount={notification.account.id === localAccountId}
+              />
+            )}
+            {notification.status.media_attachments.length > 0 && (
+              <TimelineAttachment
+                status={notification.status}
+                contentWidth={contentWidth}
+              />
+            )}
+            {notification.status.card && (
+              <TimelineCard card={notification.status.card} />
+            )}
+          </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,