feat(rn): added sent invite to choice screen and improved choice scre…

…en style

client/react-native/common/components/Screens/Contacts/Add/ByPublicKey.js

@@ -11,7 +11,6 @@ import {
   borderBottom,
 } from '../../../../styles'
 import { mutations } from '../../../../graphql'
-
 import createTabNavigator from 'react-navigation-deprecated-tab-navigator/src/createTabNavigator'
 
 class ByPublicKey extends PureComponent {

client/react-native/common/components/Screens/Contacts/Add/Choice.js

@@ -12,29 +12,35 @@ export default class Choice extends PureComponent {
         size={1}
         style={[{ backgroundColor: colors.white }, borderTop]}
       >
-        <Flex.Rows size={1} align='center' space='evenly' style={[padding]}>
+        <Flex.Rows size={1} align='center' style={[padding]}>
           <Item
-            color={colors.blue}
-            name='Bump'
-            link='ByBump'
+            icon='user-plus'
+            name='Pending requests'
+            link='Request'
             navigation={navigation}
           />
           <Item
-            color={colors.red}
-            name='Scan a QR Code'
+            icon='square'
+            name='QR Code'
             link='ByQRCode'
             navigation={navigation}
           />
           <Item
-            color={colors.orange}
-            name='Enter a public key'
+            icon='edit-2'
+            name='Public key'
             link='ByPublicKey'
             navigation={navigation}
           />
           <Item
-            color={colors.yellow}
-            name='Pending contact requests'
-            link='Request'
+            icon='smartphone'
+            name='Bump'
+            link='ByBump'
+            navigation={navigation}
+          />
+          <Item
+            icon='mail'
+            name='Invite a friend'
+            link='Invite'
             navigation={navigation}
           />
         </Flex.Rows>
@@ -43,29 +49,26 @@ export default class Choice extends PureComponent {
   }
 }
 
-const Item = ({ color, name, link, navigation }) => (
+const Item = ({ icon, name, link, navigation }) => (
   <TouchableOpacity
     onPress={() => navigation.push(link)}
     style={[
       {
         borderRadius: 8,
-        height: 100,
+        height: 60,
         width: 300,
-        backgroundColor: color,
-        justifyContent: 'center',
-        alignItems: 'center',
+        backgroundColor: colors.blue,
+        paddingLeft: 24,
+        paddingRight: 8,
+        margin: 10,
       },
     ]}
   >
-    <Text
-      style={[
-        {
-          fontSize: 30,
-          color: colors.white,
-        },
-      ]}
-    >
-      {name}
-    </Text>
+    <Flex.Cols size={1} align='center' space='between'>
+      <Text icon={icon} large color={colors.white}>
+        {name}
+      </Text>
+      <Text icon='chevron-right' large color={colors.white} />
+    </Flex.Cols>
   </TouchableOpacity>
 )

client/react-native/common/components/Screens/Contacts/Add/Invite.js

@@ -0,0 +1,8 @@
+import React, { PureComponent } from 'react'
+import { Text } from '../../../Library'
+
+export default class ByBump extends PureComponent {
+  render () {
+    return <Text>Invite!</Text>
+  }
+}

client/react-native/common/components/Screens/Contacts/Add/index.js

@@ -1,31 +1,35 @@
 import { createSubStackNavigator } from '../../../../helpers/react-navigation'
 import Choice from './Choice'
-import ByBump from './ByBump'
-import ByPublicKey from './ByPublicKey'
-import ByQRCode from './ByQRCode'
 import Request from './Request'
+import ByQRCode from './ByQRCode'
+import ByPublicKey from './ByPublicKey'
+import ByBump from './ByBump'
+import Invite from './Invite'
 import RequestValidation from './RequestValidation'
 import React from 'react'
 import { Header } from '../../../Library'
 
 export default createSubStackNavigator(
   {
-    ByBump,
-    ByPublicKey,
-    ByQRCode,
     Request,
+    ByQRCode,
+    ByPublicKey,
+    ByBump,
+    Invite,
     RequestValidation,
     Choice,
   },
   {
     initialRouteName: 'Choice',
     navigationOptions: ({ navigation }) => ({
-      header: <Header
-        navigation={navigation}
-        title='Add a contact'
-        titleIcon='user-plus'
-        backBtn
-      />,
+      header: (
+        <Header
+          navigation={navigation}
+          title='Add a contact'
+          titleIcon='user-plus'
+          backBtn
+        />
+      ),
     }),
   }
 )