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

I somehow missed all other usages of the ColorSchemeRegistry.
This commit is contained in:
Saúl Ibarra Corretgé 2022-06-14 12:20:16 +02:00 committed by Saúl Ibarra Corretgé
parent 59ee984e09
commit 78d8176cc8
6 changed files with 28 additions and 70 deletions

View File

@ -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 ] } />
<Text style = { [ styles.deviceText, _bottomSheetStyles.buttons.labelStyle, selectedStyle ] } >
style = { [ styles.deviceIcon, bottomSheetStyles.buttons.iconStyle, 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 ] } />
<Text style = { [ styles.deviceText, _bottomSheetStyles.buttons.labelStyle ] } >
style = { [ styles.deviceIcon, bottomSheetStyles.buttons.iconStyle ] } />
<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
};
}

View File

@ -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_)
};
}

View File

@ -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),

View File

@ -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)

View File

@ -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),

View File

@ -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)