Commit b4fe13d3 authored by Wietse Kuipers's avatar Wietse Kuipers
Browse files

Merge branch 'login-styling' into 'master'

Change login screen styling margins, padding, shadows and border-radii

See merge request !49
parents fe98bdb2 78468871
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { View, TextInput, Text, Linking, Image, TouchableOpacity, KeyboardAvoidingView } from 'react-native'; import { View, TextInput, Text, Linking, Image, TouchableHighlight, KeyboardAvoidingView } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import styles from './style/login'; import styles from './style/login';
import { url } from '../url'; import { url } from '../url';
...@@ -41,12 +41,12 @@ class Login extends Component { ...@@ -41,12 +41,12 @@ class Login extends Component {
onSubmitEditing={() => { login(this.state.username, this.state.password); }} onSubmitEditing={() => { login(this.state.username, this.state.password); }}
/> />
</View> </View>
<TouchableOpacity <TouchableHighlight
style={styles.blackbutton} onPress={() => style={styles.blackbutton} onPress={() =>
login(this.state.username, this.state.password)} login(this.state.username, this.state.password)}
> >
<Text style={styles.loginText}>INLOGGEN</Text> <Text style={styles.loginText}>INLOGGEN</Text>
</TouchableOpacity> </TouchableHighlight>
<Text style={styles.forgotpass} onPress={() => Linking.openURL(`${url}/password_reset/`)}> <Text style={styles.forgotpass} onPress={() => Linking.openURL(`${url}/password_reset/`)}>
Wachtwoord vergeten? Wachtwoord vergeten?
</Text> </Text>
......
...@@ -3,35 +3,35 @@ import { StyleSheet } from 'react-native'; ...@@ -3,35 +3,35 @@ import { StyleSheet } from 'react-native';
import { colors } from '../../style'; import { colors } from '../../style';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
loginText: { loginText: {
color: colors.white, color: colors.white,
fontWeight: 'bold', fontWeight: 'bold',
}, },
blackbutton: { blackbutton: {
marginTop: 40, marginTop: 40,
marginBottom: 16,
paddingTop: 12,
paddingBottom: 12,
paddingLeft: 38,
paddingRight: 38,
borderRadius: 2,
elevation: 2,
alignSelf: 'center', alignSelf: 'center',
alignItems: 'center', alignItems: 'center',
marginBottom: 10,
width: 225,
height: 50,
backgroundColor: colors.darkGrey, backgroundColor: colors.darkGrey,
justifyContent: 'center', justifyContent: 'center',
}, },
input: { input: {
height: 48, height: 48,
}, },
forgotpass: { forgotpass: {
alignSelf: 'center', alignSelf: 'center',
color: colors.darkGrey, color: colors.darkGrey,
marginBottom: 10, marginBottom: 10,
fontSize: 20, fontFamily: 'sans-serif-medium',
fontSize: 14,
height: 25, height: 25,
fontWeight: 'bold',
}, },
loginstatus: { loginstatus: {
marginTop: 10, marginTop: 10,
marginBottom: 10, marginBottom: 10,
...@@ -40,17 +40,13 @@ const styles = StyleSheet.create({ ...@@ -40,17 +40,13 @@ const styles = StyleSheet.create({
alignSelf: 'center', alignSelf: 'center',
color: colors.white, color: colors.white,
}, },
logo: { logo: {
marginTop: 137, width: 260,
marginBottom: 54,
height: 108, height: 108,
marginLeft: 34, marginBottom: 48,
marginRight: 34,
resizeMode: 'contain', resizeMode: 'contain',
alignSelf: 'center', alignSelf: 'center',
}, },
wrapper: { wrapper: {
paddingLeft: 16, paddingLeft: 16,
paddingRight: 16, paddingRight: 16,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment