From 06c4f88802ad4f5e7e56fe34aa79a98a4176b9fe Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 8 Jul 2020 21:42:34 -0500
Subject: [PATCH] DetailedStatus: Small reblog tweaks

---
 .../status/components/status_interaction_bar.js |  4 ++--
 app/styles/components/detailed-status.scss      | 17 -----------------
 app/styles/components/emoji-reacts.scss         | 14 ++++++++++++++
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/app/soapbox/features/status/components/status_interaction_bar.js b/app/soapbox/features/status/components/status_interaction_bar.js
index 4572fdb7f..b81ce6087 100644
--- a/app/soapbox/features/status/components/status_interaction_bar.js
+++ b/app/soapbox/features/status/components/status_interaction_bar.js
@@ -27,9 +27,9 @@ export class StatusInteractionBar extends React.Component {
     const { status } = this.props;
     if (status.get('reblogs_count')) {
       return (
-        <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='reblogs'>
+        <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='emoji-react emoji-react--reblogs'>
           <Icon id='retweet' />
-          <span className='reblogs__count'>
+          <span className='emoji-reacts__count'>
             <FormattedNumber value={status.get('reblogs_count')} />
           </span>
         </Link>
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index f973c7f99..9838278f9 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -71,23 +71,6 @@
   font-size: 13px;
 }
 
-.reblogs {
-  color: var(--highlight-text-color);
-  text-decoration: none;
-  vertical-align: middle;
-  display: inline-flex;
-
-  i {
-    font-size: 20px;
-    margin-right: 0.2em;
-  }
-
-  &__count {
-    font-weight: bold;
-    font-size: 12px;
-  }
-}
-
 .detailed-status__button {
   padding: 10px 0;
 
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index aa7c80b11..452b1d350 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/app/styles/components/emoji-reacts.scss
@@ -19,6 +19,19 @@
   }
 }
 
+.emoji-react--reblogs {
+  color: var(--primary-text-color--faint);
+  text-decoration: none;
+  vertical-align: middle;
+  display: inline-flex;
+
+  i.fa {
+    color: var(--highlight-text-color);
+    font-size: 20px;
+    margin-right: 0.2em;
+  }
+}
+
 .emoji-reacts {
   display: inline-flex;
   flex-direction: row-reverse;
@@ -52,6 +65,7 @@
 .emoji-react__count {
   font-size: 12px;
   font-weight: bold;
+  transform: translateY(2px);
 }
 
 .emoji-react-selector {