Tweet button in invite

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;
   }
 }

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",

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>
     );

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}>