add webvr link to bottom of entry dialog

src/assets/stylesheets/entry.scss

@@ -16,10 +16,26 @@
 .entry-panel {
   overflow-y: auto;
   display: flex;
+  flex-direction: column;
   flex: 1;
 
   &__button-container {
     margin: auto;
+    text-align: center;
+    flex: 10;
+    display: flex;
+    flex-direction: column;
+    min-height: max-content;
+    justify-content: center;
+  }
+  &__webvr-link-container {
+    text-align: center;
+    margin-bottom: 24px;
+  }
+  &__webvr-link {
+    color: white;
+    flex: 1;
+    min-height: max-content;
   }
 
   &__screen-sharing {
@@ -48,6 +64,7 @@
 .entry-button {
   display: flex;
   margin: 20px 0;
+  margin-bottom: 0;
   cursor: pointer;
   background: none;
   color: white;

src/assets/translations.data.json

@@ -12,6 +12,8 @@
     "entry.daydream-medium": "Daydream",
     "entry.daydream-via-chrome": "Using Google Chrome",
     "entry.enable-screen-sharing": "Share my desktop",
+    "entry.webvr-link-preamble": "New to WebVR?",
+    "entry.webvr-link": "Learn more",
     "profile.save": "SAVE",
     "profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32",
     "profile.header": "Your display name:",

src/react-components/ui-root.js

@@ -632,6 +632,19 @@ class UIRoot extends Component {
             )}
             {screenSharingCheckbox}
           </div>
+          {!mobiledetect.mobile() && (
+            <div className="entry-panel__webvr-link-container">
+              <FormattedMessage id="entry.webvr-link-preamble" />{" "}
+              <a
+                className="entry-panel__webvr-link"
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://webvr.rocks/"
+              >
+                <FormattedMessage id="entry.webvr-link" />
+              </a>
+            </div>
+          )}
         </div>
       ) : null;