Add scene tweet link

src/assets/images/twitter.svg

+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M153.6 301.6C247.9 301.6 299.5 223.4 299.5 155.7C299.5 153.5 299.5 151.3 299.4 149.1C309.4 141.9 318.1 132.8 325 122.5C315.8 126.6 305.9 129.3 295.5 130.6C306.1 124.3 314.2 114.2 318.1 102.2C308.2 108.1 297.2 112.3 285.5 114.6C276.1 104.6 262.8 98.4 248.1 98.4C219.8 98.4 196.8 121.4 196.8 149.7C196.8 153.7 197.3 157.6 198.1 161.4C155.5 159.3 117.7 138.8 92.4 107.8C88 115.4 85.5 124.2 85.5 133.6C85.5 151.4 94.6 167.1 108.3 176.3C99.9 176 92 173.7 85.1 169.9C85.1 170.1 85.1 170.3 85.1 170.6C85.1 195.4 102.8 216.2 126.2 220.9C121.9 222.1 117.4 222.7 112.7 222.7C109.4 222.7 106.2 222.4 103.1 221.8C109.6 242.2 128.6 257 151 257.4C133.4 271.2 111.3 279.4 87.3 279.4C83.2 279.4 79.1 279.2 75.1 278.7C97.7 293.1 124.7 301.6 153.6 301.6Z" fill="white"/>
+</svg>

src/assets/stylesheets/scene-ui.scss

@@ -52,6 +52,22 @@
   margin-bottom: 32px;
 }
 
+:local(.tweetButton) {
+  @extend %action-button;
+  margin-top: 12px;
+  background-color: #1b95e0;
+  align-self: center;
+  padding-right: 32px;
+  display: flex;
+  flex-direction: row;
+
+  img {
+    width: 42px;
+    height: 42px;
+    margin-right: 6px;
+  }
+}
+
 :local(.logo) {
   width: 100%;
   display: block;

src/assets/translations.data.json

@@ -80,6 +80,7 @@
     "help.report_issue": "Report an Issue",
     "scene.logo_tagline": "A new way to get together",
     "scene.create_button": "Create a room with this scene",
+    "scene.tweet_button": "Share on Twitter",
     "link.in_your_browser": "In your headset's browser, go to:",
     "link.enter_code": "Then, enter this one-time link code:",
     "link.do_not_close": "Keep this open to use this code.",

src/react-components/scene-ui.js

@@ -66,6 +66,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)}`;
+
     return (
       <IntlProvider locale={lang} messages={messages}>
         <div className={styles.ui}>
@@ -89,6 +93,12 @@ class SceneUI extends Component {
               <button onClick={this.createRoom}>
                 <FormattedMessage id="scene.create_button" />
               </button>
+              <a href={tweetLink} rel="noopener noreferrer" target="_blank" className={styles.tweetButton}>
+                <img src="../assets/images/twitter.svg" />
+                <div>
+                  <FormattedMessage id="scene.tweet_button" />
+                </div>
+              </a>
             </div>
           </div>
           <div className={styles.info}>