Merge branch 'profile-share' into 'develop'

Profile: add "Share" button as a primary action to own profile

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

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

@@ -182,7 +182,7 @@ class Header extends ImmutablePureComponent {
       menu.push({
         text: intl.formatMessage(messages.share, { name: account.get('username') }),
         action: this.handleShare,
-        icon: require('@tabler/icons/icons/share.svg'),
+        icon: require('feather-icons/dist/icons/share.svg'),
       });
       menu.push(null);
     }
@@ -489,6 +489,23 @@ class Header extends ImmutablePureComponent {
     }
   }
 
+  renderShareButton() {
+    const { intl, account, me } = this.props;
+    const canShare = 'share' in navigator;
+
+    if (!(account && me && account.get('id') === me && canShare)) {
+      return null;
+    }
+
+    return (
+      <IconButton
+        src={require('feather-icons/dist/icons/share.svg')}
+        onClick={this.handleShare}
+        title={intl.formatMessage(messages.share, { name: account.get('username') })}
+      />
+    );
+  }
+
   render() {
     const { account, intl, username, me, features } = this.props;
     const { isSmallScreen } = this.state;
@@ -589,6 +606,7 @@ class Header extends ImmutablePureComponent {
 
             <div className='account__header__extra__buttons'>
               {me && <DropdownMenuContainer items={menu} src={require('@tabler/icons/icons/dots.svg')} direction='right' />}
+              {this.renderShareButton()}
               {this.renderMessageButton()}
               <ActionButton account={account} />
             </div>

app/styles/components/account-header.scss

@@ -209,6 +209,13 @@
         .svg-icon {
           width: 20px;
           height: 20px;
+
+          svg {
+            &.feather {
+              // Feather icons are a little larger
+              transform: scale(0.9);
+            }
+          }
         }
       }
 

app/styles/components/modal.scss

@@ -606,6 +606,11 @@
 
           svg {
             stroke-width: 1.5;
+
+            &.feather {
+              // Feather icons are a little larger
+              transform: scale(0.9);
+            }
           }
         }
       }