Feat: Organism/SignUpButtons

routes.js

@@ -144,13 +144,13 @@ const screens = createDrawerNavigator({
       drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
     },
   },
-  Login: {
-    screen: Login,
-    navigationOptions: {
-      drawerLabel: 'Login Screen',
-      drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
-    },
-  },*/
+  // Login: {
+  //   screen: Login,
+  //   navigationOptions: {
+  //     drawerLabel: 'Login Screen',
+  //     drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
+  //   },
+  // },*/
   Register: {
     screen: Register,
     navigationOptions: {

src/Organisms/SignUpButtons.js

@@ -0,0 +1,45 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import {
+  Alert
+} from 'react-native';
+
+// galio component
+import { Block, Button, Link} from 'galio-framework';
+import theme from '../theme';
+
+const SignUpButtons = () => {
+  return (
+    <Block flex center>
+      <Block flex middle>
+        <Button
+          round
+          color="primary"
+          size="large"
+          onPress={() =>
+            Alert.alert(
+              'Sign up action',
+              `
+              Username: ${'user'}
+              Email: ${'email'}
+              Password: ${'password'}`
+            )
+          }
+        >
+          Sign up
+        </Button>
+        <Link 
+          center
+          size={theme.SIZES.FONT * 0.75}
+          style={{ paddingTop: 8 }}
+          onPress={() => navigation.navigate('Login')}
+          >
+          Already have an account? Sign In
+        </Link>
+      </Block>
+    </Block>
+
+  )
+};
+
+export default SignUpButtons;

src/Organisms/SignupSocial.js

@@ -22,7 +22,7 @@ const SignUpSocial = () => {
       </Text>
       <Block row center space="between" style={{ marginVertical: theme.SIZES.BASE }}>
           <Block flex middle right>
-          <Button
+            <Button
               round
               onlyIcon
               iconSize={theme.SIZES.BASE * 1.625}
@@ -36,7 +36,7 @@ const SignUpSocial = () => {
           />
           </Block>
           <Block flex middle center>
-          <Button
+            <Button
               round
               onlyIcon
               iconSize={theme.SIZES.BASE * 1.625}
@@ -50,7 +50,7 @@ const SignUpSocial = () => {
           />
           </Block>
           <Block flex middle left>
-          <Button
+            <Button
               round
               onlyIcon
               iconSize={theme.SIZES.BASE * 1.625}

src/screens/Register.js

@@ -1,80 +1,38 @@
 import React from 'react';
 import {
-  Alert,
-  Dimensions,
   StyleSheet,
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
 // galio component
-import { Block, Button, Input, Text, NavBar } from 'galio-framework';
+import { Block, NavBar, Icon } from 'galio-framework';
 import theme from '../theme';
 
 import SignUpInputs from '../organisms/SignUpInputs';
+import SignUpSocial from '../organisms/SignUpSocial.js';
+import SignUpButtons from '../organisms/SignUpButtons.js';
 
-const { height, width } = Dimensions.get('window');
-
-import SignUpSocial from '../Organisms/SignupSocial.js';
 
 class Login extends React.Component {
-  state = {
-    user: '-',
-    email: '-',
-    password: '-',
-  };
 
   handleChange = (name, value) => {
     this.setState({ [name]: value });
   };
 
   render() {
     const { navigation } = this.props;
-    const { user, email, password } = this.state;
 
     return (
       <Block safe flex style={{ backgroundColor: theme.COLORS.WHITE }}>
         <NavBar
           title="Sign Up"
           onLeftPress={() => navigation.openDrawer()}
           style={Platform.OS === 'android' ? { marginTop: theme.SIZES.BASE } : null}
-          />
+        />
         <KeyboardAvoidingView style={styles.container} behavior="height" enabled>
-
           <SignUpSocial />
-
-          <Block flex={2} center space="between">
-            <SignUpInputs />
-            <Block flex middle>
-              <Button
-                round
-                color="error"
-                onPress={() =>
-                  Alert.alert(
-                    'Sign up action',
-                    `
-Username: ${user}
-Email: ${email}
-Password: ${password}`
-                  )
-                }
-              >
-                Sign up
-              </Button>
-              <Button
-                color="transparent"
-                shadowless
-                onPress={() => navigation.navigate('Login')}
-              >
-                <Text
-                  center
-                  color={theme.COLORS.ERROR}
-                  size={theme.SIZES.FONT * 0.75}
-                >
-                  Already have an account? Sign In
-                </Text>
-              </Button>
-            </Block>
-          </Block>
+          <SignUpInputs />
+          <SignUpButtons />
         </KeyboardAvoidingView>
       </Block>
     );
@@ -85,11 +43,11 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'space-around',
+    justifyContent: 'space-evenly',
     paddingTop: theme.SIZES.BASE * 0.3,
     paddingHorizontal: theme.SIZES.BASE,
     backgroundColor: theme.COLORS.WHITE,
-  }
+  },
 });
 
-export default Login;
+export default Login;