added join audio files

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import Icon from '/imports/ui/components/icon/component';
+import Button from '/imports/ui/components/button/component';
+import ModalBase from '../modal/base/component';
+import { clearModal } from '/imports/ui/components/app/service';
+import classNames from 'classnames';
+import ReactDOM from 'react-dom';
+import styles from './styles.scss';
+
+export default class Audio extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  handleClose() {
+    this.setState({ isOpen: false });
+    clearModal();
+  }
+
+  handleClick() {
+  }
+
+  render() {
+    return (
+      <ModalBase
+        isOpen={true}
+        onHide={null}
+        onShow={null}
+        className={styles.inner}>
+          <div className={styles.center}>
+            <Button className={styles.closeBtn}
+              label={'Close'}
+              icon={'close'}
+              size={'lg'}
+              circle={true}
+              hideLabel={true}
+              onClick={this.handleClose}
+            />
+            <div>
+              How would you like to join the audio?
+            </div>
+          </div>
+          <div className={styles.center}>
+            <Button className={styles.audioBtn}
+              label={'Audio'}
+              icon={'audio'}
+              circle={true}
+              size={'jumbo'}
+              onClick={this.handleClick}
+            />
+            <Button className={styles.audioBtn}
+              label={'Listen Only'}
+              icon={'listen'}
+              circle={true}
+              size={'jumbo'}
+              onClick={this.handleClick}
+            />
+          </div>
+      </ModalBase>
+    );
+  }
+};

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import Icon from '/imports/ui/components/icon/component';
+import Button from '/imports/ui/components/button/component';
+import ModalBase from '../modal/base/component';
+import { clearModal } from '/imports/ui/components/app/service';
+import classNames from 'classnames';
+import ReactDOM from 'react-dom';
+import styles from '../styles.scss';
+
+export default class JoinAudio extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  handleClose() {
+    this.setState({ isOpen: false });
+    clearModal();
+
+  handleClick() {
+  }
+
+  render() {
+    return (
+      <div className={styles.center}>
+        <Button className={styles.closeBtn}
+          label={'Close'}
+          icon={'close'}
+          size={'lg'}
+          circle={true}
+          hideLabel={true}
+          onClick={this.handleClose}
+        />
+        <div>
+          How would you like to join the audio?
+        </div>
+      </div>
+      <div className={styles.center}>
+        <Button className={styles.audioBtn}
+          label={'Audio'}
+          icon={'audio'}
+          circle={true}
+          size={'jumbo'}
+          onClick={this.handleClick}
+        />
+        <Button className={styles.audioBtn}
+          label={'Listen Only'}
+          icon={'listen'}
+          circle={true}
+          size={'jumbo'}
+          onClick={this.handleClick}
+        />
+      </div>
+    );
+  }
+};

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

@@ -0,0 +1,49 @@
+@import "../../stylesheets/variables/_all";
+
+.center {
+  text-align: center;
+  font-size: $font-size-large;
+  padding-top: 40px;
+}
+
+.closeBtn {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
+// Modifies the close button style
+Button.closeBtn span:first-child {
+  color: $color-gray-light;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+// Modifies the audio button icon colour
+Button.audioBtn span:first-child {
+  color: #25385D;
+  border: 5px solid #FFF;
+  box-shadow: none;
+}
+
+// When hovering over a button of class audioBtn, change the border colour of first span-child
+Button.audioBtn:hover span:first-child {
+  border: 5px solid $color-primary;
+}
+
+// Modifies the button label text
+Button.audioBtn span:last-child {
+  color: $color-gray-dark;
+  font-size: 30%;
+}
+
+Button.audioBtn:first-of-type {
+  margin-right: 70px;
+}
+
+.inner {
+  padding: 10px;
+  min-height: 350px;
+  min-width: 500px;
+}