fix(rn,bottom-sheet) fix styling after refactor

I somehow missed all other usages of the ColorSchemeRegistry.

react/features/mobile/audio-mode/components/AudioRoutePickerDialog.js

@@ -4,8 +4,8 @@ import _ from 'lodash';
 import React, { Component } from 'react';
 import { NativeModules, Text, TouchableHighlight, View } from 'react-native';
 
-import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { hideDialog, BottomSheet } from '../../../base/dialog';
+import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
 import { translate } from '../../../base/i18n';
 import {
     Icon,
@@ -16,7 +16,7 @@ import {
     IconDeviceSpeaker
 } from '../../../base/icons';
 import { connect } from '../../../base/redux';
-import { ColorPalette, type StyleType } from '../../../base/styles';
+import { ColorPalette } from '../../../base/styles';
 
 import styles from './styles';
 
@@ -85,11 +85,6 @@ type RawDevice = {
  */
 type Props = {
 
-    /**
-     * Style of the bottom sheet feature.
-     */
-    _bottomSheetStyles: StyleType,
-
     /**
      * Object describing available devices.
      */
@@ -276,7 +271,6 @@ class AudioRoutePickerDialog extends Component<Props, State> {
      * @returns {ReactElement}
      */
     _renderDevice(device: Device) {
-        const { _bottomSheetStyles } = this.props;
         const { icon, selected, text } = device;
         const selectedStyle = selected ? styles.selectedText : {};
 
@@ -288,8 +282,8 @@ class AudioRoutePickerDialog extends Component<Props, State> {
                 <View style = { styles.deviceRow } >
                     <Icon
                         src = { icon }
-                        style = { [ styles.deviceIcon, _bottomSheetStyles.buttons.iconStyle, selectedStyle ] } />
+                        style = { [ styles.deviceIcon, bottomSheetStyles.buttons.iconStyle, selectedStyle ] } />
-                    <Text style = { [ styles.deviceText, _bottomSheetStyles.buttons.labelStyle, selectedStyle ] } >
+                    <Text style = { [ styles.deviceText, bottomSheetStyles.buttons.labelStyle, selectedStyle ] } >
                         { text }
                     </Text>
                 </View>
@@ -304,14 +298,14 @@ class AudioRoutePickerDialog extends Component<Props, State> {
      * @returns {ReactElement}
      */
     _renderNoDevices() {
-        const { _bottomSheetStyles, t } = this.props;
+        const { t } = this.props;
 
         return (
             <View style = { styles.deviceRow } >
                 <Icon
                     src = { deviceInfoMap.SPEAKER.icon }
-                    style = { [ styles.deviceIcon, _bottomSheetStyles.buttons.iconStyle ] } />
+                    style = { [ styles.deviceIcon, bottomSheetStyles.buttons.iconStyle ] } />
-                <Text style = { [ styles.deviceText, _bottomSheetStyles.buttons.labelStyle ] } >
+                <Text style = { [ styles.deviceText, bottomSheetStyles.buttons.labelStyle ] } >
                     { t('audioDevices.none') }
                 </Text>
             </View>
@@ -350,7 +344,6 @@ class AudioRoutePickerDialog extends Component<Props, State> {
  */
 function _mapStateToProps(state) {
     return {
-        _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
         _devices: state['features/mobile/audio-mode'].devices
     };
 }

react/features/recent-list/components/RecentListItemMenu.native.js

@@ -3,11 +3,10 @@
 import React, { PureComponent } from 'react';
 import { Text, View } from 'react-native';
 
-import { ColorSchemeRegistry } from '../../base/color-scheme';
 import { BottomSheet, hideDialog, isDialogOpen } from '../../base/dialog';
+import { bottomSheetStyles } from '../../base/dialog/components/native/styles';
 import { type Item } from '../../base/react/Types';
 import { connect } from '../../base/redux';
-import { StyleType } from '../../base/styles';
 
 import DeleteItemButton from './DeleteItemButton.native';
 import ShowDialInInfoButton from './ShowDialInInfoButton.native';
@@ -25,11 +24,6 @@ type Props = {
      */
     item: Item,
 
-    /**
-     * The color-schemed stylesheet of the BottomSheet.
-     */
-    _bottomSheetStyles: StyleType,
-
     /**
      * True if the menu is currently open, false otherwise.
      */
@@ -61,12 +55,12 @@ class RecentListItemMenu extends PureComponent<Props> {
      * @inheritdoc
      */
     render() {
-        const { _bottomSheetStyles, item } = this.props;
+        const { item } = this.props;
         const buttonProps = {
             afterClick: this._onCancel,
             itemId: item.id,
             showLabel: true,
-            styles: _bottomSheetStyles.buttons
+            styles: bottomSheetStyles.buttons
         };
 
         return (
@@ -105,12 +99,12 @@ class RecentListItemMenu extends PureComponent<Props> {
      * @returns {React$Element}
      */
     _renderMenuHeader() {
-        const { _bottomSheetStyles, item } = this.props;
+        const { item } = this.props;
 
         return (
             <View
                 style = { [
-                    _bottomSheetStyles.sheet,
+                    bottomSheetStyles.sheet,
                     styles.entryNameContainer
                 ] }>
                 <Text
@@ -133,7 +127,6 @@ class RecentListItemMenu extends PureComponent<Props> {
  */
 function _mapStateToProps(state) {
     return {
-        _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
         _isOpen: isDialogOpen(state, RecentListItemMenu_)
     };
 }

react/features/video-menu/components/native/ConnectionStatusComponent.js

@@ -6,15 +6,14 @@ import { withTheme } from 'react-native-paper';
 
 
 import { Avatar } from '../../../base/avatar';
-import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { getSourceNameSignalingFeatureFlag } from '../../../base/config';
 import { BottomSheet, isDialogOpen, hideDialog } from '../../../base/dialog';
+import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
 import { translate } from '../../../base/i18n';
 import { IconArrowDownLarge, IconArrowUpLarge } from '../../../base/icons';
 import { getParticipantDisplayName } from '../../../base/participants';
 import { BaseIndicator } from '../../../base/react';
 import { connect } from '../../../base/redux';
-import { StyleType } from '../../../base/styles';
 import { getSourceNameByParticipantId } from '../../../base/tracks';
 import statsEmitter from '../../../connection-indicator/statsEmitter';
 
@@ -43,11 +42,6 @@ export type Props = {
      */
     participantID: string,
 
-    /**
-     * The color-schemed stylesheet of the BottomSheet.
-     */
-    _bottomSheetStyles: StyleType,
-
     /**
      * True if the menu is currently open, false otherwise.
      */
@@ -442,12 +436,12 @@ class ConnectionStatusComponent extends Component<Props, State> {
      * @returns {React$Element}
      */
     _renderMenuHeader() {
-        const { _bottomSheetStyles, participantID } = this.props;
+        const { participantID } = this.props;
 
         return (
             <View
                 style = { [
-                    _bottomSheetStyles.sheet,
+                    bottomSheetStyles.sheet,
                     styles.participantNameContainer ] }>
                 <Avatar
                     participantId = { participantID }
@@ -472,7 +466,6 @@ function _mapStateToProps(state, ownProps) {
     const { participantID } = ownProps;
 
     return {
-        _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
         _isOpen: isDialogOpen(state, ConnectionStatusComponent_),
         _participantDisplayName: getParticipantDisplayName(state, participantID),
         _sourceNameSignalingEnabled: getSourceNameSignalingFeatureFlag(state),

react/features/video-menu/components/native/LocalVideoMenu.js

@@ -4,15 +4,14 @@ import React, { PureComponent } from 'react';
 import { Text, View } from 'react-native';
 
 import { Avatar } from '../../../base/avatar';
-import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { BottomSheet, isDialogOpen } from '../../../base/dialog';
+import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
 import { translate } from '../../../base/i18n';
 import {
     getLocalParticipant,
     getParticipantDisplayName
 } from '../../../base/participants';
 import { connect } from '../../../base/redux';
-import { StyleType } from '../../../base/styles';
 import ToggleSelfViewButton from '../../../toolbox/components/native/ToggleSelfViewButton';
 import { hideLocalVideoMenu } from '../../actions.native';
 
@@ -27,11 +26,6 @@ const AVATAR_SIZE = 24;
 
 type Props = {
 
-    /**
-     * The color-schemed stylesheet of the BottomSheet.
-     */
-    _bottomSheetStyles: StyleType,
-
     /**
      * True if the menu is currently open, false otherwise.
      */
@@ -83,12 +77,12 @@ class LocalVideoMenu extends PureComponent<Props> {
      * @inheritdoc
      */
     render() {
-        const { _participant, _bottomSheetStyles } = this.props;
+        const { _participant } = this.props;
         const buttonProps = {
             afterClick: this._onCancel,
             showLabel: true,
             participantID: _participant.id,
-            styles: _bottomSheetStyles.buttons
+            styles: bottomSheetStyles.buttons
         };
 
         return (
@@ -128,12 +122,12 @@ class LocalVideoMenu extends PureComponent<Props> {
      * @returns {React$Element}
      */
     _renderMenuHeader() {
-        const { _bottomSheetStyles, _participant } = this.props;
+        const { _participant } = this.props;
 
         return (
             <View
                 style = { [
-                    _bottomSheetStyles.sheet,
+                    bottomSheetStyles.sheet,
                     styles.participantNameContainer ] }>
                 <Avatar
                     participantId = { _participant.id }
@@ -157,7 +151,6 @@ function _mapStateToProps(state) {
     const participant = getLocalParticipant(state);
 
     return {
-        _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
         _isOpen: isDialogOpen(state, LocalVideoMenu_),
         _participant: participant,
         _participantDisplayName: getParticipantDisplayName(state, participant.id)

react/features/video-menu/components/native/RemoteVideoMenu.js

@@ -5,8 +5,8 @@ import { Text, View } from 'react-native';
 import { Divider } from 'react-native-paper';
 
 import { Avatar } from '../../../base/avatar';
-import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { BottomSheet, isDialogOpen } from '../../../base/dialog';
+import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
 import { KICK_OUT_ENABLED, getFeatureFlag } from '../../../base/flags';
 import { translate } from '../../../base/i18n';
 import {
@@ -14,7 +14,6 @@ import {
     getParticipantDisplayName
 } from '../../../base/participants';
 import { connect } from '../../../base/redux';
-import { StyleType } from '../../../base/styles';
 import { getBreakoutRooms, getCurrentRoomId } from '../../../breakout-rooms/functions';
 import PrivateMessageButton from '../../../chat/components/native/PrivateMessageButton';
 import { hideRemoteVideoMenu } from '../../actions.native';
@@ -50,11 +49,6 @@ type Props = {
      */
     participantId: String,
 
-    /**
-     * The color-schemed stylesheet of the BottomSheet.
-     */
-    _bottomSheetStyles: StyleType,
-
     /**
      * The id of the current room.
      */
@@ -146,7 +140,7 @@ class RemoteVideoMenu extends PureComponent<Props> {
             afterClick: this._onCancel,
             showLabel: true,
             participantID: participantId,
-            styles: this.props._bottomSheetStyles.buttons
+            styles: bottomSheetStyles.buttons
         };
 
         return (
@@ -207,12 +201,12 @@ class RemoteVideoMenu extends PureComponent<Props> {
      * @returns {React$Element}
      */
     _renderMenuHeader() {
-        const { _bottomSheetStyles, participantId } = this.props;
+        const { participantId } = this.props;
 
         return (
             <View
                 style = { [
-                    _bottomSheetStyles.sheet,
+                    bottomSheetStyles.sheet,
                     styles.participantNameContainer ] }>
                 <Avatar
                     participantId = { participantId }
@@ -244,7 +238,6 @@ function _mapStateToProps(state, ownProps) {
     const shouldDisableKick = disableKick || !kickOutEnabled;
 
     return {
-        _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
         _currentRoomId,
         _disableKick: Boolean(shouldDisableKick),
         _disableRemoteMute: Boolean(disableRemoteMute),

react/features/video-menu/components/native/SharedVideoMenu.js

@@ -5,14 +5,13 @@ import { Text, View } from 'react-native';
 import { Divider } from 'react-native-paper';
 
 import { Avatar } from '../../../base/avatar';
-import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { BottomSheet, isDialogOpen } from '../../../base/dialog';
+import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
 import {
     getParticipantById,
     getParticipantDisplayName
 } from '../../../base/participants';
 import { connect } from '../../../base/redux';
-import { StyleType } from '../../../base/styles';
 import { SharedVideoButton } from '../../../shared-video/components';
 import { hideSharedVideoMenu } from '../../actions.native';
 
@@ -36,11 +35,6 @@ type Props = {
      */
     participantId: string,
 
-    /**
-     * The color-schemed stylesheet of the BottomSheet.
-     */
-    _bottomSheetStyles: StyleType,
-
     /**
      * True if the menu is currently open, false otherwise.
      */
@@ -91,7 +85,7 @@ class SharedVideoMenu extends PureComponent<Props> {
             afterClick: this._onCancel,
             showLabel: true,
             participantID: participantId,
-            styles: this.props._bottomSheetStyles.buttons
+            styles: bottomSheetStyles.buttons
         };
 
         return (
@@ -131,12 +125,12 @@ class SharedVideoMenu extends PureComponent<Props> {
      * @returns {React$Element}
      */
     _renderMenuHeader() {
-        const { _bottomSheetStyles, participantId } = this.props;
+        const { participantId } = this.props;
 
         return (
             <View
                 style = { [
-                    _bottomSheetStyles.sheet,
+                    bottomSheetStyles.sheet,
                     styles.participantNameContainer ] }>
                 <Avatar
                     participantId = { participantId }
@@ -162,7 +156,6 @@ function _mapStateToProps(state, ownProps) {
     const isParticipantAvailable = getParticipantById(state, participantId);
 
     return {
-        _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
         _isOpen: isDialogOpen(state, SharedVideoMenu_),
         _isParticipantAvailable: Boolean(isParticipantAvailable),
         _participantDisplayName: getParticipantDisplayName(state, participantId)