diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js index 29ae29cdf..a27271888 100644 --- a/app/soapbox/features/account/components/header.js +++ b/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 ( + + ); + } + render() { const { account, intl, username, me, features } = this.props; const { isSmallScreen } = this.state; @@ -589,6 +606,7 @@ class Header extends ImmutablePureComponent {
{me && } + {this.renderShareButton()} {this.renderMessageButton()}
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss index 69902227c..33231aa40 100644 --- a/app/styles/components/account-header.scss +++ b/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); + } + } } } diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index 56e8194ca..244f42577 100644 --- a/app/styles/components/modal.scss +++ b/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); + } } } }