fix(Labels): Recording label background color

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.
      */

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 (
             <div>
                 <Label
-                    className = { this.props.mode }
-                    text = { this.props.t(this._getLabelKey()) } />
+                    className = { classes && classes[mode] }
+                    text = { t(this._getLabelKey()) } />
             </div>
         );
     }
@@ -41,4 +62,4 @@ class RecordingLabel extends AbstractRecordingLabel {
     _getLabelKey: () => ?string
 }
 
-export default translate(connect(_mapStateToProps)(RecordingLabel));
+export default withStyles(styles)(translate(connect(_mapStateToProps)(RecordingLabel)));