Landing

native-base-theme/variables/commonColor.js

@@ -108,13 +108,13 @@ export default {
   cardDefaultBg: "#fff",
 
   // Color
-  brandPrimary: "#2aa198",
+  brandPrimary: "#ee4782",
   // brandInfo: "#268bd2",
   brandInfo: "#6c71c4",
   brandSuccess: "#859900",
   brandDanger: "#dc322f",
   brandWarning: "#b58900",
-  brandSidebar: "#002b36",
+  brandSidebar: "#FFFFFF",
 
   // Font
   fontFamily: platform === "ios" ? "System" : "Roboto",

src/App.js

@@ -18,7 +18,7 @@ const AppNavigator =  StackNavigator({
     StarWars: { screen: StarWars },
     Person: { screen: Person }
 }, {
-    initialRouteName: 'Login'
+    initialRouteName: 'Home'
 });
 
 export default () => (

src/BrandedContainer.js

@@ -11,7 +11,7 @@ import {
 } from 'native-base/src';
 import colors from '../native-base-theme/variables/commonColor';
 
-const background = require('./images/codehangar-transparent.png');
+const background = require('./images/appicon.png');
 
 export default class BrandedContainer extends React.PureComponent {
     getLowerStyles = () => {

src/Home.js

@@ -1,84 +1,72 @@
 import React from 'react';
 import {
-    StyleSheet
+  StyleSheet
 } from 'react-native';
 import {
-    StyleProvider,
-    Container,
-    Content,
-    H1, H2, H3,
-    Text,
-    Button
+  StyleProvider,
+  Content,
+  H1, H2, H3,
+  Text,
+  Button,
+  Footer
 } from 'native-base/src';
+import BrandedContainer from './BrandedContainer';
 // import { Button } from 'native-base/src/basic/Button';
 
 export default class Home extends React.Component {
-    static navigationOptions = ({ navigation, screenProps }) => ({
-        title: 'React Native Rockstarter',
-        headerRight: (
-            <Button transparent
-                    onPress={() => navigation.navigate('Profile')}>
-                <Text>Profile</Text>
-            </Button>
-        )
-    });
+  static navigationOptions = ({navigation, screenProps}) => ({
+    title: 'LadyDevs Mentor Match',
+  });
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            text: '',
-            isLoading: true
-        };
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: '',
+      isLoading: true
+    };
+  }
 
-    render() {
-        const { navigate } = this.props.navigation;
-        return (
-            <Container>
-                <Content contentContainerStyle={styles.container}>
-                    <H1>Welcome</H1>
-                    <H2>to the</H2>
-                    <H3>React Native Rockstarter</H3>
-                    <Button danger style={styles.buttonContainer}
-                            onPress={() => navigate('Login')}
-                    >
-                        <Text>Login</Text>
-                    </Button>
-                    <Button primary style={styles.buttonContainer}
-                            onPress={() => navigate('Demo')}
-                    >
-                        <Text>Demo</Text>
-                    </Button>
-                    <Button info style={styles.buttonContainer}
-                            onPress={() => navigate('StarWars', { endpoint: 'people' })}
-                    >
-                        <Text>Star Wars People</Text>
-                    </Button>
-                    <Button success style={styles.buttonContainer}
-                            onPress={() => navigate('StarWars', { endpoint: 'planets' })}
-                    >
-                        <Text>Star Wars Planets</Text>
-                    </Button>
-                    <Button warning style={styles.buttonContainer}
-                            onPress={() => navigate('StarWars', { endpoint: 'starships' })}
-                    >
-                        <Text>Star Wars Starships</Text>
-                    </Button>
-                </Content>
-            </Container>
-        );
-    }
+  render() {
+    const {navigate} = this.props.navigation;
+    return (
+      <BrandedContainer>
+        <Content contentContainerStyle={styles.container}>
+          <H1>LadyDevs Mentor Match</H1>
+          <Text style={styles.description}>Connect with a dev mentor in your community.</Text>
+        </Content>
+        <Button block large
+                style={styles.button}
+                onPress={() => this.props.navigation.navigate('Register')}>
+          <Text>Get Started</Text>
+        </Button>
+        <Button bordered block large style={styles.button}>
+          <Text>I Already Have an Account</Text>
+        </Button>
+      </BrandedContainer>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
-        flexDirection: 'column',
-        alignItems: 'center'
-        // justifyContent: 'center'
+      flex: 1,
+      flexDirection: 'column',
+      alignItems: 'center',
+      padding: 20
+    },
+    description: {
+      textAlign: 'center',
+      marginTop: 10
     },
     buttonContainer: {
-        margin: 10,
-        alignSelf: 'center'
+      margin: 10,
+      alignSelf: 'center'
+    },
+    footer: {
+      backgroundColor: '#fff'
+    },
+    button: {
+      marginBottom: 20
     }
-});
+  })
+;

src/Register.js

@@ -9,7 +9,10 @@ import {
     Text,
     Icon,
     Item,
-    Input
+    Input,
+    CheckBox,
+    Body,
+    ListItem
 } from 'native-base/src';
 import { NavigationActions } from 'react-navigation';
 import API from './utils/api';
@@ -18,8 +21,14 @@ import BrandedContainer from './BrandedContainer';
 
 export default class Register extends React.Component {
     static navigationOptions = {
-        title: 'Register',
-        headerLeft: null
+        title: 'Create an Account',
+        headerBackTitleStyle: {
+            color: '#ee4782'
+        },
+        headerTintColor: '#ee4782',
+        headerTitleStyle: {
+          color: '#000'
+        }
     };
 
     constructor(props) {
@@ -133,19 +142,24 @@ export default class Register extends React.Component {
                             <Icon name={!this.state.showPassword ? 'eye' : 'eye-off'}/>
                         </Button>
                     </Item>
+                    <ListItem>
+                        <CheckBox color="#000"/>
+                        <Body>
+                            <Text>I agree to abide by the LadyDevs Code of Conduct.</Text>
+                        </Body>
+                    </ListItem>
                     <Button block
                             style={styles.btn}
-                            onPress={this.login}
-                    >
-                        <Text>REGISTER</Text>
-                    </Button>
-                    <Button block
-                            transparent
-                            style={styles.btn}
-                            onPress={() => this.props.navigation.navigate('Login')}
-                    >
-                        <Text>Login</Text>
+                            onPress={this.login}>
+                        <Text>CONTINUE</Text>
                     </Button>
+                    {/*<Button block*/}
+                            {/*transparent*/}
+                            {/*style={styles.btn}*/}
+                            {/*onPress={() => this.props.navigation.navigate('Login')}*/}
+                    {/*>*/}
+                        {/*<Text>Login</Text>*/}
+                    {/*</Button>*/}
                 </Content>
             </BrandedContainer>
         );