DetailedStatus: Small reblog tweaks

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>

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;
 

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 {