diff --git a/src/compose/ModeViews/PrivateBox.js b/src/compose/ModeViews/PrivateBox.js index dd3d8f460c..42c94bc85b 100644 --- a/src/compose/ModeViews/PrivateBox.js +++ b/src/compose/ModeViews/PrivateBox.js @@ -5,14 +5,7 @@ import { import TagInput from 'react-native-tag-input'; import PeopleAutocomplete from '../../autocomplete/PeopleAutocomplete'; - -const styles = StyleSheet.create({ - privateInput: { - flexDirection: 'row', - alignItems: 'center', - flex: 1 - }, -}); +import styles from '../../styles/index'; export default class PrivateBox extends Component { constructor() { @@ -69,13 +62,14 @@ export default class PrivateBox extends Component { } render() { + const tagStyle = StyleSheet.flatten(styles.tagInput); const { text } = this.state; const inputProps = { keyboardType: 'default', placeholder: 'Enter names', autoFocus: true, onChangeText: this.handleChangeText, - value: text + value: text, }; return ( @@ -88,8 +82,8 @@ export default class PrivateBox extends Component { diff --git a/src/compose/ModeViews/StreamBox.js b/src/compose/ModeViews/StreamBox.js index ed582e47bb..4987c292a4 100644 --- a/src/compose/ModeViews/StreamBox.js +++ b/src/compose/ModeViews/StreamBox.js @@ -1,8 +1,9 @@ import React, { Component } from 'react'; import { - View, TextInput, Text, StyleSheet + View, Text, StyleSheet } from 'react-native'; import StreamAutocomplete from '../../autocomplete/StreamAutocomplete'; +import Input from '../../common/Input'; const styles = StyleSheet.create({ streamInputWrapper: { @@ -47,7 +48,7 @@ export default class StreamBox extends Component { {autoComplete && } - { @@ -62,7 +63,7 @@ export default class StreamBox extends Component { autoFocus /> {'>'} - { this.operandInput = component; }} style={styles.topicInput} placeholder={'Topic'} diff --git a/src/styles/theme.js b/src/styles/theme.js index 7366fe50fb..757169041b 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -1,7 +1,7 @@ import { Platform } from 'react-native'; -import { BORDER_COLOR, BRAND_COLOR, STATUSBAR_HEIGHT, CONTROL_SIZE, NAVBAR_HEIGHT } from './'; +import { BORDER_COLOR, BRAND_COLOR, STATUSBAR_HEIGHT, CONTROL_SIZE, NAVBAR_HEIGHT, HALF_COLOR } from './'; -export default ({ color, backgroundColor, borderColor }) => ({ +export default ({ color, backgroundColor, borderColor, tagColor }) => ({ color: { color, }, @@ -139,4 +139,13 @@ export default ({ color, backgroundColor, borderColor }) => ({ height: CONTROL_SIZE * 3 / 4, borderColor: BORDER_COLOR, }, + tagInput: { + backgroundColor: tagColor, + color, + }, + privateInput: { + flexDirection: 'row', + alignItems: 'center', + flex: 1 + }, }); diff --git a/src/styles/themeDark.js b/src/styles/themeDark.js index 38f73d3f7c..517be190fc 100644 --- a/src/styles/themeDark.js +++ b/src/styles/themeDark.js @@ -2,4 +2,5 @@ export default ({ color: '#d5d9dd', backgroundColor: '#212D3B', borderColor: 'rgba(127, 127, 127, 0.25)', + tagColor: '#2c3e50' }); diff --git a/src/styles/themeLight.js b/src/styles/themeLight.js index e2e3164ffb..6a4657c096 100644 --- a/src/styles/themeLight.js +++ b/src/styles/themeLight.js @@ -2,4 +2,5 @@ export default ({ color: '#333', backgroundColor: 'white', borderColor: 'rgba(127, 127, 127, 0.25)', + tagColor: '#ecf0f1' });