cleaned up css, still needs fixing

bigbluebutton-html5/imports/ui/components/audio-modal/audio-settings/component.jsx

@@ -7,6 +7,7 @@ import styles from '../styles.scss';
 import MicSource from '/imports/ui/components/mic-source/component';
 import SpeakerSource from '/imports/ui/components/speaker-source/component';
 import EnterAudio from '/imports/ui/components/enter-audio/component';
+import StreamVolume from '/imports/ui/components/stream-volume/component';
 
 export default class AudioSettings extends React.Component {
   constructor(props) {
@@ -51,6 +52,7 @@ export default class AudioSettings extends React.Component {
         </div>
         <div className={styles.half}>
           <MicSource />
+          <StreamVolume />
           <SpeakerSource />
         </div>
         <div className={styles.half}>

bigbluebutton-html5/imports/ui/components/audio-modal/listen-only/component.jsx

@@ -6,6 +6,10 @@ import classNames from 'classnames';
 import ReactDOM from 'react-dom';
 import styles from '../styles.scss';
 
+import StreamVolume from '/imports/ui/components/stream-volume/component';
+import EnterAudio from '/imports/ui/components/enter-audio/component';
+import SpeakerSource from '/imports/ui/components/speaker-source/component';
+
 export default class ListenOnly extends React.Component {
   constructor(props) {
     super(props);
@@ -38,14 +42,13 @@ export default class ListenOnly extends React.Component {
           </div>
         </div>
         <div>
-          Content goes here<br /><br />
-          Volume Slider Here
-          <Button className={styles.enterBtn}
-            label={'Enter Session'}
-            size={'md'}
-            color={'primary'}
-            onClick={this.joinListen}
-          />
+          <div className={styles.half}>
+            <StreamVolume />
+            <SpeakerSource />
+          </div>
+          <div className={styles.half}>
+          <EnterAudio />
+          </div>
         </div>
       </div>
     );

bigbluebutton-html5/imports/ui/components/audio-modal/styles.scss

@@ -55,6 +55,13 @@ Button.audioBtn:first-of-type {
   padding-top: 30px;
 }
 
+div.half label {
+  font-size: 0.75em;
+  font-weight: 600;
+  color: $color-primary;
+  margin-bottom: 5px;
+}
+
 .backBtn {
   position: absolute;
   left: 10px;

bigbluebutton-html5/imports/ui/components/settings/styles.scss

@@ -48,48 +48,7 @@
   color: $color-primary;
 }
 
-.containerLeftHalf {
-  width: 50%;
-  float: left;
-}
 
-.containerRightHalf {
-  width: 50%;
-  float: right;
-}
-
-.containerFull{
-  width: 100%;
-  float: right;
-}
-/////
-
-/* General Submenu */
-.submenuTitle {
-  height: 45px;
-  margin: 0px;
-  padding-top: 12px;
-  font-size: $font-size-large;
-  font-weight: $headings-font-weight;
-}
-
-.submenuContent {
-  height: 85%;
-  margin: 0px;
-  padding-top: 12px;
-  font-size: $font-size-base;
-  color: $color-gray-light;
-}
-
-div.submenuContent select {
-  width: 90%;
-  padding-top: 5px;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  /*outline: none;*/
-  color: $color-gray-light;
-}
 
 .containerLeftHalf {
   width: 50%;
@@ -123,62 +82,11 @@ div.containerLeftHalf label, div.containerRightHalf label {
   margin-bottom: 5px;
 }
 
-input[type=checkbox] {
-    float: right;
+.row {
+  height: 42px;
 }
 
-ul {
-  list-style-type: none;
-  margin: 0px;
-}
-
-ul li {
-  padding-bottom: 9%;
-}
-
-/* Application Submenu */
-.applicationFontContainer {
-  border-top: solid 1px $color-gray-light;
-  margin-top: 10%;
-  padding-top: 10%;
-}
-
-.fontBarLeft {
-  float: left;
-  margin: 0px;
-  height: 100%;
-  width: 25%;
-  text-align: left;
-}
-
-.fontBarMid {
-  float: left;
-  margin: 0px;
-  height: 100%;
-  width: 50%;
-  text-align: center;
-  font-weight: 600;
-}
-
-.fontBarRight {
-  float: left;
-  margin: 0px;
-  height: 100%;
-  width: 25%;
-  text-align: right;
-}
-
-.fontBarLeft p, .fontBarMid p {
-  margin: 0px;
-}
-
-/* Users Submenu */
-.checkboxOffset {
-  margin-right: 5%;
-}
-
-
-/* Buttons */
+//buttons
 .defaultBtn {
   width: 90px;
   border-radius: 18px;
@@ -189,21 +97,4 @@ ul li {
 .testAudioBtn {
   @extend .defaultBtn;
   width: 140px;
-  float: left;
-}
-
-/* Submenu containers */
-.full {
-  clear: both;
-  height: 100%;
-  width: 100%;
-}
-
-.row {
-  height: 42px;
-}
-
-.indentedRow {
-  @extend .row;
-  padding-left: 10%;
 }

bigbluebutton-html5/imports/ui/components/speaker-source/component.jsx

@@ -23,7 +23,7 @@ export default class SpeakerSource extends React.Component {
         </select>
       </div>
       <div className={styles.containerRightHalf}>
-      <Button className={styles.playSound}
+      <Button className={styles.testAudioBtn}
         label={'Play sound'}
         icon={'audio'}
         size={'md'}