Add contact (#908)

* WIP on new add contact screen * Wip on searching and displaying Textile contacts * Increase wait time for now * Render add contact search bar above list for now * Local contacts search integration * Mostly working Textile contact adding * Clean up log statements * WIP on MessageComposer * Working on invite * Move store link to .env * Clean up Button usage * Little clean up
textileio · Feb 5, 2019 · cadeee9 · cadeee9
1 parent 6a2b14b
commit cadeee9
Show file tree

Hide file tree

Showing 42 changed files with 1,074 additions and 619 deletions.
diff --git a/.env.example b/.env.example
@@ -9,4 +9,6 @@ RN_MAILCHIMP_API_KEY="a-key"
 RN_MAILCHIMP_LIST_ID="a-list-id"
 RN_MAILCHIMP_WAITLIST_ID="a-list-id"
 RN_PEER_SWAP="https://<peer endpoint>"
-RN_RELEASE_TYPE="dev"
+RN_RELEASE_TYPE="dev"
+RN_IOS_STORE_LINK="https://<ios store link>"
+RN_ANDROID_STORE_LINK="https://<android store link>"
diff --git a/App/Components/Button.tsx b/App/Components/Button.tsx
@@ -1,12 +1,13 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { Text, TouchableOpacity, ViewStyle, TextStyle, ActivityIndicator } from 'react-native'
 
+import RoundedCornersView from './RoundedCornersView'
+
 const BUTTON: ViewStyle = {
-  backgroundColor: '#2625FF',
-  minWidth: 300,
-  paddingVertical: 18,
-  paddingHorizontal: 65,
-  borderRadius: 6
+  backgroundColor: '#2625FF'
+  // minWidth: 300,
+  // paddingVertical: 18,
+  // paddingHorizontal: 65
 }
 
 const BUTTON_TEXT: TextStyle = {
@@ -33,13 +34,15 @@ const button = (props: Props) => {
   const { onPress, disabled, text, style, textStyle, processing } = props
 
   return (
-    <TouchableOpacity disabled={disabled} style={[BUTTON, style, disabled && DISABLED]} onPress={onPress}>
-      {processing &&
-        <ActivityIndicator/>
-      }
-      {!processing &&
-        <Text style={[BUTTON_TEXT, textStyle]}>{text}</Text>
-      }
+    <TouchableOpacity disabled={disabled} onPress={onPress}>
+      <RoundedCornersView style={[BUTTON, style, disabled && DISABLED]}>
+        {processing &&
+          <ActivityIndicator />
+        }
+        {!processing &&
+          <Text style={[BUTTON_TEXT, textStyle]}>{text}</Text>
+        }
+      </RoundedCornersView>
     </TouchableOpacity>
   )
 }

diff --git a/App/Components/LargeButton.tsx b/App/Components/LargeButton.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { ViewStyle } from 'react-native'
+import Button from './Button'
+import * as s from '../Themes/Constants'
+
+interface Props {
+  text: string
+  style?: ViewStyle
+  disabled?: boolean
+  processing?: boolean
+  onPress?: () => void
+}
+
+const button = (props: Props) => {
+  const { text, onPress, style, processing } = props
+  return (
+    <Button
+      text={text}
+      textStyle={{
+        fontFamily: 'Biotif-Bold',
+        fontSize: 16,
+        letterSpacing: 3,
+        paddingLeft: 3,
+        textTransform: 'uppercase'
+      }}
+      style={{
+        ...style,
+        paddingHorizontal: s.SPACING_24,
+        paddingVertical: s.SPACING_12,
+        backgroundColor: s.COLOR_BRAND_BLUE
+      }}
+      processing={processing}
+      disabled={props.disabled}
+      onPress={onPress}
+    />
+  )
+}
+
+export default button
diff --git a/App/Components/ListItem.tsx b/App/Components/ListItem.tsx
@@ -4,38 +4,31 @@ import { View, Text, TouchableOpacity } from 'react-native'
 import * as s from '../Themes/Constants'
 
 interface Props {
-  id: string
   title: string
   subtitle?: string
   leftItem?: JSX.Element
   rightItems?: JSX.Element[]
-  onPress?: (id: string) => void
+  onPress?: () => void
 }
 
 class ListItem extends React.PureComponent<Props> {
 
-  onPress = () => {
-    if (this.props.onPress) {
-      this.props.onPress(this.props.id)
-    }
-  }
-
   spliceRightItems = (items: JSX.Element[]) => {
     const foo: JSX.Element[] = []
     return foo.concat.apply([], items.map((item, index) => [<View key={index} style={{ width: 8 }} />, item]))
   }
 
   render() {
     return (
-      <TouchableOpacity delayPressIn={100} onPress={this.onPress}>
-        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', paddingLeft: 20, paddingRight: 20, paddingTop: 11, paddingBottom: 11 }}>
+      <TouchableOpacity delayPressIn={100} onPress={this.props.onPress}>
+        <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', paddingLeft: 12, paddingRight: 12, paddingTop: 12, paddingBottom: 12 }}>
           {this.props.leftItem &&
             this.props.leftItem
           }
-          <View style={{ flex: 1, justifyContent: 'center', marginLeft: 11 }}>
+          <View style={{ flex: 1, justifyContent: 'center', marginLeft: this.props.leftItem ? 12 : 0 }}>
             <Text style={{ fontFamily: s.FONT_FAMILY_REGULAR, fontSize: s.FONT_SIZE_MEDIUM, color: s.COLOR_FONT_DARK_ON_LIGHT_MEDIUM }}>{this.props.title}</Text>
             {this.props.subtitle &&
-              <Text style={{ fontFamily: s.FONT_FAMILY_REGULAR, fontSize: s.FONT_SIZE_REGULAR, color: s.COLOR_FONT_DARK_ON_LIGHT_LIGHT }}>{this.props.subtitle}</Text>
+              <Text style={{ fontFamily: s.FONT_FAMILY_REGULAR, fontSize: s.FONT_SIZE_SMALL, color: s.COLOR_FONT_DARK_ON_LIGHT_LIGHT }}>{this.props.subtitle}</Text>
             }
           </View>
           {this.props.rightItems &&

diff --git a/App/Components/OnboardingMessage.tsx b/App/Components/OnboardingMessage.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Image, ImageSourcePropType, ImageStyle, Text, TextStyle, View, ViewStyle } from 'react-native'
 import * as s from '../Themes/Constants'
-import Button from './Button'
+import Button from './LargeButton'
 
 const CONTAINER: ViewStyle = {
   flex: 1,
@@ -26,7 +26,8 @@ const SUBTITLE: TextStyle = {
 
 const BUTTON_WRAPPER: ViewStyle = {
   flex: 1,
-  justifyContent: 'center'
+  justifyContent: 'center',
+  alignSelf: 'center'
 }
 
 interface Props {

diff --git a/App/Components/ReferralCode.tsx b/App/Components/ReferralCode.tsx
@@ -4,7 +4,7 @@ import Toast from 'react-native-easy-toast'
 import Modal from 'react-native-modal'
 
 import Input from '../SB/components/Input'
-import Button from './Button'
+import Button from './LargeButton'
 import * as s from '../Themes/Constants'
 import WaitListSignupScreen from './WaitListSignupScreen'
 
@@ -43,6 +43,11 @@ const LABEL: TextStyle = {
   fontFamily: s.FONT_FAMILY_REGULAR
 }
 
+const BUTTON: ViewStyle = {
+  ...ITEM,
+  alignSelf: 'center'
+}
+
 const LINK: TextStyle = {
   fontFamily: s.FONT_FAMILY_REGULAR,
   fontSize: s.FONT_SIZE_REGULAR,
@@ -121,7 +126,7 @@ export default class ReferralCode extends React.Component<Props, State> {
               text='Next'
               disabled={!this.state.valid}
               onPress={this.props.onSuccess}
-              style={ITEM}
+              style={BUTTON}
             />
             <Text style={LINK} onPress={this.showWaitlistSignup}>Request a referral code</Text>
             <Toast

diff --git a/App/Components/RowSeparator.tsx b/App/Components/RowSeparator.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Platform, Dimensions, View } from 'react-native'
-import { COLOR_GREY_MEDIUM, MARGIN_STANDARD } from '../Themes/Constants'
+import { COLOR_GREY_MEDIUM } from '../Themes/Constants'
 
 const separator = () => {
   const scale = Dimensions.get('screen').scale
   const height = scale > 1 ? 0.5 : 1
-  const margin = Platform.OS === 'ios' ? MARGIN_STANDARD : 0
+  const margin = Platform.OS === 'ios' ? 12 : 0
   return <View style={{ height, width: '100%', marginLeft: margin, backgroundColor: COLOR_GREY_MEDIUM }} />
 }
 

diff --git a/App/Components/SearchBar.tsx b/App/Components/SearchBar.tsx
@@ -22,7 +22,10 @@ class SearchBar extends Component<Props, State> {
 
   static defaultProps: Props = {
     containerStyle: {
-      padding: 8,
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingLeft: 12,
+      paddingRight: 12,
       backgroundColor: 'lightgrey'
     },
     inputStyle: {

diff --git a/App/Components/SmallButton.tsx b/App/Components/SmallButton.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import Button from './Button'
+import * as s from '../Themes/Constants'
+
+interface Props {
+  text: string
+  disabled?: boolean
+  onPress?: () => void
+}
+
+const button = (props: Props) => {
+  const { text, onPress } = props
+  return (
+    <Button
+      text={text}
+      textStyle={{
+        fontFamily: 'Biotif-Bold',
+        fontSize: 10,
+        letterSpacing: 2,
+        paddingLeft: 2,
+        textTransform: 'uppercase'
+      }}
+      style={{
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        backgroundColor: s.COLOR_BRAND_BLUE
+      }}
+      disabled={props.disabled}
+      onPress={onPress}
+    />
+  )
+}
+
+export default button
diff --git a/App/Components/WaitListSignupScreen.tsx b/App/Components/WaitListSignupScreen.tsx
@@ -5,7 +5,7 @@ import Config from 'react-native-config'
 import { Buffer } from 'buffer'
 
 import Input from '../SB/components/Input'
-import Button from '../Components/Button'
+import Button from '../Components/LargeButton'
 import * as s from '../Themes/Constants'
 
 const CONTAINER: ViewStyle = {
@@ -43,6 +43,11 @@ const LABEL: TextStyle = {
   fontFamily: s.FONT_FAMILY_REGULAR
 }
 
+const BUTTON: ViewStyle = {
+  ...ITEM,
+  alignSelf: 'center'
+}
+
 const LINK: TextStyle = {
   fontFamily: s.FONT_FAMILY_REGULAR,
   fontSize: s.FONT_SIZE_REGULAR,
@@ -124,7 +129,7 @@ export default class WaitListSignupScreen extends React.Component<Props, State>
               disabled={!this.state.valid}
               processing={this.state.processing}
               onPress={this.submit}
-              style={ITEM}
+              style={BUTTON}
             />
             <Text style={LINK} onPress={this.props.onSuccess}>Cancel</Text>
             <Toast