various ui improvements

src/components/AccountsListRow.js

@@ -8,11 +8,10 @@ export default class AccountsListRow extends Component {
 
   render() {
     return (
-      <TouchableHighlight>
-        <View>
-          <View style={styles.row}>
-            <Text style={styles.text}>{this.props.text}</Text>
-          </View>
+      <TouchableHighlight style={styles.row}>
+        <View style={{flexDirection: 'row'}}>
+          <View style={styles.square}/>
+          <Text style={styles.text} fontSize={16} ellipsizeMode="middle" numberOfLines={1}>0x{this.props.text}</Text>
         </View>
       </TouchableHighlight>
     )
@@ -22,11 +21,19 @@ export default class AccountsListRow extends Component {
 const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
-    justifyContent: 'center',
-    padding: 10,
-    backgroundColor: '#F6F6F6',
+    backgroundColor: '#F8F8F8',
+    borderBottomWidth: 1,
+    borderColor: '#F0F0F0',
+  },
+  square: {
+    height: 60,
+    width: 60,
+    backgroundColor: '#D8D8D8',
+    marginRight: 10,
   },
   text: {
-    flex: 1,
+    marginTop: 20,
+    width: 200,
+    //flex: 1,
   }
 })

src/components/App.js

@@ -9,20 +9,34 @@ import QrScanner from '../containers/QrScanner'
 import Signer from '../containers/Signer'
 import Accounts from '../containers/Accounts'
 import NewAccount from '../containers/NewAccount'
+import Send from '../components/Send'
 
 const ConnectedRouter = connect()(Router)
 const store = createStore(reducers)
 
+const styles = StyleSheet.create({
+  tabbar: {
+    backgroundColor: '#343E48',
+  },
+  navibar: {
+    backgroundColor: '#343E48',
+  },
+  navibarTitle: {
+    color: 'white'
+  }
+})
+
 const scenes = Actions.create(
   <Scene key='root'>
-    <Scene key='tabs' tabs>
-      <Scene key='send' component={View} title='Send TX' icon={TabIcon}/>
-      <Scene key='mid' title='Scan QR' initial icon={TabIcon}>
+    <Scene key='tabs' tabs style={styles.tabbar}>
+      <Scene key='send' component={Send} title='Send TX' icon={TabIcon} navigationBarStyle={styles.navibar} titleStyle={styles.navibarTitle}/>
+      <Scene key='mid' title='Scan QR' initial icon={TabIcon} navigationBarStyle={styles.navibar} titleStyle={styles.navibarTitle}>
         <Scene key='scan' component={QrScanner} title='Scan QR'/>
         <Scene key='signer' component={Signer} title='Sign Tx'/>
       </Scene>
-      <Scene key='accounts' title='Accounts' icon={TabIcon}>
-        <Scene key='accountsList' title='Accounts' component={Accounts} rightTitle="Add" onRight={() => Actions.add()}/>
+      <Scene key='accounts' title='Accounts' icon={TabIcon} navigationBarStyle={styles.navibar} titleStyle={styles.navibarTitle}>
+        <Scene key='accountsList' title='Accounts' component={Accounts} rightTitle="Add" onRight={() => Actions.add()}
+          rightButtonTextStyle={styles.navibarTitle}/>
         <Scene key='add' component={NewAccount} title='Add Account'/>
       </Scene>
     </Scene>
@@ -42,3 +56,4 @@ export default class App extends Component {
     )
   }
 }
+

src/components/NewAccountInput.js

@@ -18,10 +18,11 @@ export default class NewAccountInput extends Component {
     return (
       <TextInput
         style={styles.input}
+        placeholder='the brain wallet seed'
         editable={true}
         multiline={true}
         autoFocus={true}
-        returnKeyType="default"
+        returnKeyType='default'
         numberOfLines={6}
         fontSize={16}
         onChangeText={(text) => {
@@ -39,8 +40,6 @@ export default class NewAccountInput extends Component {
 
 const styles = StyleSheet.create({
   input: {
-    borderColor: 'gray',
-    borderWidth: 1,
     height: 200,
     fontWeight: 'bold'
   },

src/components/Send.js

+'use strict'
+
+import React, { Component, PropTypes } from 'react'
+import { StyleSheet, View, Text, TextInput, Button, StatusBar } from 'react-native'
+
+export default class Send extends Component {
+  render() {
+    return (
+      <View style={styles.view}>
+        <StatusBar barStyle='light-content'/>
+        <Text style={styles.hint}>recipient address</Text>
+        <TextInput
+          placeholder='the recipient address'
+          style={styles.input}
+          editable={true}
+          multiline={false}
+          autoFocus={true}
+          returnKeyType='next'
+          numberOfLines={1}
+          fontSize={16}
+        />
+        <Text style={styles.hint}>amount to transfer (in ETH)</Text>
+        <TextInput
+          placeholder=''
+          value='0.0'
+          style={styles.input}
+          editable={true}
+          multiline={false}
+          returnKeyType='next'
+          numberOfLines={1}
+          fontSize={16}
+        />
+        <Text style={styles.hint}>total transaction amount</Text>
+        <TextInput
+          placeholder=''
+          value='0.0'
+          style={styles.input}
+          editable={true}
+          multiline={false}
+          returnKeyType='next'
+          numberOfLines={1}
+          fontSize={16}
+        />
+        <Button
+          onPress={() => {}}
+          title="Generate QR Code"
+          color="green"
+          accessibilityLabel="Press to generate QR Code"
+        />
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  view: {
+    flex: 1,
+    marginTop: 60,
+    marginBottom: 50,
+    padding: 20,
+  },
+  hint: {
+    marginBottom: 20,
+  },
+  input: {
+    height: 20,
+    marginBottom: 20,
+  }
+})
+

src/components/TabIcon.js

 import React, { Component, PropTypes } from 'react'
-import { Text } from 'react-native'
+import { Text, StyleSheet } from 'react-native'
 
 export default class TabIcon extends Component {
   static propTypes = {
@@ -8,7 +8,18 @@ export default class TabIcon extends Component {
 
   render() {
     return (
-      <Text style={{color: this.props.selected ? 'red' :'black'}}>{this.props.title}</Text>
+      <Text style={this.props.selected ? styles.selected: styles.normal}>{this.props.title}</Text>
     )
   }
 }
+
+const styles = StyleSheet.create({
+  normal: {
+    color: 'white',
+  },
+  selected: {
+    fontWeight: 'bold',
+    color: 'green',
+  }
+})
+

src/containers/NewAccount.js

@@ -36,14 +36,15 @@ export class NewAccount extends Component {
     var self = this;
     return (
       <View style={styles.view}>
+        <Text style={styles.hint}>brain wallet seed</Text>
         <NewAccountInput seed={this.state.seed} onChangeText={
           debounce((text) => self.setState({keypair: keypairFromPhrase(text)}), 100)
         }/>
-        <Text>0x{toAddress(this.state.keypair)}</Text>
+        <Text style={styles.hint} adjustsFontSizeToFit={true}>0x{toAddress(this.state.keypair)}</Text>
         <Button
           onPress={() => this.props.addAccount(this.state.keypair)}
           title="Add Account"
-          color="#841584"
+          color="green"
           accessibilityLabel="Press to add new account"
         />
       </View>
@@ -56,8 +57,11 @@ const styles = StyleSheet.create({
     flex: 1,
     marginTop: 60,
     marginBottom: 50,
-    padding: 10
+    padding: 20
   },
+  hint: {
+    marginBottom: 20,
+  }
 })
 
 export default connect(

src/reducers/accounts.js

 import { ADD_ACCOUNT } from '../constants/AccountActions'
 
-const initialAccounts = []
+const initialAccounts = [{address: 'dupa'}, {address: 'dupa2'}]
 
 export default function accounts(state = initialAccounts, action) {
   switch (action.type) {