Add Chat/DM button back to AccountHeader

app/soapbox/features/account/components/header.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import IconButton from 'soapbox/components/icon_button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import {
   isStaff,
@@ -185,6 +186,8 @@ class Header extends ImmutablePureComponent {
 
       if (account.getIn(['pleroma', 'accepts_chat_messages'], false) === true) {
         menu.push({ text: intl.formatMessage(messages.chat, { name: account.get('username') }), action: this.props.onChat });
+      } else {
+        menu.push({ text: intl.formatMessage(messages.direct, { name: account.get('username') }), action: this.props.onDirect });
       }
 
       if (account.getIn(['relationship', 'following'])) {
@@ -296,6 +299,22 @@ class Header extends ImmutablePureComponent {
     return info;
   }
 
+  renderMessageButton() {
+    const { account, me } = this.props;
+
+    if (!me || !account || account.get('id') === me) {
+      return null;
+    }
+
+    const canChat = account.getIn(['pleroma', 'accepts_chat_messages'], false) === true;
+
+    if (canChat) {
+      return <IconButton src={require('@tabler/icons/icons/messages.svg')} onClick={this.props.onChat} />;
+    } else {
+      return <IconButton src={require('@tabler/icons/icons/mail.svg')} onClick={this.props.onDirect} />;
+    }
+  }
+
   render() {
     const { account, intl, username, me, features } = this.props;
     const { isSmallScreen } = this.state;
@@ -395,8 +414,9 @@ class Header extends ImmutablePureComponent {
             )}
 
             <div className='account__header__extra__buttons'>
+              {me && <DropdownMenuContainer items={menu} src={require('@tabler/icons/icons/dots.svg')} direction='right' />}
+              {this.renderMessageButton()}
               <ActionButton account={account} />
-              {me && <DropdownMenuContainer items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />}
             </div>
 
           </div>

app/styles/components/account-header.scss

@@ -196,10 +196,15 @@
       margin-left: auto;
 
       .icon-button {
-        border: 1px solid var(--brand-color--med);
+        border: 1px solid var(--primary-text-color--faint);
         border-radius: 999px;
         box-sizing: content-box;
         padding: 7px;
+        opacity: 0.6;
+
+        &:hover {
+          opacity: 1;
+        }
 
         .svg-icon {
           width: 20px;
@@ -207,7 +212,10 @@
         }
       }
 
-      .button { margin-right: 10px; }
+      .button,
+      .icon-button {
+        margin-left: 10px;
+      }
 
       .button-active {
         border-color: #008000;

app/styles/ui.scss

@@ -6,7 +6,7 @@
   border: 0;
   background: transparent;
   cursor: pointer;
-  transition: color 100ms ease-in;
+  transition: 100ms ease-in;
   opacity: 0.4;
 
   i.fa {