From fc8afb9000b34a8d6a987bd5c9076dfa00e3bf6c Mon Sep 17 00:00:00 2001
From: Travis Kohlbeck <me+git@travisk.info>
Date: Wed, 18 Dec 2019 13:03:16 -0500
Subject: [PATCH] updates appearance of post/retoot authors

---
 src/components/Post/Post.styles.tsx |  9 ++++++
 src/components/Post/Post.tsx        | 43 +++++++++++++++++------------
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/components/Post/Post.styles.tsx b/src/components/Post/Post.styles.tsx
index 362d55a..1fa5377 100644
--- a/src/components/Post/Post.styles.tsx
+++ b/src/components/Post/Post.styles.tsx
@@ -81,6 +81,15 @@ export const styles = (theme: Theme) =>
             paddingTop: theme.spacing.unit,
             paddingBottom: theme.spacing.unit
         },
+        postAuthorAccount: {
+            color: theme.palette.grey[500],
+            marginLeft: theme.spacing.unit * 0.5,
+        },
+        postReblogIcon: {
+            marginBottom: theme.spacing.unit * -0.5,
+            marginLeft: theme.spacing.unit * 0.5,
+            marginRight: theme.spacing.unit * 0.5,
+        },
         postAuthorEmoji: {
             height: theme.typography.fontSize,
             verticalAlign: "middle"
diff --git a/src/components/Post/Post.tsx b/src/components/Post/Post.tsx
index a6d2621..cc8fc5b 100644
--- a/src/components/Post/Post.tsx
+++ b/src/components/Post/Post.tsx
@@ -398,21 +398,34 @@ export class Post extends React.Component<any, IPostState> {
         const { classes } = this.props;
         if (post.reblog) {
             let author = post.reblog.account;
-            let origString = `<span>${author.display_name ||
-                author.username} (@${author.acct}) 🔄 ${post.account
-                .display_name || post.account.username}</span>`;
             let emojis = author.emojis;
             emojis.concat(post.account.emojis);
-            return emojifyString(origString, emojis, classes.postAuthorEmoji);
+            return (
+                <>
+                    <span>
+                        {emojifyString(author.display_name || author.username, author.emojis, classes.postAuthorEmoji)}
+                    </span>
+                    <span className={classes.postAuthorAccount}>
+                        @{emojifyString(author.acct, author.emojis, classes.postAuthorEmoji)}
+                    </span>
+                    <AutorenewIcon fontSize='small' className={classes.postReblogIcon} />
+                    <span>
+                        {emojifyString(post.account.display_name || post.account.username, emojis, classes.postAuthorEmoji)}
+                    </span>
+                </>
+            )
         } else {
             let author = post.account;
-            let origString = `<span>${author.display_name ||
-                author.username} (@${author.acct})</span>`;
-            return emojifyString(
-                origString,
-                author.emojis,
-                classes.postAuthorEmoji
-            );
+            return (
+                <>
+                    <span>
+                        {emojifyString(author.display_name || author.username, author.emojis, classes.postAuthorEmoji)}
+                    </span>
+                    <span className={classes.postAuthorAccount}>
+                        @{emojifyString(author.acct, author.emojis, classes.postAuthorEmoji)}
+                    </span>
+                </>
+            )
         }
     }
 
@@ -656,13 +669,7 @@ export class Post extends React.Component<any, IPostState> {
                                 </IconButton>
                             </Tooltip>
                         }
-                        title={
-                            <Typography
-                                dangerouslySetInnerHTML={{
-                                    __html: this.getReblogAuthors(post)
-                                }}
-                            />
-                        }
+                        title={<Typography>{this.getReblogAuthors(post)}</Typography>}
                         subheader={moment(post.created_at).format(
                             "MMMM Do YYYY [at] h:mm A"
                         )}