From 9b0e1218c97828af0f8fffac7398e6dd4ad29a3a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 21 Sep 2021 10:25:36 -0500
Subject: [PATCH] Fix janky IconButton (Compose issues) and restore
 lock/envelope icon for un-repostable posts

---
 app/soapbox/components/icon_button.js       | 11 +++++------
 app/soapbox/components/status_action_bar.js |  9 ++++++++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/components/icon_button.js b/app/soapbox/components/icon_button.js
index 7c0f6383a..e858dbcbe 100644
--- a/app/soapbox/components/icon_button.js
+++ b/app/soapbox/components/icon_button.js
@@ -11,8 +11,8 @@ export default class IconButton extends React.PureComponent {
   static propTypes = {
     className: PropTypes.string,
     title: PropTypes.string.isRequired,
-    icon: PropTypes.string.isRequired,
-    iconset: PropTypes.string,
+    icon: PropTypes.string,
+    src: PropTypes.string,
     onClick: PropTypes.func,
     onMouseDown: PropTypes.func,
     onKeyUp: PropTypes.func,
@@ -98,7 +98,7 @@ export default class IconButton extends React.PureComponent {
       disabled,
       expanded,
       icon,
-      iconset,
+      src,
       inverted,
       overlay,
       pressed,
@@ -106,7 +106,6 @@ export default class IconButton extends React.PureComponent {
       title,
       text,
       emoji,
-      ...rest
     } = this.props;
 
     const classes = classNames(className, 'icon-button', {
@@ -139,7 +138,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} {...rest} aria-hidden='true' />}
+              : <Icon id={icon} src={src} fixedWidth aria-hidden='true' />}
           </div>
           {text && <span className='icon_button__text'>{text}</span>}
         </button>
@@ -168,7 +167,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} {...rest} style={{ transform: `rotate(${rotate}deg)` }} aria-hidden='true' />}
+                : <Icon id={icon} src={src} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}
             </div>
             {text && <span className='icon_button__text'>{text}</span>}
           </button>
diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index f4fc457c5..d9fed78e5 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -401,8 +401,15 @@ class StatusActionBar extends ImmutablePureComponent {
     }[meEmojiReact] || messages.favourite);
 
     const menu = this._makeMenu(publicStatus);
+    let reblogIcon = require('feather-icons/dist/icons/repeat.svg');
     let replyTitle;
 
+    if (status.get('visibility') === 'direct') {
+      reblogIcon = require('@tabler/icons/icons/mail.svg');
+    } else if (status.get('visibility') === 'private') {
+      reblogIcon = require('@tabler/icons/icons/lock.svg');
+    }
+
     if (status.get('in_reply_to_id', null) === null) {
       replyTitle = intl.formatMessage(messages.reply);
     } else {
@@ -420,7 +427,7 @@ class StatusActionBar extends ImmutablePureComponent {
           {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)} src={require('feather-icons/dist/icons/repeat.svg')} 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={reblogIcon} onClick={this.handleReblogClick} />
           {reblogCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='detailed-status__link'>{reblogCount}</Link>}
         </div>
         <div