Audio setup panel styling half way finished

src/assets/translations.data.json

@@ -12,6 +12,10 @@
     "entry.daydream-medium": "Daydream",
     "profile.save": "SAVE",
     "profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32",
-    "profile.header": "Your identity"
+    "profile.header": "Your identity",
+    "audio.title": "Test your audio",
+    "audio.subtitle-desktop": "Confirm HMD speaker output",
+    "audio.subtitle-mobile": "Earphones are recommended",
+    "audio.enter-now": "ENTER NOW"
   }
 }

src/react-components/ui-root.js

@@ -15,7 +15,6 @@ const lang = ((navigator.languages && navigator.languages[0]) ||
                    navigator.language || navigator.userLanguage).toLowerCase().split(/[_-]+/)[0];
 
 import localeData from '../assets/translations.data.json';
-console.log(localeData);
 addLocaleData([...en]);
 
 const messages = localeData[lang] || localeData.en;
@@ -449,19 +448,29 @@ class UIRoot extends Component {
 
     const audioSetupPanel = this.state.entryStep === ENTRY_STEPS.audio_setup
     ? (
-        <div>
-          Audio setup
-          <select value={selectedMicDeviceId} onChange={this.micDeviceChanged}>
-            { this.state.micDevices.map(d => (<option key={ d.deviceId } value={ d.deviceId }>{d.label}</option>)) }
-          </select>
+        <div className="audio-setup-panel">
+          <div className="audio-setup-panel--title">
+            <FormattedMessage id="audio.title"/>
+          </div>
+          <div className="audio-setup-panel--subtitle">
+            { mobiledetect.mobile() || this.state.enterInVR  && (<FormattedMessage id={ mobiledetect.mobile() ? "audio.subtitle-mobile" : "audio.subtitle-desktop" }/>) }
+          </div>
+          <div className="audio-setup-panel--device-chooser">
+            <select className="audio-setup-panel--device-chooser--dropdown" value={selectedMicDeviceId} onChange={this.micDeviceChanged}>
+              { this.state.micDevices.map(d => (<option key={ d.deviceId } value={ d.deviceId }>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{d.label}</option>)) }
+            </select>
+            <div className="audio-setup-panel--device-chooser--mic-icon">
+              <img src="./src/assets/images/mic_small.png"/>
+            </div>
+          </div>
           <br/>
           { this.state.tonePlaying && (<div>Tone</div>) }
           <br/>
           { this.state.micLevel }
           <br/>
-          <button onClick={this.onAudioReadyButton}>
-            Audio Ready
-          </button>
+          <div className="audio-setup-panel--enter-button" onClick={this.onAudioReadyButton}>
+            <FormattedMessage id="audio.enter-now"/>
+          </div>
         </div>
       ) : null;
 

src/room.js

@@ -235,11 +235,13 @@ function mountUI(scene) {
   });
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+const onReady = () => {
   registerNetworkSchemas();
 
   const scene = document.querySelector("a-scene");
   document.querySelector("a-scene canvas").classList.add("blurred");
   window.APP.scene = scene;
   mountUI(scene);
-});
+};
+
+document.addEventListener("DOMContentLoaded", onReady);

src/room.scss

@@ -18,6 +18,14 @@ $darker-grey: rgba(64, 64, 64, 1.0);
   border-radius: 14px;
 }
 
+%bottom-button {
+  font-size: 1em;
+  font-weight: bold;
+  margin-top: auto;
+  margin-bottom: 30px;
+  cursor: pointer;
+}
+
 .a-enter-vr {
   display: none;
 }
@@ -209,5 +217,48 @@ $darker-grey: rgba(64, 64, 64, 1.0);
   justify-content: center;
 }
 
-.entry-button__label__contents {
+.audio-setup-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 10 1 auto;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.audio-setup-panel--title {
+  font-size: 1.3em;
+}
+
+.audio-setup-panel--subtitle {
+  font-size: 1.0em;
+  padding-top: 4px;
+}
+
+.audio-setup-panel--device-chooser {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.audio-setup-panel--enter-button {
+  @extend %bottom-button;
+}
+
+.audio-setup-panel--device-chooser--dropdown {
+  @extend %rounded-border;
+  @extend %default-font;
+
+  background-color: black;
+  padding: 6px;
+  color: white;
+  font-size: 1.1em;
+  width: 90%;
+}
+
+.audio-setup-panel--device-chooser--mic-icon {
+  position: absolute;
+  left: 7.5%;
+  top: 10px;
 }