diff --git a/src/assets/stylesheets/invite-dialog.scss b/src/assets/stylesheets/invite-dialog.scss index 2466630cef1cbec9e3c128abd2b8ad7d647e5894..f28210e2492ad663f31aa1f08874c3f89c5ac755 100644 --- a/src/assets/stylesheets/invite-dialog.scss +++ b/src/assets/stylesheets/invite-dialog.scss @@ -22,8 +22,11 @@ } :local(.link-button) { + @extend %action-button; @extend %action-button-selected; + min-width: auto; margin-top: 4px; + flex: 1; @media (max-height: 370px) { display: none; @@ -115,8 +118,9 @@ :local(.buttons) { display: flex; justify-content: space-between; + width: 100%; - button { + button, a { margin: 0 12px; } } diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json index c0a4ece7c5a37f5cac7c5a6aa1655b1c5eb42215..c61b991c4bf080b0044701f4e853f1c8712a1936 100644 --- a/src/assets/translations.data.json +++ b/src/assets/translations.data.json @@ -87,6 +87,7 @@ "link.connect_headset": "Connect Mobile Headset", "link.cancel": "cancel", "invite.enter_via": "Enter via ", + "invite.tweet": "tweet", "invite.and_enter_code": " with code:", "invite.or_visit": "or visit", "spoke.primary_tagline": "make your space", diff --git a/src/react-components/invite-dialog.js b/src/react-components/invite-dialog.js index 5a9e4446a6486dfb5fe049bb913885b76a469756..c1ccb19b3aeae437c8037c988d969736c9f16bf1 100644 --- a/src/react-components/invite-dialog.js +++ b/src/react-components/invite-dialog.js @@ -44,6 +44,11 @@ export default class InviteDialog extends Component { const entryCodeString = pad(entryCode, 6); const shareLink = `hub.link/${entryCodeString}`; + const tweetText = `Join me now in #hubs!`; + const tweetLink = `https://twitter.com/share?url=${encodeURIComponent( + "https://" + shareLink + )}&text=${encodeURIComponent(tweetText)}`; + return ( <div className={styles.dialog}> <div className={styles.attachPoint} /> @@ -80,6 +85,12 @@ export default class InviteDialog extends Component { <span>{this.state.shareButtonActive ? "sharing..." : "share"}</span> </button> )} + {this.props.allowShare && + !navigator.share && ( + <a href={tweetLink} className={styles.linkButton} target="_blank" rel="noopener noreferrer"> + <FormattedMessage id="invite.tweet" /> + </a> + )} </div> </div> ); diff --git a/src/react-components/scene-ui.js b/src/react-components/scene-ui.js index 129d9edce985b87f4f24e41f0fb4b069bd581cd9..b8f8307d3e52e88d8c6c05fd0fd29bca3246ea5f 100644 --- a/src/react-components/scene-ui.js +++ b/src/react-components/scene-ui.js @@ -67,8 +67,10 @@ class SceneUI extends Component { render() { const sceneUrl = [location.protocol, "//", location.host, location.pathname].join(""); - const text = `${this.props.sceneName} in #hubs`; - const tweetLink = `https://twitter.com/share?url=${encodeURIComponent(sceneUrl)}&text=${encodeURIComponent(text)}`; + const tweetText = `${this.props.sceneName} in #hubs`; + const tweetLink = `https://twitter.com/share?url=${encodeURIComponent(sceneUrl)}&text=${encodeURIComponent( + tweetText + )}`; return ( <IntlProvider locale={lang} messages={messages}>