Merge branch 'small-fixes' into 'develop'

Small fixes

Closes #278 and #266

See merge request soapbox-pub/soapbox-fe!147

app/soapbox/components/status_action_bar.js

@@ -367,9 +367,7 @@ class StatusActionBar extends ImmutablePureComponent {
           onMouseLeave={this.handleLikeButtonLeave}
           ref={this.setRef}
         >
-          { emojiSelectorVisible &&
           <EmojiSelector onReact={this.handleReactClick} visible={emojiSelectorVisible} />
-          }
           <IconButton
             className='status__action-bar-button star-icon'
             animate

app/soapbox/features/profile_hover_card/profile_hover_card_container.js

@@ -10,6 +10,7 @@ import ActionButton from '../ui/components/action_button';
 import { isAdmin, isModerator } from 'soapbox/utils/accounts';
 import Badge from 'soapbox/components/badge';
 import classNames from 'classnames';
+import { fetchRelationships } from 'soapbox/actions/accounts';
 
 const getAccount = makeGetAccount();
 
@@ -19,11 +20,7 @@ const mapStateToProps = (state, { accountId }) => {
   };
 };
 
-const mapDispatchToProps = (dispatch) => ({
-
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
+export default @connect(mapStateToProps)
 @injectIntl
 class ProfileHoverCardContainer extends ImmutablePureComponent {
 
@@ -32,6 +29,7 @@ class ProfileHoverCardContainer extends ImmutablePureComponent {
     accountId: PropTypes.string,
     account: ImmutablePropTypes.map,
     intl: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
   }
 
   static defaultProps = {
@@ -47,6 +45,10 @@ class ProfileHoverCardContainer extends ImmutablePureComponent {
     return badges;
   }
 
+  componentDidMount() {
+    this.props.dispatch(fetchRelationships([this.props.accountId]));
+  }
+
   render() {
     const { visible, accountId, account } = this.props;
     if (!accountId) return null;
@@ -61,7 +63,7 @@ class ProfileHoverCardContainer extends ImmutablePureComponent {
             <span className='relationship-tag'>
               <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
             </span>}
-          <div className='profile-hover-card__action-button'><ActionButton account={account} /></div>
+          <div className='profile-hover-card__action-button'><ActionButton account={account} small /></div>
           <UserPanel className='profile-hover-card__user' accountId={accountId} />
           {badges.length > 0 &&
             <div className='profile-hover-card__badges'>

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

@@ -311,9 +311,7 @@ class ActionBar extends React.PureComponent {
           onMouseLeave={this.handleLikeButtonLeave}
           ref={this.setRef}
         >
-          { emojiSelectorVisible &&
           <EmojiSelector onReact={this.handleReactClick} visible={emojiSelectorVisible} />
-          }
           <IconButton
             className='star-icon'
             animate

app/soapbox/features/status/components/detailed_status.js

@@ -189,7 +189,9 @@ export default class DetailedStatus extends ImmutablePureComponent {
                 <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />
               </DisplayName>
             </div>
+            { profileCardVisible &&
               <ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={!isMobile(window.innerWidth) && profileCardVisible} />
+            }
           </div>
 
           {status.get('group') && (

app/soapbox/features/ui/components/action_button.js

@@ -17,6 +17,7 @@ const messages = defineMessages({
   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
+  requested_small: { id: 'account.requested_small', defaultMessage: 'Awaiting approval' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
 });
@@ -55,8 +56,13 @@ class ActionButton extends ImmutablePureComponent {
     onFollow: PropTypes.func.isRequired,
     onBlock: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    small: PropTypes.bool,
   };
 
+  static defaultProps = {
+    small: false,
+  }
+
   componentDidMount() {
     window.addEventListener('resize', this.handleResize, { passive: true });
   }
@@ -74,7 +80,7 @@ class ActionButton extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, intl, me } = this.props;
+    const { account, intl, me, small } = this.props;
     let actionBtn = null;
 
     if (!account || !me) return actionBtn;
@@ -83,7 +89,7 @@ class ActionButton extends ImmutablePureComponent {
       if (!account.get('relationship')) { // Wait until the relationship is loaded
         //
       } else if (account.getIn(['relationship', 'requested'])) {
-        actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.requested)} onClick={this.handleFollow} />;
+        actionBtn = <Button className='logo-button' text={small ? intl.formatMessage(messages.requested_small) : intl.formatMessage(messages.requested)} onClick={this.handleFollow} />;
       } else if (!account.getIn(['relationship', 'blocking'])) {
         actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.handleFollow} />;
       } else if (account.getIn(['relationship', 'blocking'])) {

app/styles/application.scss

@@ -27,6 +27,7 @@
 @import 'dyslexic';
 @import 'demetricator';
 @import 'pro';
+@import 'overflow_hacks';
 
 // COMPONENTS
 @import 'components/buttons';

app/styles/components/account-header.scss

@@ -201,7 +201,7 @@
   @media screen and (max-width: 895px) {
     .account-mobile-container {
       display: block;
-      background: var(--accent-color--faint);
+      background: var(--background-color);
       margin-top: 10px;
       position: relative;
       padding: 10px 10px 0;

app/styles/overflow_hacks.scss

@@ -0,0 +1,16 @@
+// This is a file dedicated to fixing the css we broke by introducing the hover
+// card and `overflow:visible` on drawer.scss line 23. If we ever figure out how
+// to pop the hover card out while keeping `overflow:hidden`, feel free to delete
+// this entire file.
+
+button.column-header__button.active {
+  border-radius: 0 10px 0 0;
+}
+
+.column-back-button.column-back-button--slim-button {
+  border-radius: 0 10px 0 0;
+}
+
+.detailed-status__wrapper .detailed-status__action-bar {
+  border-radius: 0;
+}