Scene page styling coming together

src/assets/stylesheets/scene-ui.scss

+@import 'shared';
+
+:local(.ui) {
+  @extend %default-font;
+
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  pointer-events: none;
+  color: white;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+:local(.grid) {
+  display: grid;
+  grid-template-columns: 1fr 20px minmax(200px, 400px) 20px 1fr;
+  grid-template-rows: 1fr 3fr 1fr;
+  width: 100%;
+  height: 100%;
+}
+
+:local(.mainPanel) {
+  grid-column: 3;
+  grid-row: 2;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  pointer-events: auto;
+
+  button {
+    @extend %action-button;
+    border: 0;
+  }
+}
+
+:local(.logoTagline) {
+  color: black;
+  text-shadow: 0px 0px 20px #cccccc;
+  font-weight: bold;
+  text-align: center;
+  font-size: 1.2em;
+  margin-bottom: 32px;
+}
+
+:local(.logo) {
+  width: 100%;
+  display: block;
+
+  img {
+    width: 100%;
+  }
+}

src/assets/translations.data.json

@@ -78,6 +78,7 @@
     "link.dont_have_a_code": "Don't have a code?",
     "link.create_a_room": "Create a Room",
     "link.try_again": "We couldn't find that code. Please try again.",
-    "help.report_issue": "Report an Issue"
+    "help.report_issue": "Report an Issue",
+    "scene.logo_tagline": "A new way to get together"
   }
 }

src/react-components/scene-ui.js

 import React, { Component } from "react";
 import PropTypes from "prop-types";
 //import classNames from "classnames";
-import { IntlProvider, /*FormattedMessage, */ addLocaleData } from "react-intl";
+import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
 import en from "react-intl/locale-data/en";
 import styles from "../assets/stylesheets/scene-ui.scss";
+import hubLogo from "../assets/images/hub-preview-white.png";
 
 import { lang, messages } from "../utils/i18n";
 
@@ -53,7 +54,24 @@ class SceneUI extends Component {
 
     return (
       <IntlProvider locale={lang} messages={messages}>
-        <div className={styles.ui}>hello</div>
+        <div className={styles.ui}>
+          <div className={styles.grid}>
+            <div className={styles.mainPanel}>
+              <a href="/" className={styles.logo}>
+                <img src={hubLogo} />
+              </a>
+              <div className={styles.logoTagline}>
+                <FormattedMessage id="scene.logo_tagline" />
+              </div>
+              <button>create a room with this scene</button>
+            </div>
+          </div>
+          <div className={styles.info}>
+            <div className={styles.name}>{this.props.sceneName}</div>
+            <div className={styles.name}>{this.props.sceneAttribution}</div>
+          </div>
+          <div className={styles.description}>{this.props.sceneDescription}</div>
+        </div>
       </IntlProvider>
     );
   }