rn,recording: fix not displaying Dropbox storage text

react/features/recording/components/Recording/StartRecordingDialogContent.js

@@ -6,6 +6,7 @@ import {
     createRecordingDialogEvent,
     sendAnalytics
 } from '../../../analytics';
+import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import {
     _abstractMapStateToProps
 } from '../../../base/dialog';
@@ -22,16 +23,12 @@ import { connect } from '../../../base/redux';
 import { ColorPalette, StyleType } from '../../../base/styles';
 import { authorizeDropbox, updateDropboxToken } from '../../../dropbox';
 
-import {
-    default as styles,
-    DROPBOX_LOGO,
-    ICON_SHARE,
-    JITSI_LOGO
-} from './styles';
-
 import { RECORDING_TYPES } from '../../constants';
 import { getRecordingDurationEstimation } from '../../functions';
 
+import { DROPBOX_LOGO, ICON_SHARE, JITSI_LOGO } from './styles';
+
+
 type Props = {
 
     /**
@@ -39,6 +36,11 @@ type Props = {
      */
     _dialogStyles: StyleType,
 
+    /**
+     * The color-schemed stylesheet of this component.
+     */
+    _styles: StyleType,
+
     /**
      * The redux dispatch function.
      */
@@ -138,6 +140,8 @@ class StartRecordingDialogContent extends Component<Props> {
      * @returns {React$Component}
      */
     render() {
+        const { _styles: styles } = this.props;
+
         return (
             <Container
                 className = 'recording-dialog'
@@ -161,10 +165,13 @@ class StartRecordingDialogContent extends Component<Props> {
 
         const {
             _dialogStyles,
+            _styles: styles,
             isValidating,
             onSharingSettingChanged,
             selectedRecordingService,
-            sharingSetting, t } = this.props;
+            sharingSetting,
+            t
+        } = this.props;
 
         const controlDisabled = selectedRecordingService !== RECORDING_TYPES.JITSI_REC_SERVICE;
         let mainContainerClasses = 'recording-header recording-header-line';
@@ -222,7 +229,7 @@ class StartRecordingDialogContent extends Component<Props> {
             return null;
         }
 
-        const { _dialogStyles, isValidating, t } = this.props;
+        const { _dialogStyles, _styles: styles, isValidating, t } = this.props;
 
         const switchContent
             = this.props.integrationsEnabled
@@ -274,7 +281,7 @@ class StartRecordingDialogContent extends Component<Props> {
             return null;
         }
 
-        const { _dialogStyles, isTokenValid, isValidating, t } = this.props;
+        const { _dialogStyles, _styles: styles, isTokenValid, isValidating, t } = this.props;
 
         let content = null;
         let switchContent = null;
@@ -421,7 +428,7 @@ class StartRecordingDialogContent extends Component<Props> {
      * @returns {React$Component}
      */
     _renderSignOut() {
-        const { spaceLeft, t, userName } = this.props;
+        const { _styles: styles, spaceLeft, t, userName } = this.props;
         const duration = getRecordingDurationEstimation(spaceLeft);
 
         return (
@@ -471,12 +478,22 @@ class StartRecordingDialogContent extends Component<Props> {
      * @returns {void}
      */
     _onSignOut() {
-        sendAnalytics(
-            createRecordingDialogEvent('start', 'signOut.button')
-        );
+        sendAnalytics(createRecordingDialogEvent('start', 'signOut.button'));
         this.props.dispatch(updateDropboxToken());
     }
 }
 
-export default translate(
-    connect(_abstractMapStateToProps)(StartRecordingDialogContent));
+/**
+ * Maps part of the redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {Props}
+ */
+function _mapStateToProps(state) {
+    return {
+        ..._abstractMapStateToProps(state),
+        _styles: ColorSchemeRegistry.get(state, 'StartRecordingDialogContent')
+    };
+}
+
+export default translate(connect(_mapStateToProps)(StartRecordingDialogContent));

react/features/recording/components/Recording/styles.native.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
 import { BoxModel, ColorPalette } from '../../../base/styles';
 
 // XXX The "standard" {@code BoxModel.padding} has been deemed insufficient in
@@ -13,9 +14,10 @@ export const ICON_SHARE = require('../../../../../images/icon-users.png');
 export const JITSI_LOGO = require('../../../../../images/jitsiLogo_square.png');
 
 /**
- * The styles of the React {@code Components} of the feature recording.
+ * Color schemed styles for the @{code StartRecordingDialogContent} component.
  */
-export default {
+ColorSchemeRegistry.register('StartRecordingDialogContent', {
+
     container: {
         flex: 0,
         flexDirection: 'column'
@@ -64,6 +66,6 @@ export default {
     },
 
     text: {
-        color: ColorPalette.white
+        color: schemeColor('text')
     }
-};
+});