nicer menu and other touches

app/screens/main.js

@@ -58,8 +58,13 @@ export default class Main extends Component<Props> {
     });
   }
 
+  openDrawer = () => {
+    this.refs['menu'].openDrawer();
+  }
+
   render() {
     console.log('in Main');
+
     const { position, avatar } = this.state;
     const avatarLink = allAvatarLinks[avatar];
 
@@ -67,18 +72,22 @@ export default class Main extends Component<Props> {
 
     return (
       <DrawerLayoutAndroid
+        ref="menu"
         drawerWidth={300}
         drawerPosition={DrawerLayoutAndroid.positions.Left}
-        renderNavigationView={() => <Menu  refreshConnection={this.refreshConnection}
+        renderNavigationView={() => <Menu refreshConnection={this.refreshConnection}
                                           refreshAvatar={this.refreshAvatar}
-                                          disconnect={this.disconnect} />}>
+                                          disconnect={this.disconnect}
+                                          avatar={avatarLink} />}>
         <View style={styles.container}>
           <View style={styles.navbar}>
-            <Navbar avatar={avatarLink} />
+            <Navbar openDrawer={this.openDrawer} avatar={avatarLink} />
           </View>
+
           <View style={styles.chat}>
             <Chat position={position} avatar={avatarLink} />
           </View>
+
           <View style={styles.adspace}>
             <AdSpace />
           </View>

app/screens/main/chat.js

@@ -180,6 +180,7 @@ export default class Chat extends Component<Props> {
               multiline = {true}
               numberOfLines = {4}
               maxLength = {220}
+              underlineColorAndroid='rgba(0,0,0,0)'
             />
           </View>
           <View style={styles.iconCont}>
@@ -242,14 +243,14 @@ const styles = {
       padding: 10,
       borderBottomRightRadius: 10,
       borderBottomLeftRadius: 10,
-      shadowColor:'black',
+      shadowColor: 'black',
       shadowOffset: {
         width: 0,
         height: 3
       },
       shadowRadius: 5,
       shadowOpacity: 1.0,
-      elevation: 5
+      elevation: 3
     },
       userMsgBox: {
         backgroundColor: '#0e8f9e',
@@ -273,29 +274,37 @@ const styles = {
   inputMsgField: {
     flex: 1,
     flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    height: 50,
+    alignItems: 'stretch',
+    justifyContent: 'center',
+    margin: 12,
     backgroundColor: 'white',
-    marginTop: 10
-  },
-  iconCont: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
+    shadowColor: '#0e8f9e',
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowRadius: 5,
+    shadowOpacity: 1.0,
+    elevation: 5,
+    padding: 2
   },
   inputCont: {
-    flex: 6,
-    alignSelf: 'flex-end',
-    marginLeft: 10
+    flex: 6
   },
     inputField : {
       fontSize: 18,
       fontFamily: Fonts.SunflowerLight
     },
-  sendIcon: {
-    fontSize: 25
+  iconCont: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderLeftColor: '#0e8f9e',
+    borderLeftWidth: 1
   },
+    sendIcon: {
+      fontSize: 15
+    },
     sendIconColor: {
       fontSize: 25,
       color: '#0e8f9e'

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'
     }
 }

app/screens/main/navbar.js

@@ -6,7 +6,8 @@ import {
   Dimensions,
   View,
   Text,
-  Image
+  Image,
+  TouchableOpacity
 } from 'react-native';
 import {
   Actions
@@ -24,20 +25,24 @@ export default class Navbar extends Component<Props> {
   }
 
   render() {
-    const { avatar } = this.props;
+    const { openDrawer, avatar } = this.props;
 
     return (
       <View style={styles.container}>
         <View style={styles.iconCont}>
-          <Icon
-            name='menu'
-            style={styles.menuIcon}
-          />
+          <TouchableOpacity onPress={openDrawer}>
+            <Icon
+              name='menu'
+              style={styles.menuIcon}
+            />
+          </TouchableOpacity>
         </View>
+
         <View style={styles.headerTxt}>
           <Text style={styles.head}>Chat</Text>
           <Text style={styles.status}>online</Text>
         </View>
+
         <View style={styles.iconCont}>
           <Image style={styles.avatar} source={{uri: avatar}} />
         </View>