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: { text: {
...brandedDialogText ...brandedDialogText,
color: BaseTheme.palette.text01
}, },
topBorderContainer: { topBorderContainer: {
borderTopColor: schemeColor('border'), borderTopColor: BaseTheme.palette.dividerColor,
borderTopWidth: 1 borderTopWidth: 1
} }
}); });

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

@ -36,6 +36,7 @@ export const colors = {
surface12: '#AAAAAA', surface12: '#AAAAAA',
surface13: '#495258', surface13: '#495258',
surface14: '#555555', surface14: '#555555',
surface15: '#474747',
success04: '#189B55', success04: '#189B55',
success05: '#1EC26A', success05: '#1EC26A',
@ -69,6 +70,8 @@ export const colorMap = {
ui05: 'surface06', ui05: 'surface06',
ui12: 'surface11', ui12: 'surface11',
ui13: 'surface14', ui13: 'surface14',
ui14: 'surface15',
ui15: 'surface12',
// Primary buttons // Primary buttons
action01: 'primary05', action01: 'primary05',
@ -201,6 +204,9 @@ export const colorMap = {
// Color for the section divider // Color for the section divider
dividerColor: 'surface12', dividerColor: 'surface12',
// Color for indicator
indicatorColor: 'surface12',
// Background for high-contrast input fields on hover // Background for high-contrast input fields on hover
field02Hover: 'primary09', field02Hover: 'primary09',
@ -260,6 +266,9 @@ export const colorMap = {
// Color for disabled tab // Color for disabled tab
tab01Disabled: 'disabled01', tab01Disabled: 'disabled01',
// Color for enabled lobby mode switch
lobbySwitch01Active: 'success04',
// Color for disabled video switch // Color for disabled video switch
video01Disabled: 'disabled01', 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 { translate } from '../../../base/i18n';
import { Icon, IconChatSend } from '../../../base/icons'; import { Icon, IconChatSend } from '../../../base/icons';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import styles from './styles'; import styles from './styles';
@ -82,7 +83,9 @@ class ChatInputBar extends Component<Props, State> {
onFocus = { this._onFocused(true) } onFocus = { this._onFocused(true) }
onSubmitEditing = { this._onSubmit } onSubmitEditing = { this._onSubmit }
placeholder = { this.props.t('chat.fieldPlaceHolder') } placeholder = { this.props.t('chat.fieldPlaceHolder') }
placeholderTextColor = { BaseTheme.palette.text03 }
returnKeyType = 'send' returnKeyType = 'send'
selectionColor = { BaseTheme.palette.text03 }
style = { styles.inputField } style = { styles.inputField }
value = { this.state.message } /> value = { this.state.message } />
{ {

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

@ -60,7 +60,7 @@ export default {
}, },
inputField: { inputField: {
color: 'rgb(28, 32, 37)', color: BaseTheme.palette.text01,
flex: 1, flex: 1,
height: 48 height: 48
}, },
@ -95,7 +95,7 @@ export default {
}, },
sendButtonIcon: { sendButtonIcon: {
color: ColorPalette.darkGrey, color: BaseTheme.palette.icon01,
fontSize: 22 fontSize: 22
}, },
@ -124,6 +124,7 @@ export default {
}, },
chatContainer: { chatContainer: {
backgroundColor: BaseTheme.palette.ui01,
flex: 1 flex: 1
}, },
@ -165,7 +166,7 @@ ColorSchemeRegistry.register('Chat', {
}, },
emptyComponentText: { emptyComponentText: {
color: BaseTheme.palette.ui05, color: BaseTheme.palette.text03,
textAlign: 'center' 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 { export default {
addPeopleContainer: { addPeopleContainer: {
backgroundColor: BaseTheme.palette.ui01,
flex: 1 flex: 1
}, },
@ -75,7 +76,7 @@ export default {
}, },
itemText: { itemText: {
color: DARK_GREY, color: BaseTheme.palette.text01,
fontSize: 14, fontSize: 14,
fontWeight: 'normal' fontWeight: 'normal'
}, },
@ -104,14 +105,14 @@ export default {
}, },
selectedIcon: { selectedIcon: {
color: DARK_GREY, color: BaseTheme.palette.icon01,
fontSize: 20, fontSize: 20,
marginRight: BoxModel.margin, marginRight: BoxModel.margin,
padding: 2 padding: 2
}, },
separator: { separator: {
borderBottomColor: LIGHT_GREY, borderBottomColor: BaseTheme.palette.dividerColor,
borderBottomWidth: 1, borderBottomWidth: 1,
marginLeft: 85 marginLeft: 85
}, },
@ -146,7 +147,7 @@ export default {
}, },
unselectIcon: { unselectIcon: {
color: LIGHT_GREY, color: BaseTheme.palette.ui01,
fontSize: 16, fontSize: 16,
left: AVATAR_SIZE / -3, left: AVATAR_SIZE / -3,
position: 'relative', position: 'relative',

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

@ -1,10 +1,10 @@
// @flow // @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 { export default {
@ -15,7 +15,7 @@ export default {
indicatorWrapper: { indicatorWrapper: {
alignItems: 'center', alignItems: 'center',
backgroundColor: ColorPalette.white, backgroundColor: BaseTheme.palette.ui12,
height: '100%', height: '100%',
justifyContent: 'center' 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 { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux'; import { connect } from '../../../base/redux';
import styles, { import styles, { ENABLED_TRACK_COLOR, THUMB_COLOR } from './styles';
ENABLED_THUMB_COLOR,
ENABLED_TRACK_COLOR,
DISABLED_THUMB_COLOR
} from './styles';
/** /**
* The type of the React {@code Component} props of {@link LobbyModeSwitch}. * The type of the React {@code Component} props of {@link LobbyModeSwitch}.
@ -44,11 +40,7 @@ function LobbyModeSwitch(
<Switch <Switch
onValueChange = { onToggleLobbyMode } onValueChange = { onToggleLobbyMode }
style = { styles.lobbySwitchIcon } style = { styles.lobbySwitchIcon }
thumbColor = { thumbColor = { THUMB_COLOR }
lobbyEnabled
? ENABLED_THUMB_COLOR
: DISABLED_THUMB_COLOR
}
trackColor = {{ true: ENABLED_TRACK_COLOR }} trackColor = {{ true: ENABLED_TRACK_COLOR }}
value = { lobbyEnabled } /> value = { lobbyEnabled } />
</View> </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; const SECONDARY_COLOR = BaseTheme.palette.border04;
export const ENABLED_THUMB_COLOR = BaseTheme.palette.action04; export const ENABLED_TRACK_COLOR = BaseTheme.palette.lobbySwitch01Active;
export const ENABLED_TRACK_COLOR = BaseTheme.palette.screen01Header; export const THUMB_COLOR = BaseTheme.palette.field02;
export const DISABLED_THUMB_COLOR = BaseTheme.palette.icon04;
export default { export default {
button: { button: {
alignItems: 'center', alignItems: 'center',
borderRadius: 4, borderRadius: 4,
marginVertical: 4, marginVertical: BaseTheme.spacing[1],
paddingVertical: 8 paddingVertical: BaseTheme.spacing[2]
}, },
contentWrapper: { contentWrapper: {
@ -33,7 +32,7 @@ export default {
fontSize: 18, fontSize: 18,
fontWeight: 'bold', fontWeight: 'bold',
margin: 'auto', margin: 'auto',
marginVertical: 24, marginVertical: BaseTheme.spacing[3],
textAlign: 'center' textAlign: 'center'
}, },

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

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

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

@ -185,7 +185,7 @@ export const chatTabBarOptions = {
tabBarLabelStyle: { tabBarLabelStyle: {
fontSize: BaseTheme.typography.labelRegular.fontSize fontSize: BaseTheme.typography.labelRegular.fontSize
}, },
tabBarInactiveTintColor: BaseTheme.palette.field02Disabled, tabBarInactiveTintColor: BaseTheme.palette.text01,
tabBarIndicatorStyle: { tabBarIndicatorStyle: {
backgroundColor: BaseTheme.palette.screen01Header 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 { Switch, Text, View } from 'react-native';
import { Button } from 'react-native-paper'; import { Button } from 'react-native-paper';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import { BUTTON_MODES } from '../../../chat/constants'; import { BUTTON_MODES } from '../../../chat/constants';
import { isSubmitAnswerDisabled } from '../../functions'; import { isSubmitAnswerDisabled } from '../../functions';
import AbstractPollAnswer from '../AbstractPollAnswer'; import AbstractPollAnswer from '../AbstractPollAnswer';
@ -38,21 +39,26 @@ const PollAnswer = (props: AbstractProps) => {
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
onValueChange = { state => setCheckbox(index, state) } onValueChange = { state => setCheckbox(index, state) }
value = { checkBoxStates[index] } /> value = { checkBoxStates[index] } />
<Text>{answer.name}</Text> <Text style = { chatStyles.switchLabel }>{answer.name}</Text>
</View> </View>
))} ))}
</View> </View>
<View style = { chatStyles.buttonRow }> <View style = { chatStyles.buttonRow }>
<Button <Button
color = '#3D3D3D' color = { BaseTheme.palette.action02 }
mode = { BUTTON_MODES.CONTAINED } mode = { BUTTON_MODES.CONTAINED }
onPress = { changingVote ? skipChangeVote : skipAnswer } onPress = { changingVote ? skipChangeVote : skipAnswer }
style = { chatStyles.pollCreateButton } > style = { chatStyles.pollCreateButton } >
{t('polls.answer.skip')} {t('polls.answer.skip')}
</Button> </Button>
<Button <Button
color = '#17a0db' color = { BaseTheme.palette.screen01Header }
disabled = { isSubmitAnswerDisabled(checkBoxStates) } disabled = { isSubmitAnswerDisabled(checkBoxStates) }
labelStyle = {
isSubmitAnswerDisabled(checkBoxStates)
? chatStyles.pollSendDisabledLabel
: chatStyles.pollSendLabel
}
mode = { BUTTON_MODES.CONTAINED } mode = { BUTTON_MODES.CONTAINED }
onPress = { submitAnswer } onPress = { submitAnswer }
style = { chatStyles.pollCreateButton } > 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 { Button } from 'react-native-paper';
import { Icon, IconClose } from '../../../base/icons'; import { Icon, IconClose } from '../../../base/icons';
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
import { BUTTON_MODES } from '../../../chat/constants'; import { BUTTON_MODES } from '../../../chat/constants';
import { CHAR_LIMIT } from '../../constants'; import { CHAR_LIMIT } from '../../constants';
import AbstractPollCreate from '../AbstractPollCreate'; import AbstractPollCreate from '../AbstractPollCreate';
@ -12,6 +13,7 @@ import type { AbstractProps } from '../AbstractPollCreate';
import { chatStyles, dialogStyles } from './styles'; import { chatStyles, dialogStyles } from './styles';
const PollCreate = (props: AbstractProps) => { const PollCreate = (props: AbstractProps) => {
@ -111,11 +113,14 @@ const PollCreate = (props: AbstractProps) => {
onChangeText = { text => setAnswer(index, text) } onChangeText = { text => setAnswer(index, text) }
onKeyPress = { ev => onAnswerKeyDown(index, ev) } onKeyPress = { ev => onAnswerKeyDown(index, ev) }
placeholder = { t('polls.create.answerPlaceholder', { index: index + 1 }) } placeholder = { t('polls.create.answerPlaceholder', { index: index + 1 }) }
placeholderTextColor = { BaseTheme.palette.text03 }
ref = { input => registerFieldRef(index, input) } ref = { input => registerFieldRef(index, input) }
selectionColor = { BaseTheme.palette.text03 }
style = { dialogStyles.field } style = { dialogStyles.field }
value = { answers[index] } /> value = { answers[index] } />
{answers.length > 2 {
answers.length > 2
&& createIconButton(IconClose, () => removeAnswer(index)) && createIconButton(IconClose, () => removeAnswer(index))
} }
</View> </View>
@ -132,6 +137,8 @@ const PollCreate = (props: AbstractProps) => {
onChangeText = { setQuestion } onChangeText = { setQuestion }
onSubmitEditing = { onQuestionKeyDown } onSubmitEditing = { onQuestionKeyDown }
placeholder = { t('polls.create.questionPlaceholder') } placeholder = { t('polls.create.questionPlaceholder') }
placeholderTextColor = { BaseTheme.palette.text03 }
selectionColor = { BaseTheme.palette.text03 }
style = { dialogStyles.question } style = { dialogStyles.question }
value = { question } /> value = { question } />
<FlatList <FlatList
@ -143,7 +150,7 @@ const PollCreate = (props: AbstractProps) => {
renderItem = { renderListItem } /> renderItem = { renderListItem } />
<View style = { chatStyles.pollCreateButtonsContainer }> <View style = { chatStyles.pollCreateButtonsContainer }>
<Button <Button
color = '#3D3D3D' color = { BaseTheme.palette.action02 }
mode = { BUTTON_MODES.CONTAINED } mode = { BUTTON_MODES.CONTAINED }
onPress = { () => { onPress = { () => {
// adding and answer // adding and answer
@ -156,7 +163,7 @@ const PollCreate = (props: AbstractProps) => {
<View <View
style = { chatStyles.buttonRow }> style = { chatStyles.buttonRow }>
<Button <Button
color = '#3D3D3D' color = { BaseTheme.palette.action02 }
mode = { BUTTON_MODES.CONTAINED } mode = { BUTTON_MODES.CONTAINED }
onPress = { () => setCreateMode(false) } onPress = { () => setCreateMode(false) }
style = { chatStyles.pollCreateButton } > style = { chatStyles.pollCreateButton } >
@ -164,8 +171,13 @@ const PollCreate = (props: AbstractProps) => {
</Button> </Button>
<Button <Button
color = '#17a0db' color = { BaseTheme.palette.screen01Header }
disabled = { isSubmitDisabled } disabled = { isSubmitDisabled }
labelStyle = {
isSubmitDisabled
? chatStyles.pollSendDisabledLabel
: chatStyles.pollSendLabel
}
mode = { BUTTON_MODES.CONTAINED } mode = { BUTTON_MODES.CONTAINED }
onPress = { onSubmit } onPress = { onSubmit }
style = { chatStyles.pollCreateButton } > style = { chatStyles.pollCreateButton } >

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

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

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

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

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

@ -1,7 +1,7 @@
// @flow // @flow
import { ColorPalette, createStyleSheet } from '../../../base/styles'; 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({ export const answerStyles = createStyleSheet({
question: { question: {
@ -21,6 +21,7 @@ export const answerStyles = createStyleSheet({
export const dialogStyles = createStyleSheet({ export const dialogStyles = createStyleSheet({
question: { question: {
color: BaseTheme.palette.text01,
fontSize: 16, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
marginVertical: 4 marginVertical: 4
@ -31,6 +32,7 @@ export const dialogStyles = createStyleSheet({
}, },
field: { field: {
color: BaseTheme.palette.text01,
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: ColorPalette.blue, borderColor: ColorPalette.blue,
fontSize: 14, fontSize: 14,
@ -85,6 +87,10 @@ export const resultsStyles = createStyleSheet({
marginVertical: 4 marginVertical: 4
}, },
voter: {
color: BaseTheme.palette.text01
},
answerContainer: { answerContainer: {
marginVertical: 2, marginVertical: 2,
maxWidth: '100%' maxWidth: '100%'
@ -96,6 +102,7 @@ export const resultsStyles = createStyleSheet({
}, },
answer: { answer: {
color: BaseTheme.palette.text01,
flexShrink: 1 flexShrink: 1
}, },
@ -124,7 +131,7 @@ export const chatStyles = createStyleSheet({
noPollText: { noPollText: {
flex: 1, flex: 1,
color: BaseTheme.palette.ui05, color: BaseTheme.palette.text03,
textAlign: 'center', textAlign: 'center',
paddingTop: '8%' paddingTop: '8%'
}, },
@ -155,6 +162,14 @@ export const chatStyles = createStyleSheet({
marginHorizontal: 8 marginHorizontal: 8
}, },
pollSendLabel: {
color: BaseTheme.palette.text01
},
pollSendDisabledLabel: {
color: BaseTheme.palette.text03
},
buttonRow: { buttonRow: {
flexDirection: 'row' flexDirection: 'row'
}, },
@ -169,6 +184,11 @@ export const chatStyles = createStyleSheet({
padding: 6 padding: 6
}, },
switchLabel: {
color: BaseTheme.palette.text01,
marginLeft: BaseTheme.spacing[2]
},
pollCreateAddButton: { pollCreateAddButton: {
margin: BaseTheme.spacing[2] margin: BaseTheme.spacing[2]
}, },
@ -189,6 +209,7 @@ export const chatStyles = createStyleSheet({
}, },
PollPaneContainer: { PollPaneContainer: {
backgroundColor: BaseTheme.palette.ui01,
flex: 1 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 } onChangeText = { this._onInputChange }
placeholder = { t('liveStreaming.enterStreamKey') } placeholder = { t('liveStreaming.enterStreamKey') }
placeholderTextColor = { PLACEHOLDER_COLOR } placeholderTextColor = { PLACEHOLDER_COLOR }
selectionColor = { PLACEHOLDER_COLOR }
style = { [ style = { [
_dialogStyles.text, _dialogStyles.text,
styles.streamKeyInput styles.streamKeyInput

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

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

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

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

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

@ -2,11 +2,13 @@
import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme'; import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
import { BoxModel } from '../../../base/styles'; 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 DROPBOX_LOGO = require('../../../../../images/dropboxLogo_square.png');
export const ICON_CLOUD = require('../../../../../images/icon-cloud.png'); export const ICON_CLOUD = require('../../../../../images/icon-cloud.png');
export const JITSI_LOGO = require('../../../../../images/jitsiLogo_square.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 // XXX The "standard" {@code BoxModel.padding} has been deemed insufficient in
// the special case(s) of the recording feature below. // the special case(s) of the recording feature below.
@ -17,12 +19,13 @@ export default {
* Container for the StartRecordingDialog screen. * Container for the StartRecordingDialog screen.
*/ */
startRecodingContainer: { startRecodingContainer: {
backgroundColor: BaseTheme.palette.ui01,
display: 'flex', display: 'flex',
flex: 1, flex: 1,
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
marginHorizontal: BaseTheme.spacing[2], paddingHorizontal: BaseTheme.spacing[3],
marginTop: BaseTheme.spacing[3] paddingTop: BaseTheme.spacing[3]
}, },
/** /**
@ -66,6 +69,10 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
height: BaseTheme.spacing[4] height: BaseTheme.spacing[4]
}, },
recordingText: {
color: BaseTheme.palette.text01
},
signButton: { signButton: {
backgroundColor: BaseTheme.palette.screen01Header, backgroundColor: BaseTheme.palette.screen01Header,
color: BaseTheme.palette.ui12, 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 // 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. // (empty) object so that styles[*] statements on Web don't trigger errors.
import BaseTheme from '../../../base/ui/components/BaseTheme';
export default {}; export default {};
export const DROPBOX_LOGO = 'images/dropboxLogo_square.png'; 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 ICON_CLOUD = 'images/icon-cloud.png';
export const JITSI_LOGO = 'images/jitsiLogo_square.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 ( return (
<View style = { styles.lobbyModeContainer }> <View style = { styles.lobbyModeContainer }>
<View style = { styles.lobbyModeContent } > <View style = { styles.lobbyModeContent } >
<Text> <Text style = { styles.lobbyModeText }>
{ t('lobby.enableDialogText') } { t('lobby.enableDialogText') }
</Text> </Text>
<View style = { styles.lobbyModeSection }> <View style = { styles.lobbyModeSection }>
@ -229,7 +229,7 @@ class SecurityDialog extends PureComponent<Props, State> {
<> <>
<TouchableRipple <TouchableRipple
onPress = { this._onCancel } onPress = { this._onCancel }
rippleColor = { BaseTheme.palette.field02 } > rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }> <Text style = { styles.passwordSetupButton }>
{ t('dialog.Remove') } { t('dialog.Remove') }
</Text> </Text>
@ -238,7 +238,7 @@ class SecurityDialog extends PureComponent<Props, State> {
_password _password
&& <TouchableRipple && <TouchableRipple
onPress = { this._onCopy } onPress = { this._onCopy }
rippleColor = { BaseTheme.palette.field02 } > rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }> <Text style = { styles.passwordSetupButton }>
{ t('dialog.copy') } { t('dialog.copy') }
</Text> </Text>
@ -251,14 +251,14 @@ class SecurityDialog extends PureComponent<Props, State> {
<> <>
<TouchableRipple <TouchableRipple
onPress = { this._onCancel } onPress = { this._onCancel }
rippleColor = { BaseTheme.palette.field02 } > rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }> <Text style = { styles.passwordSetupButton }>
{ t('dialog.Cancel') } { t('dialog.Cancel') }
</Text> </Text>
</TouchableRipple> </TouchableRipple>
<TouchableRipple <TouchableRipple
onPress = { this._onSubmit } onPress = { this._onSubmit }
rippleColor = { BaseTheme.palette.field02 } > rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }> <Text style = { styles.passwordSetupButton }>
{ t('dialog.add') } { t('dialog.add') }
</Text> </Text>
@ -270,7 +270,7 @@ class SecurityDialog extends PureComponent<Props, State> {
<TouchableRipple <TouchableRipple
disabled = { !_isModerator } disabled = { !_isModerator }
onPress = { this._onAddPassword } onPress = { this._onAddPassword }
rippleColor = { BaseTheme.palette.field02 } > rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }> <Text style = { styles.passwordSetupButton }>
{ t('info.addPassword') } { t('info.addPassword') }
</Text> </Text>
@ -287,7 +287,7 @@ class SecurityDialog extends PureComponent<Props, State> {
</Text> </Text>
<TouchableRipple <TouchableRipple
onPress = { this._onCancel } onPress = { this._onCancel }
rippleColor = { BaseTheme.palette.field02 } > rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }> <Text style = { styles.passwordSetupButton }>
{ t('dialog.Remove') } { t('dialog.Remove') }
</Text> </Text>
@ -303,7 +303,7 @@ class SecurityDialog extends PureComponent<Props, State> {
<TouchableRipple <TouchableRipple
disabled = { !_isModerator } disabled = { !_isModerator }
onPress = { this._onAddPassword } onPress = { this._onAddPassword }
rippleColor = { BaseTheme.palette.field02 } > rippleColor = { BaseTheme.palette.ui01 } >
<Text style = { styles.passwordSetupButton }> <Text style = { styles.passwordSetupButton }>
{ t('info.addPassword') } { t('info.addPassword') }
</Text> </Text>
@ -316,7 +316,7 @@ class SecurityDialog extends PureComponent<Props, State> {
return ( return (
<View <View
style = { styles.passwordContainer } > style = { styles.passwordContainer } >
<Text> <Text style = { styles.passwordContainerText }>
{ t('security.about') } { t('security.about') }
</Text> </Text>
<View <View
@ -370,7 +370,7 @@ class SecurityDialog extends PureComponent<Props, State> {
onChangeText = { this._onChangeText } onChangeText = { this._onChangeText }
placeholder = { t('lobby.passwordField') } placeholder = { t('lobby.passwordField') }
placeholderTextColor = { BaseTheme.palette.text03 } placeholderTextColor = { BaseTheme.palette.text03 }
selectionColor = { BaseTheme.palette.action03Active } selectionColor = { BaseTheme.palette.text03 }
style = { styles.passwordInput } style = { styles.passwordInput }
underlineColorAndroid = { FIELD_UNDERLINE } underlineColorAndroid = { FIELD_UNDERLINE }
value = { passwordInputValue } 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 { export default {
securityDialogContainer: { securityDialogContainer: {
flex: 1, backgroundColor: BaseTheme.palette.ui01,
marginTop: BaseTheme.spacing[4] flex: 1
}, },
headerCloseButton: { headerCloseButton: {
@ -18,7 +18,8 @@ export default {
lobbyModeContainer: { lobbyModeContainer: {
borderBottomColor: BaseTheme.palette.border01, borderBottomColor: BaseTheme.palette.border01,
borderBottomWidth: 1 borderBottomWidth: 1,
marginTop: BaseTheme.spacing[4]
}, },
lobbyModeContent: { lobbyModeContent: {
@ -26,7 +27,12 @@ export default {
marginBottom: BaseTheme.spacing[4] marginBottom: BaseTheme.spacing[4]
}, },
lobbyModeText: {
color: BaseTheme.palette.text01
},
lobbyModeLabel: { lobbyModeLabel: {
color: BaseTheme.palette.text01,
fontWeight: 'bold', fontWeight: 'bold',
marginTop: BaseTheme.spacing[2] marginTop: BaseTheme.spacing[2]
}, },
@ -43,6 +49,10 @@ export default {
marginTop: BaseTheme.spacing[4] marginTop: BaseTheme.spacing[4]
}, },
passwordContainerText: {
color: BaseTheme.palette.text01
},
passwordContainerControls: { passwordContainerControls: {
alignItems: 'center', alignItems: 'center',
flexDirection: 'row', flexDirection: 'row',
@ -56,17 +66,19 @@ export default {
}, },
savedPasswordLabel: { savedPasswordLabel: {
color: BaseTheme.palette.text01,
fontWeight: 'bold' fontWeight: 'bold'
}, },
savedPassword: { savedPassword: {
color: BaseTheme.palette.text06 color: BaseTheme.palette.text01
}, },
passwordInput: { passwordInput: {
borderColor: BaseTheme.palette.action03Active, borderColor: BaseTheme.palette.action03Active,
borderRadius: BaseTheme.spacing[1], borderRadius: BaseTheme.spacing[1],
borderWidth: 2, borderWidth: 2,
color: BaseTheme.palette.text01,
height: BaseTheme.spacing[6], height: BaseTheme.spacing[6],
marginTop: BaseTheme.spacing[2], marginTop: BaseTheme.spacing[2],
paddingLeft: BaseTheme.spacing[1], paddingLeft: BaseTheme.spacing[1],
@ -87,12 +99,12 @@ export default {
}, },
passwordSetRemotelyText: { passwordSetRemotelyText: {
color: BaseTheme.palette.text06, color: BaseTheme.palette.text01,
marginTop: 22 marginTop: 22
}, },
passwordSetRemotelyTextDisabled: { passwordSetRemotelyTextDisabled: {
color: BaseTheme.palette.text03, color: BaseTheme.palette.text02,
marginTop: 22 marginTop: 22
} }
}; };

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

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