new login

src/Router.js

@@ -14,13 +14,13 @@ import Menu from './scenes/Menu';
 const scenes = Actions.create(
 	<Scene key="container">
 
-		<Scene key="auth">
-			<Scene key="login" component={LoginForm} title="Ingresar" initial />
+		<Scene key="auth" hideNavBar={true}>
+			<Scene key="login" component={LoginForm} sceneStyle={{ paddingTop: 0 }} hideNavBar={true} title="Ingresar" initial />
 			<Scene key="register" component={RegisterForm} title="Registrarse" />
 		</Scene>
 
-		<Scene key="main">
-			<Scene key="ListaCursadas" rightTitle="Curso en vivo" onRight={ () => Actions.Live() } component={ListaCursadas} title="Cursadas" />
+		<Scene key="main" hideNavBar={false}>
+			<Scene key="ListaCursadas" rightTitle="test" onRight={ () => Actions.Live() } component={ListaCursadas} title="Cursadas" />
 			<Scene key="ViewCursada" component={ListaClases} title="Clases" />
 			<Scene key="ViewClase" component={Clase} title="Clase" />
 			<Scene key="ViewProf" component={Profesor} title="Profesor" />

src/components/common/Button.js

@@ -16,21 +16,21 @@ const Button = (props) => {
 const styles = {
   textStyle: {
     alignSelf: 'center',
-    color: '#007aff',
+    color: '#F1F2F2',
     fontSize:16,
     fontWeight: '600',
-    paddingTop: 10,
-    paddingBottom: 10
+    paddingTop: 5,
+    paddingBottom: 5
   },
   buttonStyle: {
-    flex: 1,
+    height: 40,
+    justifyContent: 'center',
     alignSelf: 'stretch',
-    backgroundColor: '#fff',
+    backgroundColor: '#6281A2',
     borderRadius: 5,
-    borderWidth: 1,
-    borderColor: '#007aff',
-    marginLeft: 5,
-    marginRight: 5
+    marginLeft: 20,
+    marginRight: 20,
+    marginBottom: 10
   }
 };
 export {Button};

src/components/common/Spinner.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { View, ActivityIndicator } from 'react-native';
 
-const Spinner = ( {size} ) => {
+const Spinner = ( props ) => {
 	return (
-		<View style={styles.spinnerStyle}>
-			<ActivityIndicator size={size || 'large'} />
+		<View style={[styles.spinnerStyle, props.style]}>
+			<ActivityIndicator size={props.size || 'large'} />
 		</View>
 	);
 };

src/scenes/LoginForm.js

@@ -1,8 +1,8 @@
 import React, { Component} from 'react';
-import { Text } from 'react-native';
+import { Text, TextInput, View, Image, TouchableOpacity } from 'react-native';
 import { connect } from 'react-redux';
 import { Actions } from 'react-native-router-flux';
-import { Card, CardSection, Input, Button, Spinner } from '../components/common';
+import { Button, Spinner } from '../components/common';
 import { emailChanged, passwordChanged, loginUser } from '../actions/';
 
 class LoginForm extends Component {
@@ -25,7 +25,7 @@ class LoginForm extends Component {
 
   renderButton() {
     if (this.props.loading) {
-      return <Spinner size="large" />;
+      return <Spinner style={{height:40}} size="large" />;
     }
     return (
       <Button onPress={this.onLoginPress.bind(this)}>
@@ -35,40 +35,53 @@ class LoginForm extends Component {
   }
   render() {
     return (
-      <Card>
-        <CardSection>
-          <Input
-            label="Email"
-            placeholder="email@gmail.com"
-            value={this.props.email}
-            onChangeText={this.onEmailChange.bind(this)}
-          />
-        </CardSection>
-
-        <CardSection>
-          <Input
-            secureTextEntry
-            label="Clave"
-            placeholder="clave"
-            value={this.props.password}
-            onChangeText={this.onPasswordChange.bind(this)}
-          />
-        </CardSection>
+      <View
+        style={{flex:1,
+          backgroundColor:'#3B618B',
+          alignItems:'center',
+          paddingTop: 55}}>
+
+        <Image source={require('../../img/logo.png')}
+          resizeMode='contain'
+          style={{height:80, marginTop: 20, marginBottom: 20}}
+        />
+        <Text
+          style={{color:'white',fontSize:18, marginBottom: 30}}
+        >
+          PLATAFORMA DE ESTUDIO
+        </Text>
+
+        <TextInput
+          placeholder="email@gmail.com"
+          value={this.props.email}
+          onChangeText={this.onEmailChange.bind(this)}
+          style={styles.inputStyle}
+        />
+
+        <TextInput
+          secureTextEntry
+          placeholder="contraseña"
+          value={this.props.password}
+          onChangeText={this.onPasswordChange.bind(this)}
+          style={styles.inputStyle}
+        />
+
+        <TouchableOpacity style={{alignSelf: 'stretch'}}>
+          <Text style={styles.forgotStyle}>
+            Olvido su contraseña?
+          </Text>
+        </TouchableOpacity>
 
         <Text style={styles.errorTextStyle}>
           {this.props.error}
         </Text>
 
-        <CardSection>
-          {this.renderButton()}
-        </CardSection>
-        <CardSection>
-          <Button onPress={this.onRegisterPress.bind(this)}>
-            Registrarse
-          </Button>
-        </CardSection>
-      </Card>
+        {this.renderButton()}
 
+        <Button onPress={this.onRegisterPress.bind(this)}>
+          Registrarse
+        </Button>
+      </View>
     );
   }
 }
@@ -78,7 +91,30 @@ const styles = {
     fontSize: 20,
     alignSelf: 'center',
     color: 'red'
+  },
+  inputStyle: {
+    alignSelf: 'stretch',
+    color:'#1E3146',
+    backgroundColor:'#D8DFE8',
+    fontSize: 14,
+    height: 35,
+    borderRadius: 8,
+    paddingTop: 10,
+    paddingLeft: 10,
+    paddingBottom: 10,
+    marginBottom: 10,
+    marginLeft: 20,
+    marginRight: 20,
+    textDecorationLine: 'none'
+  },
+  forgotStyle: {
+    color:'#F1F2F2',
+    textAlign:'right',
+    marginRight: 20,
+    marginBottom: 15,
+    fontSize: 12
   }
+
 }
 
 const mapStateToProps = ({ auth }) => {