haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mobile UI polish (#10982) 

Updated screens with new ui on mobile
This commit is contained in:
Calinteodor 2022-02-17 16:51:00 +02:00 committed by GitHub
parent c4ddaa8b87
commit b1be511d67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 173 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
react/features/base/dialog/components/native/styles.js
View File

@ -263,11 +263,12 @@ ColorSchemeRegistry.register('Dialog', {
},
text: {
...brandedDialogText
...brandedDialogText,
color: BaseTheme.palette.text01
},
topBorderContainer: {
borderTopColor: schemeColor('border'),
borderTopColor: BaseTheme.palette.dividerColor,
borderTopWidth: 1
}
});

9
react/features/base/ui/Tokens.js
View File

@ -36,6 +36,7 @@ export const colors = {
surface12: '#AAAAAA',
surface13: '#495258',
surface14: '#555555',
surface15: '#474747',
success04: '#189B55',
success05: '#1EC26A',
@ -69,6 +70,8 @@ export const colorMap = {
ui05: 'surface06',
ui12: 'surface11',
ui13: 'surface14',
ui14: 'surface15',
ui15: 'surface12',
// Primary buttons
action01: 'primary05',
@ -201,6 +204,9 @@ export const colorMap = {
// Color for the section divider
dividerColor: 'surface12',
// Color for indicator
indicatorColor: 'surface12',
// Background for high-contrast input fields on hover
field02Hover: 'primary09',
@ -260,6 +266,9 @@ export const colorMap = {
// Color for disabled tab
tab01Disabled: 'disabled01',
// Color for enabled lobby mode switch
lobbySwitch01Active: 'success04',
// Color for disabled video switch
video01Disabled: 'disabled01',

3
react/features/chat/components/native/ChatInputBar.js
View File

@ -5,6 +5,7 @@ import { Platform, TextInput, TouchableOpacity, View } from 'react-native';
import { translate } from '../../../base/i18n';
import { Icon, IconChatSend } from '../../../base/icons';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import styles from './styles';
@ -82,7 +83,9 @@ class ChatInputBar extends Component<Props, State> {
onFocus = { this._onFocused(true) }
onSubmitEditing = { this._onSubmit }
placeholder = { this.props.t('chat.fieldPlaceHolder') }
placeholderTextColor = { BaseTheme.palette.text03 }
returnKeyType = 'send'
selectionColor = { BaseTheme.palette.text03 }
style = { styles.inputField }
value = { this.state.message } />
{

7
react/features/chat/components/native/styles.js
View File

@ -60,7 +60,7 @@ export default {
},
inputField: {
color: 'rgb(28, 32, 37)',
color: BaseTheme.palette.text01,
flex: 1,
height: 48
},
@ -95,7 +95,7 @@ export default {
},
sendButtonIcon: {
color: ColorPalette.darkGrey,
color: BaseTheme.palette.icon01,
fontSize: 22
},
@ -124,6 +124,7 @@ export default {
},
chatContainer: {
backgroundColor: BaseTheme.palette.ui01,
flex: 1
},
@ -165,7 +166,7 @@ ColorSchemeRegistry.register('Chat', {
},
emptyComponentText: {
color: BaseTheme.palette.ui05,
color: BaseTheme.palette.text03,
textAlign: 'center'
},

9
react/features/invite/components/add-people-dialog/native/styles.js
View File

@ -11,6 +11,7 @@ export const ICON_SIZE = 15;
export default {
addPeopleContainer: {
backgroundColor: BaseTheme.palette.ui01,
flex: 1
},
@ -75,7 +76,7 @@ export default {
},
itemText: {
color: DARK_GREY,
color: BaseTheme.palette.text01,
fontSize: 14,
fontWeight: 'normal'
},
@ -104,14 +105,14 @@ export default {
},
selectedIcon: {
color: DARK_GREY,
color: BaseTheme.palette.icon01,
fontSize: 20,
marginRight: BoxModel.margin,
padding: 2
},
separator: {
borderBottomColor: LIGHT_GREY,
borderBottomColor: BaseTheme.palette.dividerColor,
borderBottomWidth: 1,
marginLeft: 85
},
@ -146,7 +147,7 @@ export default {
},
unselectIcon: {
color: LIGHT_GREY,
color: BaseTheme.palette.ui01,
fontSize: 16,
left: AVATAR_SIZE / -3,
position: 'relative',

8
react/features/invite/components/dial-in-summary/native/styles.js
View File

@ -1,10 +1,10 @@
// @flow
import { ColorPalette } from '../../../../base/styles';
import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
export const INDICATOR_COLOR = ColorPalette.lightGrey;
export const INDICATOR_COLOR = BaseTheme.palette.indicatorColor;
const WV_BACKGROUND = 'rgb(71, 71, 71)';
const WV_BACKGROUND = BaseTheme.palette.ui14;
export default {
@ -15,7 +15,7 @@ export default {
indicatorWrapper: {
alignItems: 'center',
backgroundColor: ColorPalette.white,
backgroundColor: BaseTheme.palette.ui12,
height: '100%',
justifyContent: 'center'
},

12
react/features/lobby/components/native/LobbyModeSwitch.js
View File

@ -6,11 +6,7 @@ import { Switch, View } from 'react-native';
import { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux';
import styles, {
ENABLED_THUMB_COLOR,
ENABLED_TRACK_COLOR,
DISABLED_THUMB_COLOR
} from './styles';
import styles, { ENABLED_TRACK_COLOR, THUMB_COLOR } from './styles';
/**
* The type of the React {@code Component} props of {@link LobbyModeSwitch}.
@ -44,11 +40,7 @@ function LobbyModeSwitch(
<Switch
onValueChange = { onToggleLobbyMode }
style = { styles.lobbySwitchIcon }
thumbColor = {
lobbyEnabled
? ENABLED_THUMB_COLOR
: DISABLED_THUMB_COLOR
}
thumbColor = { THUMB_COLOR }
trackColor = {{ true: ENABLED_TRACK_COLOR }}
value = { lobbyEnabled } />
</View>

11
react/features/lobby/components/native/styles.js
View File

@ -4,16 +4,15 @@ import BaseTheme from '../../../base/ui/components/BaseTheme';
const SECONDARY_COLOR = BaseTheme.palette.border04;
export const ENABLED_THUMB_COLOR = BaseTheme.palette.action04;
export const ENABLED_TRACK_COLOR = BaseTheme.palette.screen01Header;
export const DISABLED_THUMB_COLOR = BaseTheme.palette.icon04;
export const ENABLED_TRACK_COLOR = BaseTheme.palette.lobbySwitch01Active;
export const THUMB_COLOR = BaseTheme.palette.field02;
export default {
button: {
alignItems: 'center',
borderRadius: 4,
marginVertical: 4,
paddingVertical: 8
marginVertical: BaseTheme.spacing[1],
paddingVertical: BaseTheme.spacing[2]
},
contentWrapper: {
@ -33,7 +32,7 @@ export default {
fontSize: 18,
fontWeight: 'bold',
margin: 'auto',
marginVertical: 24,
marginVertical: BaseTheme.spacing[3],
textAlign: 'center'
},

6
react/features/mobile/navigation/components/chat/components/ChatAndPollsNavigationContainer.js
View File

@ -8,6 +8,7 @@ import {
getClientHeight,
getClientWidth
} from '../../../../../base/modal/components/functions.native';
import BaseTheme from '../../../../../base/ui/components/BaseTheme.native';
import { Chat } from '../../../../../chat';
import { PollsPane } from '../../../../../polls/components';
import { screen } from '../../../routes';
@ -28,7 +29,10 @@ const ChatAndPollsNavigationContainer = () => {
width: clientWidth
}}
screenOptions = {{
...chatTabBarOptions
...chatTabBarOptions,
tabBarStyle: {
backgroundColor: BaseTheme.palette.ui01
}
}}>
<ChatTab.Screen
component = { Chat }

2
react/features/mobile/navigation/screenOptions.js
View File

@ -185,7 +185,7 @@ export const chatTabBarOptions = {
tabBarLabelStyle: {
fontSize: BaseTheme.typography.labelRegular.fontSize
},
tabBarInactiveTintColor: BaseTheme.palette.field02Disabled,
tabBarInactiveTintColor: BaseTheme.palette.text01,
tabBarIndicatorStyle: {
backgroundColor: BaseTheme.palette.screen01Header
}

12
react/features/polls/components/native/PollAnswer.js
View File

@ -4,6 +4,7 @@ import React from 'react';
import { Switch, Text, View } from 'react-native';
import { Button } from 'react-native-paper';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import { BUTTON_MODES } from '../../../chat/constants';
import { isSubmitAnswerDisabled } from '../../functions';
import AbstractPollAnswer from '../AbstractPollAnswer';
@ -38,21 +39,26 @@ const PollAnswer = (props: AbstractProps) => {
/* eslint-disable react/jsx-no-bind */
onValueChange = { state => setCheckbox(index, state) }
value = { checkBoxStates[index] } />
<Text>{answer.name}</Text>
<Text style = { chatStyles.switchLabel }>{answer.name}</Text>
</View>
))}
</View>
<View style = { chatStyles.buttonRow }>
<Button
color = '#3D3D3D'
color = { BaseTheme.palette.action02 }
mode = { BUTTON_MODES.CONTAINED }
onPress = { changingVote ? skipChangeVote : skipAnswer }
style = { chatStyles.pollCreateButton } >
{t('polls.answer.skip')}
</Button>
<Button
color = '#17a0db'
color = { BaseTheme.palette.screen01Header }
disabled = { isSubmitAnswerDisabled(checkBoxStates) }
labelStyle = {
isSubmitAnswerDisabled(checkBoxStates)
? chatStyles.pollSendDisabledLabel
: chatStyles.pollSendLabel
}
mode = { BUTTON_MODES.CONTAINED }
onPress = { submitAnswer }
style = { chatStyles.pollCreateButton } >

20
react/features/polls/components/native/PollCreate.js
View File

@ -5,6 +5,7 @@ import { View, TextInput, FlatList, TouchableOpacity } from 'react-native';
import { Button } from 'react-native-paper';
import { Icon, IconClose } from '../../../base/icons';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import { BUTTON_MODES } from '../../../chat/constants';
import { CHAR_LIMIT } from '../../constants';
import AbstractPollCreate from '../AbstractPollCreate';
@ -12,6 +13,7 @@ import type { AbstractProps } from '../AbstractPollCreate';
import { chatStyles, dialogStyles } from './styles';
const PollCreate = (props: AbstractProps) => {
@ -111,11 +113,14 @@ const PollCreate = (props: AbstractProps) => {
onChangeText = { text => setAnswer(index, text) }
onKeyPress = { ev => onAnswerKeyDown(index, ev) }
placeholder = { t('polls.create.answerPlaceholder', { index: index + 1 }) }
placeholderTextColor = { BaseTheme.palette.text03 }
ref = { input => registerFieldRef(index, input) }
selectionColor = { BaseTheme.palette.text03 }
style = { dialogStyles.field }
value = { answers[index] } />
{answers.length > 2
{
answers.length > 2
&& createIconButton(IconClose, () => removeAnswer(index))
}
</View>
@ -132,6 +137,8 @@ const PollCreate = (props: AbstractProps) => {
onChangeText = { setQuestion }
onSubmitEditing = { onQuestionKeyDown }
placeholder = { t('polls.create.questionPlaceholder') }
placeholderTextColor = { BaseTheme.palette.text03 }
selectionColor = { BaseTheme.palette.text03 }
style = { dialogStyles.question }
value = { question } />
<FlatList
@ -143,7 +150,7 @@ const PollCreate = (props: AbstractProps) => {
renderItem = { renderListItem } />
<View style = { chatStyles.pollCreateButtonsContainer }>
<Button
color = '#3D3D3D'
color = { BaseTheme.palette.action02 }
mode = { BUTTON_MODES.CONTAINED }
onPress = { () => {
// adding and answer
@ -156,7 +163,7 @@ const PollCreate = (props: AbstractProps) => {
<View
style = { chatStyles.buttonRow }>
<Button
color = '#3D3D3D'
color = { BaseTheme.palette.action02 }
mode = { BUTTON_MODES.CONTAINED }
onPress = { () => setCreateMode(false) }
style = { chatStyles.pollCreateButton } >
@ -164,8 +171,13 @@ const PollCreate = (props: AbstractProps) => {
</Button>
<Button
color = '#17a0db'
color = { BaseTheme.palette.screen01Header }
disabled = { isSubmitDisabled }
labelStyle = {
isSubmitDisabled
? chatStyles.pollSendDisabledLabel
: chatStyles.pollSendLabel
}
mode = { BUTTON_MODES.CONTAINED }
onPress = { onSubmit }
style = { chatStyles.pollCreateButton } >

6
react/features/polls/components/native/PollResults.js
View File

@ -65,7 +65,11 @@ const PollResults = (props: AbstractProps) => {
{ voters && voterCount > 0
&& <View style = { resultsStyles.voters }>
{voters.map(({ id, name: voterName }) =>
<Text key = { id }>{ voterName }</Text>
(<Text
key = { id }
style = { resultsStyles.voter }>
{ voterName }
</Text>)
)}
</View>}
</View>

10
react/features/polls/components/native/PollsList.js
View File

@ -31,10 +31,14 @@ const PollsList = () => {
return (
<>
{listPolls.length === 0
{
listPolls.length === 0
&& <Text style = { chatStyles.noPollText } >
{t('polls.results.empty')}
</Text>}
{
t('polls.results.empty')
}
</Text>
}
<FlatList
data = { listPolls }
extraData = { listPolls }

25
react/features/polls/components/native/styles.js
View File

@ -1,7 +1,7 @@
// @flow
import { ColorPalette, createStyleSheet } from '../../../base/styles';
import BaseTheme from '../../../base/ui/components/BaseTheme';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
export const answerStyles = createStyleSheet({
question: {
@ -21,6 +21,7 @@ export const answerStyles = createStyleSheet({
export const dialogStyles = createStyleSheet({
question: {
color: BaseTheme.palette.text01,
fontSize: 16,
fontWeight: 'bold',
marginVertical: 4
@ -31,6 +32,7 @@ export const dialogStyles = createStyleSheet({
},
field: {
color: BaseTheme.palette.text01,
borderBottomWidth: 1,
borderColor: ColorPalette.blue,
fontSize: 14,
@ -85,6 +87,10 @@ export const resultsStyles = createStyleSheet({
marginVertical: 4
},
voter: {
color: BaseTheme.palette.text01
},
answerContainer: {
marginVertical: 2,
maxWidth: '100%'
@ -96,6 +102,7 @@ export const resultsStyles = createStyleSheet({
},
answer: {
color: BaseTheme.palette.text01,
flexShrink: 1
},
@ -124,7 +131,7 @@ export const chatStyles = createStyleSheet({
noPollText: {
flex: 1,
color: BaseTheme.palette.ui05,
color: BaseTheme.palette.text03,
textAlign: 'center',
paddingTop: '8%'
},
@ -155,6 +162,14 @@ export const chatStyles = createStyleSheet({
marginHorizontal: 8
},
pollSendLabel: {
color: BaseTheme.palette.text01
},
pollSendDisabledLabel: {
color: BaseTheme.palette.text03
},
buttonRow: {
flexDirection: 'row'
},
@ -169,6 +184,11 @@ export const chatStyles = createStyleSheet({
padding: 6
},
switchLabel: {
color: BaseTheme.palette.text01,
marginLeft: BaseTheme.spacing[2]
},
pollCreateAddButton: {
margin: BaseTheme.spacing[2]
},
@ -189,6 +209,7 @@ export const chatStyles = createStyleSheet({
},
PollPaneContainer: {
backgroundColor: BaseTheme.palette.ui01,
flex: 1
},

1
react/features/recording/components/LiveStream/native/StreamKeyForm.js
View File

@ -69,6 +69,7 @@ class StreamKeyForm extends AbstractStreamKeyForm<Props> {
onChangeText = { this._onInputChange }
placeholder = { t('liveStreaming.enterStreamKey') }
placeholderTextColor = { PLACEHOLDER_COLOR }
selectionColor = { PLACEHOLDER_COLOR }
style = { [
_dialogStyles.text,
styles.streamKeyInput

27
react/features/recording/components/LiveStream/native/styles.js
View File

@ -1,11 +1,7 @@
// @flow
import {
BoxModel,
ColorPalette,
createStyleSheet
} from '../../../../base/styles';
import BaseTheme from '../../../../base/ui/components/BaseTheme';
import { BoxModel, createStyleSheet } from '../../../../base/styles';
import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
/**
* Opacity of the TouchableHighlight.
@ -15,12 +11,12 @@ export const ACTIVE_OPACITY = 0.3;
/**
* Color for the key input field placeholder.
*/
export const PLACEHOLDER_COLOR = ColorPalette.lightGrey;
export const PLACEHOLDER_COLOR = BaseTheme.palette.text03;
/**
* Underlay of the TouchableHighlight.
*/
export const TOUCHABLE_UNDERLAY = ColorPalette.lightGrey;
export const TOUCHABLE_UNDERLAY = BaseTheme.palette.action03Focus;
/**
* The styles of the React {@code Components} of LiveStream.
@ -61,12 +57,13 @@ export default createStyleSheet({
* Container for the live stream screen.
*/
startLiveStreamContainer: {
backgroundColor: BaseTheme.palette.ui01,
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
marginHorizontal: BaseTheme.spacing[2],
marginTop: BaseTheme.spacing[3]
paddingHorizontal: BaseTheme.spacing[2],
paddingTop: BaseTheme.spacing[3]
},
/**
@ -81,8 +78,9 @@ export default createStyleSheet({
*/
streamKeyInput: {
alignSelf: 'stretch',
borderColor: ColorPalette.lightGrey,
borderColor: BaseTheme.palette.border02,
borderBottomWidth: 1,
color: BaseTheme.palette.text01,
fontSize: 14,
height: 40,
marginBottom: 5,
@ -125,14 +123,14 @@ export default createStyleSheet({
* Additional style for the selected item.
*/
streamKeyPickerItemHighlight: {
backgroundColor: ColorPalette.darkGrey
backgroundColor: BaseTheme.palette.ui13
},
/**
* Overall wrapper for the picker.
*/
streamKeyPickerWrapper: {
borderColor: ColorPalette.lightGrey,
borderColor: BaseTheme.palette.dividerColor,
borderRadius: 3,
borderWidth: 1,
flexDirection: 'column'
@ -146,6 +144,7 @@ export default createStyleSheet({
},
text: {
color: BaseTheme.palette.text01,
fontSize: 14,
textAlign: 'left'
},
@ -154,6 +153,6 @@ export default createStyleSheet({
* A different colored text to indicate information needing attention.
*/
warningText: {
color: ColorPalette.Y200
color: BaseTheme.palette.warning02
}
});

22
react/features/recording/components/Recording/StartRecordingDialogContent.js
View File

@ -20,13 +20,13 @@ import {
Text
} from '../../../base/react';
import { connect } from '../../../base/redux';
import { ColorPalette, StyleType } from '../../../base/styles';
import { StyleType } from '../../../base/styles';
import { authorizeDropbox, updateDropboxToken } from '../../../dropbox';
import { isVpaasMeeting } from '../../../jaas/functions';
import { RECORDING_TYPES } from '../../constants';
import { getRecordingDurationEstimation } from '../../functions';
import { DROPBOX_LOGO, ICON_CLOUD, JITSI_LOGO } from './styles';
import { DROPBOX_LOGO, ICON_CLOUD, JITSI_LOGO, TRACK_COLOR } from './styles';
type Props = {
@ -206,7 +206,7 @@ class StartRecordingDialogContent extends Component<Props> {
onValueChange
= { onSharingSettingChanged }
style = { styles.switch }
trackColor = {{ false: ColorPalette.lightGrey }}
trackColor = {{ false: TRACK_COLOR }}
value = { sharingSetting } />
</Container>
);
@ -236,7 +236,7 @@ class StartRecordingDialogContent extends Component<Props> {
disabled = { isValidating }
onValueChange = { this._onRecordingServiceSwitchChange }
style = { styles.switch }
trackColor = {{ false: ColorPalette.lightGrey }}
trackColor = {{ false: TRACK_COLOR }}
value = { this.props.selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE } />
) : null;
@ -317,7 +317,7 @@ class StartRecordingDialogContent extends Component<Props> {
disabled = { isValidating }
onValueChange = { this._onDropboxSwitchChange }
style = { styles.switch }
trackColor = {{ false: ColorPalette.lightGrey }}
trackColor = {{ false: TRACK_COLOR }}
value = { this.props.selectedRecordingService
=== RECORDING_TYPES.DROPBOX } />
);
@ -434,12 +434,20 @@ class StartRecordingDialogContent extends Component<Props> {
className = 'logged-in-panel'
style = { styles.loggedIn }>
<Container>
<Text style = { styles.text }>
<Text
style = { [
styles.text,
styles.recordingText
] }>
{ t('recording.loggedIn', { userName }) }
</Text>
</Container>
<Container>
<Text style = { styles.text }>
<Text
style = { [
styles.text,
styles.recordingText
] }>
{
t('recording.availableSpace', {
spaceLeft,

13
react/features/recording/components/Recording/styles.native.js
View File

@ -2,11 +2,13 @@
import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
import { BoxModel } from '../../../base/styles';
import BaseTheme from '../../../base/ui/components/BaseTheme';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
export const DROPBOX_LOGO = require('../../../../../images/dropboxLogo_square.png');
export const ICON_CLOUD = require('../../../../../images/icon-cloud.png');
export const JITSI_LOGO = require('../../../../../images/jitsiLogo_square.png');
export const TRACK_COLOR = BaseTheme.palette.ui15;
// XXX The "standard" {@code BoxModel.padding} has been deemed insufficient in
// the special case(s) of the recording feature below.
@ -17,12 +19,13 @@ export default {
* Container for the StartRecordingDialog screen.
*/
startRecodingContainer: {
backgroundColor: BaseTheme.palette.ui01,
display: 'flex',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
marginHorizontal: BaseTheme.spacing[2],
marginTop: BaseTheme.spacing[3]
paddingHorizontal: BaseTheme.spacing[3],
paddingTop: BaseTheme.spacing[3]
},
/**
@ -66,6 +69,10 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
height: BaseTheme.spacing[4]
},
recordingText: {
color: BaseTheme.palette.text01
},
signButton: {
backgroundColor: BaseTheme.palette.screen01Header,
color: BaseTheme.palette.ui12,

4
react/features/recording/components/Recording/styles.web.js
View File

@ -1,5 +1,7 @@
// XXX CSS is used on Web, JavaScript styles are use only for mobile. Export an
// (empty) object so that styles[*] statements on Web don't trigger errors.
import BaseTheme from '../../../base/ui/components/BaseTheme';
export default {};
export const DROPBOX_LOGO = 'images/dropboxLogo_square.png';
@ -7,3 +9,5 @@ export const DROPBOX_LOGO = 'images/dropboxLogo_square.png';
export const ICON_CLOUD = 'images/icon-cloud.png';
export const JITSI_LOGO = 'images/jitsiLogo_square.png';
export const TRACK_COLOR = BaseTheme.palette.ui15;

20
react/features/security/components/security-dialog/native/SecurityDialog.js
View File

@ -186,7 +186,7 @@ class SecurityDialog extends PureComponent<Props, State> {
return (
<View style = { styles.lobbyModeContainer }>
<View style = { styles.lobbyModeContent } >
<Text>
<Text style = { styles.lobbyModeText }>
{ t('lobby.enableDialogText') }
</Text>
<View style = { styles.lobbyModeSection }>
@ -229,7 +229,7 @@ class SecurityDialog extends PureComponent<Props, State> {
<>
<TouchableRipple
onPress = { this._onCancel }
rippleColor = { BaseTheme.palette.field02 } >
rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }>
{ t('dialog.Remove') }
</Text>
@ -238,7 +238,7 @@ class SecurityDialog extends PureComponent<Props, State> {
_password
&& <TouchableRipple
onPress = { this._onCopy }
rippleColor = { BaseTheme.palette.field02 } >
rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }>
{ t('dialog.copy') }
</Text>
@ -251,14 +251,14 @@ class SecurityDialog extends PureComponent<Props, State> {
<>
<TouchableRipple
onPress = { this._onCancel }
rippleColor = { BaseTheme.palette.field02 } >
rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }>
{ t('dialog.Cancel') }
</Text>
</TouchableRipple>
<TouchableRipple
onPress = { this._onSubmit }
rippleColor = { BaseTheme.palette.field02 } >
rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }>
{ t('dialog.add') }
</Text>
@ -270,7 +270,7 @@ class SecurityDialog extends PureComponent<Props, State> {
<TouchableRipple
disabled = { !_isModerator }
onPress = { this._onAddPassword }
rippleColor = { BaseTheme.palette.field02 } >
rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }>
{ t('info.addPassword') }
</Text>
@ -287,7 +287,7 @@ class SecurityDialog extends PureComponent<Props, State> {
</Text>
<TouchableRipple
onPress = { this._onCancel }
rippleColor = { BaseTheme.palette.field02 } >
rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }>
{ t('dialog.Remove') }
</Text>
@ -303,7 +303,7 @@ class SecurityDialog extends PureComponent<Props, State> {
<TouchableRipple
disabled = { !_isModerator }
onPress = { this._onAddPassword }
rippleColor = { BaseTheme.palette.field02 } >
rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }>
{ t('info.addPassword') }
</Text>
@ -316,7 +316,7 @@ class SecurityDialog extends PureComponent<Props, State> {
return (
<View
style = { styles.passwordContainer } >
<Text>
<Text style = { styles.passwordContainerText }>
{ t('security.about') }
</Text>
<View
@ -370,7 +370,7 @@ class SecurityDialog extends PureComponent<Props, State> {
onChangeText = { this._onChangeText }
placeholder = { t('lobby.passwordField') }
placeholderTextColor = { BaseTheme.palette.text03 }
selectionColor = { BaseTheme.palette.action03Active }
selectionColor = { BaseTheme.palette.text03 }
style = { styles.passwordInput }
underlineColorAndroid = { FIELD_UNDERLINE }
value = { passwordInputValue }

24
react/features/security/components/security-dialog/native/styles.js
View File

@ -8,8 +8,8 @@ import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
export default {
securityDialogContainer: {
flex: 1,
marginTop: BaseTheme.spacing[4]
backgroundColor: BaseTheme.palette.ui01,
flex: 1
},
headerCloseButton: {
@ -18,7 +18,8 @@ export default {
lobbyModeContainer: {
borderBottomColor: BaseTheme.palette.border01,
borderBottomWidth: 1
borderBottomWidth: 1,
marginTop: BaseTheme.spacing[4]
},
lobbyModeContent: {
@ -26,7 +27,12 @@ export default {
marginBottom: BaseTheme.spacing[4]
},
lobbyModeText: {
color: BaseTheme.palette.text01
},
lobbyModeLabel: {
color: BaseTheme.palette.text01,
fontWeight: 'bold',
marginTop: BaseTheme.spacing[2]
},
@ -43,6 +49,10 @@ export default {
marginTop: BaseTheme.spacing[4]
},
passwordContainerText: {
color: BaseTheme.palette.text01
},
passwordContainerControls: {
alignItems: 'center',
flexDirection: 'row',
@ -56,17 +66,19 @@ export default {
},
savedPasswordLabel: {
color: BaseTheme.palette.text01,
fontWeight: 'bold'
},
savedPassword: {
color: BaseTheme.palette.text06
color: BaseTheme.palette.text01
},
passwordInput: {
borderColor: BaseTheme.palette.action03Active,
borderRadius: BaseTheme.spacing[1],
borderWidth: 2,
color: BaseTheme.palette.text01,
height: BaseTheme.spacing[6],
marginTop: BaseTheme.spacing[2],
paddingLeft: BaseTheme.spacing[1],
@ -87,12 +99,12 @@ export default {
},
passwordSetRemotelyText: {
color: BaseTheme.palette.text06,
color: BaseTheme.palette.text01,
marginTop: 22
},
passwordSetRemotelyTextDisabled: {
color: BaseTheme.palette.text03,
color: BaseTheme.palette.text02,
marginTop: 22
}
};

2
react/features/speaker-stats/components/native/styles.js
View File

@ -6,7 +6,7 @@ export default {
flex: 1,
height: 'auto',
paddingHorizontal: BaseTheme.spacing[3],
backgroundColor: BaseTheme.palette.ui02
backgroundColor: BaseTheme.palette.ui01
},
speakerStatsItemContainer: {
flexDirection: 'row',