Improve detailed status action buttons

app/gabsocial/components/icon_button.js

@@ -64,6 +64,7 @@ export default class IconButton extends React.PureComponent {
       pressed,
       tabIndex,
       title,
+      text,
     } = this.props;
 
     const classes = classNames(className, 'icon-button', {
@@ -84,11 +85,13 @@ export default class IconButton extends React.PureComponent {
           title={title}
           className={classes}
           onClick={this.handleClick}
-          style={style}
           tabIndex={tabIndex}
           disabled={disabled}
         >
-          <Icon id={icon} fixedWidth aria-hidden='true' />
+          <div style={style}>
+            <Icon id={icon} fixedWidth aria-hidden='true' />
+          </div>
+          {text && <span className='icon_button__text'>{text}</span>}
         </button>
       );
     }
@@ -103,11 +106,13 @@ export default class IconButton extends React.PureComponent {
             title={title}
             className={classes}
             onClick={this.handleClick}
-            style={style}
             tabIndex={tabIndex}
             disabled={disabled}
           >
-            <Icon id={icon} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />
+            <div style={style}>
+              <Icon id={icon} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />
+            </div>
+            {text && <span className='icon_button__text'>{text}</span>}
           </button>
         )}
       </Motion>

app/gabsocial/features/status/components/action_bar.js

@@ -247,12 +247,22 @@ 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} />
-          Reply
+          <IconButton
+            title={intl.formatMessage(messages.reply)}
+            icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon}
+            onClick={this.handleReplyClick}
+            text={intl.formatMessage(messages.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
+          <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}
+            text='Boost'
+          />
         </div>
         <div className='detailed-status__button detailed-status__button--favourite'>
           <div className='emoji-react-selector'>
@@ -264,8 +274,14 @@ class ActionBar extends React.PureComponent {
               />
             ))}
           </div>
-          <IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='thumbs-up' onClick={this.handleFavouriteClick} />
-          Like
+          <IconButton
+            className='star-icon'
+            animate active={status.get('favourited')}
+            title={intl.formatMessage(messages.favourite)}
+            icon='thumbs-up'
+            onClick={this.handleFavouriteClick}
+            text='Like'
+          />
         </div>
         {shareButton}
 

app/styles/application.scss

@@ -33,6 +33,7 @@
 @import 'gabsocial/components/sidebar-menu';
 @import 'gabsocial/components/hotkeys-modal';
 @import 'gabsocial/components/emoji-reacts';
+@import 'gabsocial/components/detailed-status';
 
 @import 'gabsocial/polls';
 @import 'gabsocial/introduction';

app/styles/gabsocial/components.scss

@@ -119,7 +119,7 @@
   display: inline-block;
   padding: 0;
   color: $gab-secondary-text;
-  border: none;
+  border: 0;
   background: transparent;
   cursor: pointer;
   transition: color 100ms ease-in;
@@ -718,83 +718,6 @@
   width: 23.15px;
 }
 
-.detailed-status__action-bar-dropdown {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.detailed-status {
-  background: lighten($ui-base-color, 4%);
-  padding: 14px 10px;
-
-  &--flex {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: flex-start;
-
-    .status__content,
-    .detailed-status__meta {
-      flex: 100%;
-    }
-  }
-
-  .status__content {
-    font-size: 19px;
-    line-height: 24px;
-
-    .emojione {
-      width: 24px;
-      height: 24px;
-      margin: -1px 0 0;
-    }
-
-    .status__content__spoiler-link {
-      line-height: 24px;
-      margin: -1px 0 0;
-    }
-  }
-
-  .video-player {
-    margin-top: 8px;
-  }
-}
-
-.detailed-status__meta {
-  margin-top: 15px;
-  color: $dark-text-color;
-  font-size: 14px;
-  line-height: 18px;
-  display: flex;
-}
-
-.detailed-status__action-bar {
-  background: lighten($ui-base-color, 4%);
-  border-top: 1px solid lighten($ui-base-color, 8%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-  display: flex;
-  flex-direction: row;
-  padding: 10px 0;
-}
-
-.detailed-status__link {
-  color: $action-button-color;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: 13px;
-}
-
-.detailed-status__favorites,
-.detailed-status__reblogs {
-  display: inline-block;
-  font-weight: 500;
-  font-size: 12px;
-  margin-left: 6px;
-}
-
 .reply-indicator__content {
   color: $gab-default-text-light;
   font-size: 14px;

app/styles/gabsocial/components/detailed-status.scss

@@ -0,0 +1,92 @@
+.detailed-status__action-bar-dropdown {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.detailed-status {
+  background: lighten($ui-base-color, 4%);
+  padding: 14px 10px;
+
+  &--flex {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .status__content,
+    .detailed-status__meta {
+      flex: 100%;
+    }
+  }
+
+  .status__content {
+    font-size: 19px;
+    line-height: 24px;
+
+    .emojione {
+      width: 24px;
+      height: 24px;
+      margin: -1px 0 0;
+    }
+
+    .status__content__spoiler-link {
+      line-height: 24px;
+      margin: -1px 0 0;
+    }
+  }
+
+  .video-player {
+    margin-top: 8px;
+  }
+}
+
+.detailed-status__meta {
+  margin-top: 15px;
+  color: $dark-text-color;
+  font-size: 14px;
+  line-height: 18px;
+  display: flex;
+}
+
+.detailed-status__action-bar {
+  background: lighten($ui-base-color, 4%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  display: flex;
+  flex-direction: row;
+  padding: 10px 0;
+}
+
+.detailed-status__link {
+  color: $action-button-color;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 13px;
+}
+
+.detailed-status__favorites,
+.detailed-status__reblogs {
+  display: inline-block;
+  font-weight: 500;
+  font-size: 12px;
+  margin-left: 6px;
+}
+
+.detailed-status__button {
+  text-align: left;
+  padding-left: 10px;
+
+  .icon-button {
+    display: inline-flex;
+    align-items: center;
+
+    .icon_button__text {
+      font-size: 14px;
+      padding-left: 3px;
+      transform: translateY(-1px);
+    }
+  }
+}