Support the new dark/light theme

zulip · May 22, 2017 · 6dba9a5 · 6dba9a5
1 parent 1915c96
commit 6dba9a5
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 16 deletions.
diff --git 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 {
         <TagInput
           value={this.extractNames()}
           onChange={this.onChangeTags}
-          tagColor="#ecf0f1"
-          tagTextColor="black"
+          tagColor={tagStyle.backgroundColor}
+          tagTextColor={tagStyle.color}
           inputProps={inputProps}
           numberOfLines={1}
         />

diff --git 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 {
       <View style={styles.streamInputWrapper}>
         {autoComplete &&
           <StreamAutocomplete filter={operator} onAutocomplete={this.handleAutocompleteOperator} />}
-        <TextInput
+        <Input
           style={styles.streamInput}
           placeholder={'Stream'}
           onChange={(event) => {
@@ -62,7 +63,7 @@ export default class StreamBox extends Component {
           autoFocus
         />
         <Text>{'>'}</Text>
-        <TextInput
+        <Input
           ref={component => { this.operandInput = component; }}
           style={styles.topicInput}
           placeholder={'Topic'}

diff --git 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,
   },
@@ -140,4 +140,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
@@ -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
@@ -2,4 +2,5 @@ export default ({
   color: '#333',
   backgroundColor: 'white',
   borderColor: 'rgba(127, 127, 127, 0.25)',
+  tagColor: '#ecf0f1'
 });