refactor refreshButton component

Improve accessibility
related #4

src/BottomNav.js

@@ -21,8 +21,8 @@ const styles = StyleSheet.create({
     padding: 8
   },
   bottomBtn: {
-    width: 36,
-    height: 36
+    width: 32,
+    height: 32
   },
   font10: {
     fontSize: 10
@@ -33,6 +33,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   }
 })
+const importBtn = require('../assets/img/download.png')
+const settingsBtn = require('../assets/img/settings.png')
 
 export default class BottomNav extends React.Component {
   constructor(props) {
@@ -61,10 +63,6 @@ export default class BottomNav extends React.Component {
   }
 
   render() {
-    const importBtn = require('../assets/img/download.png')
-    const refreshButton = require('../assets/img/refreshSecundary.png')
-    const settingsBtn = require('../assets/img/settings.png')
-
     return (
       <View style={styles.navigation}>
         <View style={styles.bottomGrid}>
@@ -75,17 +73,6 @@ export default class BottomNav extends React.Component {
             </View>
          </TouchableHighlight>
         </View>
-        <View style={styles.bottomGrid}>
-          <TouchableHighlight key="refresh" underlayColor='transparent' onPress={this.mainComponent.refresh}>
-            <View style={styles.col}>
-              <Image
-                style={styles.bottomBtn}
-                source={refreshButton}>
-              </Image>
-              <Text style={styles.font10}>Refresh</Text>
-            </View>
-         </TouchableHighlight>
-       </View>
         <View style={styles.bottomGrid}>
           <View style={styles.col}>
             <TouchableHighlight key="confs" underlayColor='transparent' onPress={this.openPreferences}>

src/List.js

@@ -106,7 +106,7 @@ const style = StyleSheet.create({
     borderTopWidth: 0,
     borderRightWidth: 0,
     borderLeftWidth: 0,
-    padding: 10,
+    padding: 15,
     marginTop: 3,
     backgroundColor: 'white'
   },

src/Main.js

@@ -7,13 +7,15 @@ import {
   NetInfo,
   StyleSheet,
   TouchableHighlight,
+  Text,
   View
 } from 'react-native'
 import List from './List'
 import Welcome from './Welcome'
 import Footer from './Footer'
 import BottomNav from './BottomNav'
 import ActivityIndicatorLayer from './ActivityIndicatorLayer'
+import RefreshButton from './components/Main/RefreshButton'
 import {STG_ADDRESSES, STG_STATE, CURRENCIES} from './lib/constants'
 import API from './lib/api'
 import {convertBalanceFromWei} from './lib/utils'
@@ -319,9 +321,18 @@ export default class Main extends React.Component {
       <List screenProps={screenProps} date={this.state.date} items={this.state.accounts}></List>
     return (
       <View style={styles.container}>
+        {
+          this.state.accounts.length ?
+            <RefreshButton action={this.refresh}/> :
+            undefined
+        }
+        <View style={[appStyles.center, styles.homeTitle]}>
+          <Text style={styles.homeTitleText}>Addresses</Text>
+        </View>
         <View style={offlineStyle}>
           <Image source={offlineImg} style={styles.img}/>
         </View>
+
         {
           this.state.loading ?
             <ActivityIndicatorLayer animating={true}></ActivityIndicatorLayer> :
@@ -344,5 +355,13 @@ const styles = StyleSheet.create({
   img: {
     width: 32,
     height: 32
+  },
+  homeTitle: {
+    backgroundColor: appStyles.color.primary[400],
+    height: 32
+  },
+  homeTitleText: {
+    fontSize: 16,
+    color: appStyles.color.white
   }
 })

src/Welcome.js

@@ -5,6 +5,11 @@ import List from './List'
 import appStyles from './lib/styles'
 
 const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
   warning: {
     padding: 20
   },
@@ -29,7 +34,7 @@ export default class Welcome extends React.Component {
 
   render() {
     return (
-      <View style={appStyles.container}>
+      <View style={[appStyles.container, styles.flex]}>
         <Warning customStyles={styles.warning} msg='No accounts found'></Warning>
         <Warning customStyles={styles.warning} msg='Please import an Ethereum Address to track.'></Warning>
         <View style={styles.picContainer}>

src/components/Main/RefreshButton.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import {
+  Image,
+  TouchableHighlight,
+  StyleSheet
+} from 'react-native'
+
+const styles = StyleSheet.create({
+  refreshTouch: {
+    position: 'absolute',
+    top: 5,
+    right: 15,
+    zIndex: 100,
+  },
+  refreshButton: {
+    width: 48,
+    height: 48
+  }
+})
+
+const refreshButtonImg = require('../../../assets/img/refresh-circle-secundary.png')
+
+export default class RefreshButton extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+  render() {
+    return (
+      <TouchableHighlight style={styles.refreshTouch} underlayColor='transparent' onPress={this.props.action}>
+        <Image source={refreshButtonImg} style={styles.refreshButton}/>
+      </TouchableHighlight>
+    )
+  }
+}

src/lib/styles.js

@@ -38,7 +38,7 @@ export default {
     paddingTop: 20,
     paddingBottom: 20,
     backgroundColor: '#1B5E20',
-    height: 96,
+    height: 96
   },
   headerTitleMain: {
     fontSize: 22,