From 92917ac3e5e55a152cecee050ab4cc649a7db4e8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 May 2020 14:44:23 -0500
Subject: [PATCH] Style improvements, star icon -> thumbs up

---
 app/gabsocial/components/status_action_bar.js |  2 +-
 .../features/status/components/action_bar.js  | 15 +++++++++++---
 .../status/components/detailed_status.js      | 20 +++++++------------
 .../components/status_interaction_bar.js      | 10 +++++++---
 app/gabsocial/features/status/index.js        |  3 ---
 app/styles/gabsocial/components.scss          |  1 +
 .../gabsocial/components/emoji-reacts.scss    |  6 ++++++
 7 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/app/gabsocial/components/status_action_bar.js b/app/gabsocial/components/status_action_bar.js
index 7c5620876..3bd191c22 100644
--- a/app/gabsocial/components/status_action_bar.js
+++ b/app/gabsocial/components/status_action_bar.js
@@ -294,7 +294,7 @@ class StatusActionBar extends ImmutablePureComponent {
           {reblogCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='detailed-status__link'>{reblogCount}</Link>}
         </div>
         <div className='status__action-bar__counter'>
-          <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
+          <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='thumbs-up' onClick={this.handleFavouriteClick} />
           {favoriteCount !== 0 && <span className='detailed-status__link'>{favoriteCount}</span>}
         </div>
         {shareButton}
diff --git a/app/gabsocial/features/status/components/action_bar.js b/app/gabsocial/features/status/components/action_bar.js
index 5432dd0e5..e7e2a1c98 100644
--- a/app/gabsocial/features/status/components/action_bar.js
+++ b/app/gabsocial/features/status/components/action_bar.js
@@ -232,9 +232,18 @@ class ActionBar extends React.PureComponent {
 
     return (
       <div className='detailed-status__action-bar'>
-        <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
-        <div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
-        <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
+        <div className='detailed-status__button'>
+          <IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} />
+          Reply
+        </div>
+        <div className='detailed-status__button'>
+          <IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
+          Boost
+        </div>
+        <div className='detailed-status__button'>
+          <IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='thumbs-up' onClick={this.handleFavouriteClick} />
+          Like
+        </div>
         {shareButton}
 
         <div className='detailed-status__action-bar-dropdown'>
diff --git a/app/gabsocial/features/status/components/detailed_status.js b/app/gabsocial/features/status/components/detailed_status.js
index 9372c9e47..b18ad11e0 100644
--- a/app/gabsocial/features/status/components/detailed_status.js
+++ b/app/gabsocial/features/status/components/detailed_status.js
@@ -14,6 +14,7 @@ import scheduleIdleTask from '../../ui/util/schedule_idle_task';
 import classNames from 'classnames';
 import Icon from 'gabsocial/components/icon';
 import PollContainer from 'gabsocial/containers/poll_container';
+import { StatusInteractionBar } from './status_interaction_bar';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
@@ -92,7 +93,6 @@ export default class DetailedStatus extends ImmutablePureComponent {
     let applicationLink = '';
     let reblogLink = '';
     let reblogIcon = 'retweet';
-    let favouriteLink = '';
 
     if (this.props.measureHeight) {
       outerStyle.height = `${this.state.height}px`;
@@ -169,15 +169,6 @@ export default class DetailedStatus extends ImmutablePureComponent {
       );
     }
 
-    favouriteLink = (
-      <span className='detailed-status__link'>
-        <Icon id='star' />
-        <span className='detailed-status__favorites'>
-          <FormattedNumber value={status.get('favourites_count')} />
-        </span>
-      </span>
-    );
-
     return (
       <div style={outerStyle}>
         <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
@@ -197,9 +188,12 @@ export default class DetailedStatus extends ImmutablePureComponent {
           {media}
 
           <div className='detailed-status__meta'>
-            <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
-              <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
-            </a>{applicationLink} · {reblogLink} · {favouriteLink}
+            <StatusInteractionBar status={status} />
+            <div>
+              {reblogLink} {applicationLink} · <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
+                <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
+              </a>
+            </div>
           </div>
         </div>
       </div>
diff --git a/app/gabsocial/features/status/components/status_interaction_bar.js b/app/gabsocial/features/status/components/status_interaction_bar.js
index 9b1cb4c3b..ac674b07c 100644
--- a/app/gabsocial/features/status/components/status_interaction_bar.js
+++ b/app/gabsocial/features/status/components/status_interaction_bar.js
@@ -22,9 +22,7 @@ export class StatusInteractionBar extends React.Component {
       acc + cur.get('count')
     ), 0);
 
-    if (count < 1) return null;
-
-    return (
+    const EmojiReactsContainer = () => (
       <div className='emoji-reacts-container'>
         <div className='emoji-reacts'>
           {emojiReacts.map((e, i) => (
@@ -42,6 +40,12 @@ export class StatusInteractionBar extends React.Component {
         </div>
       </div>
     );
+
+    return (
+      <div className='status-interaction-bar'>
+        {count > 0 && <EmojiReactsContainer />}
+      </div>
+    );
   }
 
 }
diff --git a/app/gabsocial/features/status/index.js b/app/gabsocial/features/status/index.js
index 424dda420..4b9fc2436 100644
--- a/app/gabsocial/features/status/index.js
+++ b/app/gabsocial/features/status/index.js
@@ -43,7 +43,6 @@ import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
 import Icon from 'gabsocial/components/icon';
 import { getSettings } from 'gabsocial/actions/settings';
-import { StatusInteractionBar } from './components/status_interaction_bar';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -493,8 +492,6 @@ class Status extends ImmutablePureComponent {
                 onToggleMediaVisibility={this.handleToggleMediaVisibility}
               />
 
-              <StatusInteractionBar status={status} />
-
               <ActionBar
                 status={status}
                 onReply={this.handleReplyClick}
diff --git a/app/styles/gabsocial/components.scss b/app/styles/gabsocial/components.scss
index 7f152b0c6..2f007f28c 100644
--- a/app/styles/gabsocial/components.scss
+++ b/app/styles/gabsocial/components.scss
@@ -768,6 +768,7 @@
   color: $dark-text-color;
   font-size: 14px;
   line-height: 18px;
+  display: flex;
 }
 
 .detailed-status__action-bar {
diff --git a/app/styles/gabsocial/components/emoji-reacts.scss b/app/styles/gabsocial/components/emoji-reacts.scss
index 71a5c18e1..261ce5155 100644
--- a/app/styles/gabsocial/components/emoji-reacts.scss
+++ b/app/styles/gabsocial/components/emoji-reacts.scss
@@ -24,8 +24,14 @@
   flex-direction: row-reverse;
 }
 
+.status-interaction-bar {
+  margin-right: auto;
+  min-height: 20px;
+}
+
 .emoji-reacts-container {
   display: inline-flex;
+  margin-right: auto;
 
   &:hover {
     .emoji-react {