StatusActionBar: update icons

app/soapbox/components/icon_button.js

@@ -106,6 +106,7 @@ export default class IconButton extends React.PureComponent {
       title,
       text,
       emoji,
+      ...rest
     } = this.props;
 
     const classes = classNames(className, 'icon-button', {
@@ -138,7 +139,7 @@ export default class IconButton extends React.PureComponent {
           <div style={style}>
             {emoji
               ? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
-              : <Icon id={icon} iconset={iconset} fixedWidth aria-hidden='true' />}
+              : <Icon id={icon} {...rest} aria-hidden='true' />}
           </div>
           {text && <span className='icon_button__text'>{text}</span>}
         </button>
@@ -167,7 +168,7 @@ export default class IconButton extends React.PureComponent {
             <div style={style}>
               {emoji
                 ? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
-                : <Icon id={icon} iconset={iconset} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}
+                : <Icon id={icon} {...rest} style={{ transform: `rotate(${rotate}deg)` }} aria-hidden='true' />}
             </div>
             {text && <span className='icon_button__text'>{text}</span>}
           </button>

app/soapbox/components/status_action_bar.js

@@ -401,21 +401,11 @@ class StatusActionBar extends ImmutablePureComponent {
     }[meEmojiReact] || messages.favourite);
 
     const menu = this._makeMenu(publicStatus);
-    let reblogIcon = 'retweet';
-    let replyIcon;
     let replyTitle;
 
-    if (status.get('visibility') === 'direct') {
-      reblogIcon = 'envelope';
-    } else if (status.get('visibility') === 'private') {
-      reblogIcon = 'lock';
-    }
-
     if (status.get('in_reply_to_id', null) === null) {
-      replyIcon = 'reply';
       replyTitle = intl.formatMessage(messages.reply);
     } else {
-      replyIcon = 'reply-all';
       replyTitle = intl.formatMessage(messages.replyAll);
     }
 
@@ -426,11 +416,11 @@ class StatusActionBar extends ImmutablePureComponent {
     return (
       <div className='status__action-bar'>
         <div className='status__action-bar__counter'>
-          <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} />
+          <IconButton className='status__action-bar-button' title={replyTitle} src={require('feather-icons/dist/icons/message-circle.svg')} onClick={this.handleReplyClick} />
           {replyCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`} className='detailed-status__link'>{replyCount}</Link>}
         </div>
         <div className='status__action-bar__counter'>
-          <IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
+          <IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} src={require('feather-icons/dist/icons/repeat.svg')} onClick={this.handleReblogClick} />
           {reblogCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='detailed-status__link'>{reblogCount}</Link>}
         </div>
         <div
@@ -450,7 +440,7 @@ class StatusActionBar extends ImmutablePureComponent {
             animate
             active={Boolean(meEmojiReact)}
             title={meEmojiTitle}
-            icon='thumbs-up'
+            src={require('@tabler/icons/icons/thumb-up.svg')}
             emoji={meEmojiReact}
             onClick={this.handleLikeButtonClick}
           />

app/styles/components/emoji-reacts.scss

@@ -128,6 +128,10 @@
   @media (max-width: 455px) {
     position: static;
   }
+
+  .svg-icon {
+    height: 24px !important;
+  }
 }
 
 .detailed-status__wrapper .emoji-react-selector {

app/styles/components/status.scss

@@ -128,7 +128,8 @@
 
 .status__wrapper {
   @include standard-panel;
-  margin: 5px 0;
+  margin-bottom: 15px;
+  padding: 15px 0 10px;
 }
 
 .slist > .item-list > article {
@@ -354,6 +355,15 @@
       color: var(--brand-color);
     }
   }
+
+  .svg-icon {
+    width: 24px;
+    height: 20px;
+
+    svg {
+      stroke-width: 2px;
+    }
+  }
 }
 
 .status__action-bar-button {

app/styles/navigation.scss

@@ -28,6 +28,10 @@
       margin-right: 5px;
     }
 
+    .icon-with-counter__counter {
+      right: 0;
+    }
+
     hr {
       border: 0;
       height: 1px;

app/styles/ui.scss

@@ -734,7 +734,7 @@
     position: absolute;
     box-sizing: border-box;
     right: -5px;
-    top: -12px;
+    top: -9px;
     min-width: 16px;
     height: 16px;
     padding: 1px 3px 0;