unifying styles accross all views

src/actions/accounts.js

+'use strict'
+
 import { ADD_ACCOUNT, SELECT_ACCOUNT, DELETE_ACCOUNT, SET_PIN, CONFIRM_PIN } from '../constants/AccountActions'
 
 export function addAccount(account) {

src/actions/transactions.js

+'use strict'
+
 import { NEW_SCANNED_TX, SIGNED_TX } from '../constants/TransactionActions'
 
 export function newScannedTx(data) {

src/components/AccountDetails.js

@@ -2,6 +2,7 @@
 
 import React, { Component, PropTypes } from 'react'
 import { StyleSheet, View, Text, Button } from 'react-native'
+import AppStyles from '../styles'
 
 export default class AccountDetails extends Component {
   static propTypes = {
@@ -14,7 +15,7 @@ export default class AccountDetails extends Component {
 
   render() {
     return (
-      <View style={styles.view}>
+      <View style={AppStyles.view}>
         <Text style={styles.text}>Name</Text>
         <Text style={styles.props}>{this.props.account.name ? this.props.account.name : 'no name'}</Text>
         <Text style={styles.text}>Address</Text>
@@ -41,12 +42,6 @@ export default class AccountDetails extends Component {
 }
 
 const styles = StyleSheet.create({
-  view: {
-    flex: 1,
-    marginTop: 60,
-    marginBottom: 50,
-    padding: 20,
-  },
   text: {
     marginBottom: 20,
   },

src/components/AccountsList.js

 'use strict'
 
 import React, { Component, PropTypes } from 'react'
-import { Text, StyleSheet, ListView, RecyclerViewBackedScrollView, StatusBar } from 'react-native'
+import { Text, View, ListView, RecyclerViewBackedScrollView, StatusBar } from 'react-native'
 import AccountsListRow from './AccountsListRow'
+import AppStyles from '../styles'
 
 export default class AccountsList extends Component {
   static propTypes = {
@@ -29,7 +30,7 @@ export default class AccountsList extends Component {
   render() {
     return (
       <ListView
-        style={styles.view}
+        style={AppStyles.listView}
         dataSource={this.state.dataSource}
         renderRow={(rowData, sectionID: number, rowID: number, highlightRow) => {
           return (
@@ -51,12 +52,3 @@ export default class AccountsList extends Component {
     )
   }
 }
-
-const styles = StyleSheet.create({
-  view: {
-    flex: 1,
-    marginTop: 60,
-    marginBottom: 50,
-  },
-})
-

src/components/AccountsListRow.js

+'use strict'
+
 import React, { Component, PropTypes } from 'react'
 import { TouchableHighlight, StyleSheet, View, Text } from 'react-native'
 
@@ -11,6 +13,7 @@ export default class AccountsListRow extends Component {
   render() {
     return (
       <TouchableHighlight style={styles.row} onPress={this.props.onPress} underlayColor='#0004'>
+        <View style={{flexDirection: 'column'}}>
           <View style={{flexDirection: 'row'}}>
             <View style={styles.square}/>
             <View style={{flexDirection: 'column'}}>
@@ -18,6 +21,9 @@ export default class AccountsListRow extends Component {
               <Text style={styles.lowerText} ellipsizeMode="middle" numberOfLines={1}>{this.props.lowerText}</Text>
             </View>
           </View>
+          <View style={{height: 1, backgroundColor: '#ccc'}}/>
+          <View style={{height: 1, backgroundColor: '#ddd'}}/>
+        </View>
       </TouchableHighlight>
     )
   }
@@ -25,10 +31,7 @@ export default class AccountsListRow extends Component {
 
 const styles = StyleSheet.create({
   row: {
-    flexDirection: 'row',
     backgroundColor: '#F8F8F8',
-    borderBottomWidth: 1,
-    borderColor: '#F0F0F0',
   },
   square: {
     height: 60,
@@ -40,10 +43,11 @@ const styles = StyleSheet.create({
     marginTop: 20,
     width: 200,
     fontSize: 16,
+    color: '#888',
   },
   lowerText: {
     marginTop: 5,
-    color: '#ddd',
+    color: '#aaa',
     fontSize: 10,
   }
 })

src/components/App.js

+'use strict'
+
 import React, { Component } from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 import { Provider, connect } from 'react-redux'

src/components/NewAccountInput.js

+'use strict'
+
 import React, { Component, PropTypes } from 'react'
 import { TextInput, StyleSheet } from 'react-native'
 

src/components/QrView.js

@@ -3,6 +3,7 @@
 import React, { Component, PropTypes } from 'react'
 import { Text, View, StyleSheet } from 'react-native'
 import QRCode from 'react-native-qrcode'
+import AppStyles from '../styles'
 
 export default class QrView extends Component {
   static propTypes = {
@@ -11,7 +12,7 @@ export default class QrView extends Component {
 
   render() {
     return (
-      <View style={styles.view}>
+      <View style={AppStyles.view}>
         <View style={styles.rectangleContainer}>
           <QRCode
             value={this.props.text}
@@ -26,11 +27,6 @@ export default class QrView extends Component {
 }
 
 const styles = StyleSheet.create({
-  view: {
-    flex: 1,
-    marginTop: 60,
-    marginBottom: 50,
-  },
   rectangleContainer: {
     flex: 1,
     alignItems: 'center',

src/components/Scanner.js

@@ -3,6 +3,7 @@
 import React, { Component, PropTypes } from 'react'
 import { StyleSheet, View, StatusBar } from 'react-native'
 import Camera from 'react-native-camera';
+import AppStyles from '../styles'
 
 export default class Scanner extends Component {
   static propTypes = {
@@ -11,10 +12,12 @@ export default class Scanner extends Component {
 
   render() {
     return (
-      <Camera onBarCodeRead={this.props.onBarCodeRead} style={styles.view}>
+      <Camera onBarCodeRead={this.props.onBarCodeRead} style={AppStyles.view}>
         <StatusBar barStyle='light-content'/>
         <View style={styles.rectangleContainer}>
-          <View style={styles.rectangle}/>
+          <View style={styles.rectangle}>
+            <View style={styles.innerRectangle}/>
+          </View>
         </View>
       </Camera>
     )
@@ -22,12 +25,6 @@ export default class Scanner extends Component {
 }
 
 const styles = StyleSheet.create({
-  view: {
-    flex: 1,
-    marginTop: 60,
-    marginBottom: 50,
-  },
-
   rectangleContainer: {
     flex: 1,
     alignItems: 'center',
@@ -36,10 +33,22 @@ const styles = StyleSheet.create({
   },
 
   rectangle: {
+    borderWidth: 2,
+    borderRadius: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
     height: 250,
     width: 250,
+    borderColor: '#ccc',
+    backgroundColor: 'transparent',
+  },
+
+  innerRectangle: {
+    height: 248,
+    width: 248,
     borderWidth: 2,
-    borderColor: '#00FFFF',
+    borderRadius: 25,
+    borderColor: '#ddd',
     backgroundColor: 'transparent',
   },
 });

src/components/Send.js

@@ -2,6 +2,7 @@
 
 import React, { Component, PropTypes } from 'react'
 import { StyleSheet, View, Text, TextInput, Button } from 'react-native'
+import AppStyles from '../styles'
 
 export default class Send extends Component {
   static propTypes = {
@@ -12,7 +13,7 @@ export default class Send extends Component {
 
   render() {
     return (
-      <View style={styles.view}>
+      <View style={AppStyles.view}>
         <Text style={styles.hint}>recipient address</Text>
         <TextInput
           placeholder='the recipient address'
@@ -58,12 +59,6 @@ export default class Send extends Component {
 }
 
 const styles = StyleSheet.create({
-  view: {
-    flex: 1,
-    marginTop: 60,
-    marginBottom: 50,
-    padding: 20,
-  },
   hint: {
     marginBottom: 20,
   },

src/components/TabIcon.js

+'use strict'
+
 import React, { Component, PropTypes } from 'react'
 import { Text, StyleSheet } from 'react-native'
 
@@ -19,7 +21,7 @@ const styles = StyleSheet.create({
   },
   selected: {
     fontWeight: 'bold',
-    color: 'green',
+    color: '#ddd',
   }
 })
 

src/constants/AccountActions.js

+'use strict'
+
 export const ADD_ACCOUNT = 'ACCOUNT_ACTION_ADD_ACCOUNT'
 export const SELECT_ACCOUNT = 'ACCOUNT_ACTION_SELECT_ACCOUNT'
 export const DELETE_ACCOUNT = 'ACCOUNT_ACTION_DELETE_ACCOUNT'

src/constants/TransactionActions.js

+'use strict'
+
 export const NEW_SCANNED_TX = 'TRANSACTION_ACTION_NEW_SCANNED_TX'
 export const SIGNED_TX = 'TRANSACTION_ACTION_SIGNED_TX'

src/containers/Account.js

+'use strict'
+
 import React from 'react'
 import { connect } from 'react-redux'
 import { Actions } from 'react-native-router-flux'

src/containers/Accounts.js

+'use strict'
+
 import React from 'react'
 import { connect } from 'react-redux'
 import { Actions } from 'react-native-router-flux'

src/containers/NewAccount.js

+'use strict'
+
 import React, { Component } from 'react'
 import { View, Text, TextInput, Button, StyleSheet } from 'react-native'
 import { connect } from 'react-redux'
@@ -7,6 +9,7 @@ import NewAccountInput from '../components/NewAccountInput'
 import { words } from '../util/random'
 import { brainWalletAddress } from '../util/crypto'
 import { selectAccount }  from '../actions/accounts'
+import AppStyles from '../styles'
 
 const mapDispatchToProps = (dispatch) => {
   return {
@@ -43,7 +46,7 @@ export class NewAccount extends Component {
   render() {
     var self = this;
     return (
-      <View style={styles.view}>
+      <View style={AppStyles.view}>
         <Text style={styles.hint}>name</Text>
         <TextInput
           placeholder='My Account'
@@ -85,12 +88,6 @@ export class NewAccount extends Component {
 }
 
 const styles = StyleSheet.create({
-  view: {
-    flex: 1,
-    marginTop: 60,
-    marginBottom: 50,
-    padding: 20
-  },
   hint: {
     marginBottom: 20,
   },

src/containers/Pin.js

+'use strict'
+
 import React from 'react'
 import { Alert } from 'react-native'
 import { connect } from 'react-redux'

src/containers/QrScanner.js

+'use strict'
+
 import React, { Component } from 'react'
 import { Vibration } from 'react-native'
 import { connect } from 'react-redux'

src/containers/SelectAccount.js

+'use strict'
+
 import React from 'react'
 import { connect } from 'react-redux'
 import { Actions } from 'react-native-router-flux'

src/reducers/accounts.js

+'use strict'
+
 import { ADD_ACCOUNT, SELECT_ACCOUNT, DELETE_ACCOUNT, SET_PIN } from '../constants/AccountActions'
 
 const initialAccounts = {