nicer menu and other touches

app/screens/main/menu.js

@@ -7,7 +7,8 @@ import {
   View,
   Text,
   ImageBackground,
-  TouchableOpacity
+  TouchableOpacity,
+  StyleSheet
 } from 'react-native';
 import {
   Actions
@@ -22,41 +23,55 @@ const backgroundLink = '../../assets/images/homeBg.jpg';
 type Props = {};
 export default class Menu extends Component<Props> {
   render() {
-    const { refreshConnection, refreshAvatar, disconnect } = this.props;
+    const { refreshConnection, refreshAvatar, disconnect, avatar } = this.props;
+
     return (
       <View style={styles.container}>
-        <ImageBackground style={styles.header} source={require(backgroundLink)} >
-          <Text style={styles.hdrTxt}>Menu</Text>
+        <ImageBackground
+          style={styles.header}
+          source={{uri: avatar}}>
+          <View style={styles.overlay}>
+            <Text style={styles.hdrTxt}>Menu</Text>
+          </View>
         </ImageBackground>
+
         <View style={styles.main}>
           <TouchableOpacity onPress={refreshConnection}>
             <View style={styles.option}>
-              <Text style={styles.optTxt}>Refresh Connection</Text>
               <Icon
                 name='track-changes'
                 style={styles.icons}
               />
+              <Text style={styles.optTxt}>Refresh Connection</Text>
             </View>
           </TouchableOpacity>
+
           <TouchableOpacity onPress={refreshAvatar}>
             <View style={styles.option}>
-              <Text style={styles.optTxt}>Change Avatar</Text>
               <Icon
                 name='refresh'
-                style={styles.icons}
+                style={[styles.icons, styles.refresh]}
               />
+              <Text style={styles.optTxt}>Change Avatar</Text>
             </View>
           </TouchableOpacity>
+
           <TouchableOpacity onPress={disconnect}>
             <View style={styles.option}>
-              <Text style={styles.optTxt}>Disconnect</Text>
               <Icon
                 name='exit-to-app'
-                style={styles.icons}
+                style={[styles.icons, styles.disconnect]}
               />
+              <Text style={styles.optTxt}>Disconnect</Text>
             </View>
           </TouchableOpacity>
         </View>
+
+        <View style={styles.copyrightCont}>
+          <Text style={styles.copyrightTxt}>&copy; Nexto</Text>
+          <Text style={styles.copyrightTxtExtra}>2018.</Text>
+        </View>
+
       </View>
     );
   }
@@ -64,17 +79,21 @@ export default class Menu extends Component<Props> {
 
 const styles = {
   container: {
-    flex: 13,
+    flex: 14,
     backgroundColor: 'white'
   },
   header: {
-    flex: 3,
-    backgroundColor: 'grey',
-    justifyContent: 'center',
-    alignItems: 'center'
+    flex: 3
   },
+    overlay: {
+      flex: 1,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor:'rgba(0,0,0,0.5)'
+    },
     hdrTxt: {
-      color: '#0e8f9e',
+      color: 'white',
       fontSize: 30
     },
   main: {
@@ -86,18 +105,41 @@ const styles = {
     flex: 0,
     flexBasis: 3,
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'flex-start',
     alignItems: 'center',
-    padding: 30,
-    borderWidth: 2,
-    borderStyle: 'solid',
-    borderColor: '#d7d9dd'
+    paddingTop: 25,
+    paddingBottom: 25
   },
     icons: {
-      fontSize: 30,
+      fontSize: 20,
+      color: '#0e8f9e',
+      padding: 10
+    },
+      refresh: {
+        color: 'green'
+      },
+      disconnect: {
+        color: 'red'
+      },
+    optTxt: {
+      fontSize: 15,
+      fontWeight: 'bold',
+      color: 'black',
+      textAlign: 'left',
+      padding: 10
+    },
+  copyrightCont: {
+    flex: 1,
+    backgroundColor: '#202021',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 10
+  },
+    copyrightTxt: {
       color: '#0e8f9e'
     },
-    optTxt: {
-      fontSize: 20
+    copyrightTxtExtra: {
+      fontSize: 10,
+      color: '#0e8f9e'
     }
 }