Styling basically done, yay

src/assets/stylesheets/avatar-selector.scss

@@ -16,16 +16,10 @@
     color: grey;
   }
   &__previous-button, &__next-button {
+    @extend %big-icon-button;
     position: absolute;
     top: 50%;
     margin-top: -0.5em;
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    background: transparent;
-    color: white;
-    border: none;
-    font-size: 64pt;
   }
   &__previous-button {
     left: 0.2em;

src/assets/stylesheets/hub-create.scss

@@ -43,6 +43,7 @@
       padding-right: 90px;
       width: 100%;
       line-height: 40px;
+      z-index: 1;
 
       &::selection {
 	background-color: #2F80ED;
@@ -120,6 +121,7 @@
       border-radius: 14px;
       overflow: hidden;
       pointer-events: none;
+      z-index: 2;
 
       @media (max-width: 768px) , (max-height: 715px) {
 	width: 100%;
@@ -153,6 +155,39 @@
 	  height: 100%;
 	  top: 0;
 	  left: 0;
+
+	  &__footer {
+	    position: absolute;
+	    bottom: 14px;
+	    left: 12px;
+	    font-size: 1.2em;
+	    text-shadow: 0px 0px 6px #202020;
+	    color: $light-text;
+	  }
+
+	  &__header {
+	    position: absolute;
+	    top: 14px;
+	    left: 18px;
+	    display: flex;
+	    flex-direction: column;
+	    text-shadow: 0px 0px 3px #404040;
+
+	    &__title {
+	      font-size: 1.6em;
+	      font-weight: bold;
+	      color: white;
+	    }
+
+	    &__author {
+	      color: $light-text;
+	      font-size: 1.4em;
+
+	      @media (max-width: 520px) {
+		display: none;
+	      }
+	    }
+	  }
 	}
 
 	&__controls {
@@ -161,6 +196,24 @@
 	  height: 100%;
 	  top: 0;
 	  left: 0;
+
+	  &__next, &__prev {
+	    @extend %big-icon-button;
+
+	    position: absolute;
+	    top: 50%;
+	    margin-top: -0.5em;
+	    pointer-events: auto;
+	    cursor: pointer;
+	  }
+
+	  &__prev {
+	    left: 0.2em;
+	  }
+
+	  &__next {
+	    right: 0.2em;
+	  }
 	}
       }
     }

src/assets/stylesheets/index.scss

@@ -113,7 +113,6 @@ body {
 
 .hero-content {
   flex: 10;
-  text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
   min-height: 740px;
   display: flex;
   flex-direction: column;
@@ -129,6 +128,7 @@ body {
     padding-left: 2.1em;
     padding-right: 2.1em;
     flex: 10;
+    text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
 
     @media (max-height: 812px) , (max-width: 768px) {
       flex: 0 0 auto;

src/assets/stylesheets/shared.scss

@@ -32,3 +32,13 @@ $darker-grey: rgba(64, 64, 64, 1.0);
   font-size: 1.0em;
   padding-top: 4px;
 }
+
+%big-icon-button {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  color: white;
+  border: none;
+  font-size: 64pt;
+}

src/assets/translations.data.json

@@ -34,7 +34,7 @@
     "autoexit.subtitle": "You have started another session.",
     "autoexit.cancel": "CANCEL",
     "home.create_header": "Name your room:",
-    "home.create_header_expanded": "Choose a scene:",
+    "home.environment_picker_footer": "Choose a scene",
     "home.create_name.validation_warning": "Invalid name, limited to 4 to 64 characters and limited symbols.",
     "home.webvr_disclaimer_pre": "A ",
     "home.webvr_disclaimer_post": " experiment by ",
@@ -45,6 +45,7 @@
     "home.get_updates": "Get Updates",
     "home.hero_title": "A new way to get together online.",
     "home.hero_subtitle": "Laugh, play, get stuff done, or just hang out.",
-    "home.made_with_love": "made with ❤️ by "
+    "home.made_with_love": "made with ❤️ by ",
+    "home.environment_author_by": " by "
   }
 }

src/react-components/hub-create-panel.js

@@ -21,7 +21,7 @@ class HubCreatePanel extends Component {
     this.state = {
       name: generateHubName(),
       environmentIndex: Math.floor(Math.random() * props.environments.length),
-      expanded: false
+      expanded: true
     };
   }
 
@@ -63,6 +63,9 @@ class HubCreatePanel extends Component {
     const environment = this.props.environments[this.state.environmentIndex];
     const environmentImageSrcSet = environment.meta.images.find(i => i.type === "preview-thumbnail").srcset;
 
+    const environmentTitle = environment.meta.title;
+    const environmentAuthor = (environment.meta.authors || [])[0];
+
     const formNameClassNames = classNames("create-panel__form__name", {
       "create-panel__form__name--expanded": this.state.expanded
     });
@@ -107,20 +110,27 @@ class HubCreatePanel extends Component {
                 />
               )}
             </div>
-            <input
-              className={formNameClassNames}
-              value={this.state.name}
-              onChange={e => this.setState({ name: e.target.value })}
-              onFocus={e => e.target.select()}
-              required
-              pattern={HUB_NAME_PATTERN}
-              title={formatMessage({ id: "home.create_name.validation_warning" })}
-            />
             {this.state.expanded && (
               <div className="create-panel__form__environment">
                 <div className="create-panel__form__environment__picker">
                   <img className="create-panel__form__environment__picker__image" srcSet={environmentImageSrcSet} />
-                  <div className="create-panel__form__environment__picker__labels">labels</div>
+                  <div className="create-panel__form__environment__picker__labels">
+                    <div className="create-panel__form__environment__picker__labels__header">
+                      <span className="create-panel__form__environment__picker__labels__header__title">
+                        {environmentTitle}
+                      </span>
+                      {environmentAuthor &&
+                        environmentAuthor.name && (
+                          <span className="create-panel__form__environment__picker__labels__header__author">
+                            <FormattedMessage id="home.environment_author_by" />
+                            <span>{environmentAuthor.name}</span>
+                          </span>
+                        )}
+                    </div>
+                    <div className="create-panel__form__environment__picker__labels__footer">
+                      <FormattedMessage id="home.environment_picker_footer" />
+                    </div>
+                  </div>
                   <div className="create-panel__form__environment__picker__controls">
                     <button
                       className="create-panel__form__environment__picker__controls__prev"
@@ -128,10 +138,26 @@ class HubCreatePanel extends Component {
                     >
                       <FontAwesomeIcon icon={faAngleLeft} />
                     </button>
+
+                    <button
+                      className="create-panel__form__environment__picker__controls__next"
+                      onClick={this.setToNextEnvironment}
+                    >
+                      <FontAwesomeIcon icon={faAngleRight} />
+                    </button>
                   </div>
                 </div>
               </div>
             )}
+            <input
+              className={formNameClassNames}
+              value={this.state.name}
+              onChange={e => this.setState({ name: e.target.value })}
+              onFocus={e => e.target.select()}
+              required
+              pattern={HUB_NAME_PATTERN}
+              title={formatMessage({ id: "home.create_name.validation_warning" })}
+            />
           </div>
         </div>
       </form>