diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
index cc9e6a3c83d84f9d7ef8ec705452f51e4ae50469..437b8944759e5fc850baf685a1c8b1c02d9aab67 100755
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import ModalBase from '/imports/ui/components/modal/base/component';
+import Modal from '/imports/ui/components/modal/simple/component';
import Button from '/imports/ui/components/button/component';
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import { styles } from './styles';
@@ -9,6 +9,7 @@ import AudioSettings from '../audio-settings/component';
import EchoTest from '../echo-test/component';
import Help from '../help/component';
+
const propTypes = {
intl: intlShape.isRequired,
closeModal: PropTypes.func.isRequired,
@@ -392,10 +393,11 @@ class AudioModal extends Component {
return (
<span>
{showPermissionsOvelay ? <PermissionsOverlay /> : null}
- <ModalBase
+ <Modal
overlayClassName={styles.overlay}
className={styles.modal}
onRequestClose={this.closeModal}
+ hideBorder
>
{!this.skipAudioOptions() ?
@@ -410,22 +412,13 @@ class AudioModal extends Component {
intl.formatMessage(intlMessages.audioChoiceLabel)}
</h3>
}
- <Button
- data-test="modalBaseCloseButton"
- className={styles.closeBtn}
- label={intl.formatMessage(intlMessages.closeLabel)}
- icon="close"
- size="md"
- hideLabel
- onClick={this.closeModal}
- />
</header>
: null
}
<div className={styles.content}>
{this.renderContent()}
</div>
- </ModalBase>
+ </Modal>
</span>
);
}
diff --git a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
index a5befabadac8058464856104c6857e08f831a1dc..c305dd7affa5fe315a1428f7559b875267f95ce3 100755
--- a/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss
@@ -118,6 +118,7 @@
text-align: center;
font-weight: 400;
font-size: 1.3rem;
+ color: var(--color-background);
white-space: normal;
@include mq($small-only) {
diff --git a/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx b/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx
index 7c89ec1f1bbd035f3a1316caded8e3081dc9efb3..0844a19521843756429e3a6dc849cbaf6051ede1 100755
--- a/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/component.jsx
@@ -1,9 +1,8 @@
import React, { Component } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
-import Button from '/imports/ui/components/button/component';
import Toggle from '/imports/ui/components/switch/component';
import cx from 'classnames';
-import ModalBase from '/imports/ui/components/modal/base/component';
+import Modal from '/imports/ui/components/modal/simple/component';
import { styles } from './styles';
const intlMessages = defineMessages({
@@ -75,24 +74,16 @@ class LockViewersComponent extends Component {
const { intl, meeting } = this.props;
return (
- <ModalBase
+ <Modal
overlayClassName={styles.overlay}
className={styles.modal}
onRequestClose={this.closeModal}
+ hideBorder
>
<div className={styles.container}>
<div className={styles.header}>
<div className={styles.title}>{intl.formatMessage(intlMessages.lockViewersTitle)}</div>
- <Button
- data-test="modalBaseCloseButton"
- className={styles.closeBtn}
- label={intl.formatMessage(intlMessages.closeLabel)}
- icon="close"
- size="md"
- hideLabel
- onClick={this.closeModal}
- />
</div>
<div className={styles.description}>
{`${intl.formatMessage(intlMessages.lockViewersDescription)}`}
@@ -243,7 +234,7 @@ class LockViewersComponent extends Component {
</div>
</div>
</div>
- </ModalBase>
+ </Modal>
);
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss b/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss
index 078b36e6daa2ef8be0ca1eaad6c887953eda040e..d853bc994fa7b827e4f86b8cac0465c61c0b3b7d 100755
--- a/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss
@@ -9,7 +9,6 @@
}
.title {
- position: relative;
left: var(--title-position-left);
color: var(--color-gray-dark);
font-weight: bold;
@@ -24,6 +23,7 @@
.container {
margin: var(--modal-margin);
+ margin-top: 0;
margin-bottom: var(--lg-padding-x);
}
diff --git a/bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx b/bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx
index 8c1ff95ce4ebf987cc2a0ef756add92400247c26..0310964efa5a54aa4f7c01fbf45481ebf7db3efc 100644
--- a/bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/modal/simple/component.jsx
@@ -6,7 +6,7 @@ import ModalBase, { withModalState } from '../base/component';
import { styles } from './styles';
const propTypes = {
- title: PropTypes.string.isRequired,
+ title: PropTypes.string,
dismiss: PropTypes.shape({
callback: PropTypes.func,
label: PropTypes.string.isRequired,
@@ -36,6 +36,7 @@ class ModalSimple extends Component {
render() {
const {
title,
+ hideBorder,
dismiss,
className,
modalisOpen,
@@ -50,18 +51,29 @@ class ModalSimple extends Component {
contentLabel={title}
{...otherProps}
>
- <header className={styles.header}>
+ {hideBorder ? <header className={styles.headerNoBorder}>
<h1 className={styles.title}>{title}</h1>
<Button
className={styles.dismiss}
label={dismiss.label}
- icon={'close'}
+ icon="close"
circle
hideLabel
onClick={this.handleDismiss}
- aria-describedby={'modalDismissDescription'}
+ aria-describedby="modalDismissDescription"
/>
- </header>
+ </header> : <header className={styles.header}>
+ <h1 className={styles.title}>{title}</h1>
+ <Button
+ className={styles.dismiss}
+ label={dismiss.label}
+ icon="close"
+ circle
+ hideLabel
+ onClick={this.handleDismiss}
+ aria-describedby="modalDismissDescription"
+ />
+ </header>}
<div className={styles.content}>
{this.props.children}
</div>
diff --git a/bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss b/bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss
index 082858dac0c7af25a33560a68ef26ae9b1f17776..dc3f9c01a8340f341cbe45977cdd95bee8f004a4 100644
--- a/bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss
@@ -22,6 +22,11 @@
flex-shrink: 0;
}
+.headerNoBorder {
+ display: flex;
+ flex-shrink: 0;
+}
+
.title {
@extend %text-elipsis;
flex: 1;
diff --git a/bigbluebutton-html5/imports/ui/components/video-preview/component.jsx b/bigbluebutton-html5/imports/ui/components/video-preview/component.jsx
index afcbab35d91f317622f5274a71b8f4005ad75540..927aa400bf7d8788f2015158315fbfb00bb1a3fc 100644
--- a/bigbluebutton-html5/imports/ui/components/video-preview/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/video-preview/component.jsx
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import Button from '/imports/ui/components/button/component';
-import ModalBase from '/imports/ui/components/modal/base/component';
import { notify } from '/imports/ui/services/notification';
import logger from '/imports/startup/client/logger';
+import Modal from '/imports/ui/components/modal/simple/component';
import { styles } from './styles';
const VIDEO_CONSTRAINTS = Meteor.settings.public.kurento.cameraConstraints;
@@ -175,82 +175,69 @@ class VideoPreview extends Component {
} = this.props;
return (
- <span>
- <ModalBase
- overlayClassName={styles.overlay}
- className={styles.modal}
- onRequestClose={this.handleProceed}
- >
- <header
- className={styles.header}
- >
- <Button
- className={styles.closeBtn}
- label={intl.formatMessage(intlMessages.closeLabel)}
- icon="close"
- size="md"
- hideLabel
- onClick={this.handleProceed}
+ <Modal
+ overlayClassName={styles.overlay}
+ className={styles.modal}
+ onRequestClose={this.handleProceed}
+ hideBorder
+ >
+ <div className={styles.title}>
+ {intl.formatMessage(intlMessages.webcamSettingsTitle)}
+ </div>
+ <div className={styles.content}>
+ <div className={styles.col}>
+ <video
+ id="preview"
+ className={styles.preview}
+ ref={(ref) => { this.video = ref; }}
+ autoPlay
+ playsInline
/>
- </header>
- <h3 className={styles.title}>
- {intl.formatMessage(intlMessages.webcamSettingsTitle)}
- </h3>
- <div className={styles.content}>
- <div className={styles.col}>
- <video
- id="preview"
- className={styles.preview}
- ref={(ref) => { this.video = ref; }}
- autoPlay
- playsInline
- />
- </div>
- <div className={styles.options}>
- <label className={styles.label}>
- {intl.formatMessage(intlMessages.cameraLabel)}
- </label>
- {this.state.availableWebcams && this.state.availableWebcams.length > 0 ? (
- <select
- value={this.state.webcamDeviceId}
- className={styles.select}
- onChange={this.handleSelectWebcam.bind(this)}
- >
- <option disabled>
- {intl.formatMessage(intlMessages.webcamOptionLabel)}
+ </div>
+ <div className={styles.options}>
+ <label className={styles.label}>
+ {intl.formatMessage(intlMessages.cameraLabel)}
+ </label>
+ {this.state.availableWebcams && this.state.availableWebcams.length > 0 ? (
+ <select
+ value={this.state.webcamDeviceId}
+ className={styles.select}
+ onChange={this.handleSelectWebcam.bind(this)}
+ >
+ <option disabled>
+ {intl.formatMessage(intlMessages.webcamOptionLabel)}
+ </option>
+ {this.state.availableWebcams.map((webcam, index) => (
+ <option key={index} value={webcam.deviceId}>
+ {webcam.label}
</option>
- {this.state.availableWebcams.map((webcam, index) => (
- <option key={index} value={webcam.deviceId}>
- {webcam.label}
- </option>
))}
- </select>
+ </select>
) :
- <select
- className={styles.select}
- >
- <option disabled>
- {intl.formatMessage(intlMessages.webcamNotFoundLabel)}
- </option>
- </select>}
- </div>
+ <select
+ className={styles.select}
+ >
+ <option disabled>
+ {intl.formatMessage(intlMessages.webcamNotFoundLabel)}
+ </option>
+ </select>}
</div>
- <div className={styles.footer}>
- <div className={styles.actions}>
- <Button
- label={intl.formatMessage(intlMessages.cancelLabel)}
- onClick={this.handleProceed}
- />
- <Button
- color="primary"
- label={intl.formatMessage(intlMessages.startSharingLabel)}
- onClick={() => this.handleStartSharing()}
- disabled={this.state.isStartSharingDisabled}
- />
- </div>
+ </div>
+ <div className={styles.footer}>
+ <div className={styles.actions}>
+ <Button
+ label={intl.formatMessage(intlMessages.cancelLabel)}
+ onClick={this.handleProceed}
+ />
+ <Button
+ color="primary"
+ label={intl.formatMessage(intlMessages.startSharingLabel)}
+ onClick={() => this.handleStartSharing()}
+ disabled={this.state.isStartSharingDisabled}
+ />
</div>
- </ModalBase>
- </span>
+ </div>
+ </Modal>
);
}
}
diff --git a/bigbluebutton-html5/imports/ui/components/video-preview/styles.scss b/bigbluebutton-html5/imports/ui/components/video-preview/styles.scss
index b21e8649b2ef12679e1dcd8159a7d8afb27ece00..33134178b8670575f47ab99868984d582aa7d24c 100644
--- a/bigbluebutton-html5/imports/ui/components/video-preview/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-preview/styles.scss
@@ -73,6 +73,8 @@
}
.title {
+ display: block;
+ color: var(--color-background);
font-size: 1.4rem;
text-align: center;
}