diff --git a/react/features/recording/components/AbstractRecordingLabel.js b/react/features/recording/components/AbstractRecordingLabel.js index 7a67d02e4..c82998423 100644 --- a/react/features/recording/components/AbstractRecordingLabel.js +++ b/react/features/recording/components/AbstractRecordingLabel.js @@ -20,6 +20,11 @@ type Props = { */ _status: ?string, + /** + * An object containing the CSS classes. + */ + classes: ?{[ key: string]: string}, + /** * The recording mode this indicator should display. */ diff --git a/react/features/recording/components/web/RecordingLabel.js b/react/features/recording/components/web/RecordingLabel.js index eb7c9ecbb..a44903ef6 100644 --- a/react/features/recording/components/web/RecordingLabel.js +++ b/react/features/recording/components/web/RecordingLabel.js @@ -1,5 +1,6 @@ // @flow +import { withStyles } from '@material-ui/core/styles'; import React from 'react'; import { translate } from '../../../base/i18n'; @@ -10,6 +11,24 @@ import AbstractRecordingLabel, { _mapStateToProps } from '../AbstractRecordingLabel'; +/** + * Creates the styles for the component. + * + * @param {Object} theme - The current UI theme. + * + * @returns {Object} + */ +const styles = theme => { + return { + [JitsiRecordingConstants.mode.STREAM]: { + background: theme.palette.ui03 + }, + [JitsiRecordingConstants.mode.FILE]: { + background: theme.palette.iconError + } + }; +}; + /** * Implements a React {@link Component} which displays the current state of * conference recording. @@ -29,11 +48,13 @@ class RecordingLabel extends AbstractRecordingLabel { return null; } + const { classes, mode, t } = this.props; + return (
); } @@ -41,4 +62,4 @@ class RecordingLabel extends AbstractRecordingLabel { _getLabelKey: () => ?string } -export default translate(connect(_mapStateToProps)(RecordingLabel)); +export default withStyles(styles)(translate(connect(_mapStateToProps)(RecordingLabel)));