Verified Commit 1eb76283 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Change button styling in Event and Registration screens

parent dfac65c5
import React from 'react';
import {
Platform, Text, TouchableHighlight, View,
ViewPropTypes,
} from 'react-native';
import PropTypes from 'prop-types';
import styles from './style/button';
import { colors } from '../style';
const Button = (props) => {
const touchableStyles = [props.style, styles.touchable];
if (props.disabled) {
touchableStyles.push(styles.disabled);
}
const title = Platform.OS === 'ios' ? props.title : props.title.toUpperCase();
return (
<TouchableHighlight
disabled={props.disabled}
onPress={props.disabled ? null : props.onPress}
style={touchableStyles}
underlayColor={props.underlayColor}
>
<View
style={[styles.container, { backgroundColor: props.color }]}
>
<Text style={[styles.text, props.textStyle]}>
{title}
</Text>
</View>
</TouchableHighlight>
);
};
Button.propTypes = {
...ViewPropTypes,
color: PropTypes.string,
disabled: PropTypes.bool,
onPress: PropTypes.func.isRequired,
// eslint-disable-next-line react/no-typos
textStyle: ViewPropTypes.style,
title: PropTypes.string.isRequired,
underlayColor: PropTypes.string,
};
Button.defaultProps = {
color: colors.magenta,
disabled: false,
textStyle: {},
underlayColor: colors.white,
};
export default Button;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FlatList, Alert, Image, ScrollView, Text, View, RefreshControl, Button, TouchableHighlight, Platform, Linking } from 'react-native';
import { FlatList, Alert, Image, ScrollView, Text, View, RefreshControl, TouchableHighlight, Platform, Linking } from 'react-native';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import Moment from 'moment';
......@@ -14,6 +14,7 @@ import { colors } from '../style';
import * as eventActions from '../actions/event';
import * as registrationActions from '../actions/registration';
import * as pizzaActions from '../actions/pizza';
import Button from './Button';
class Event extends Component {
cancelPrompt = (pk) => {
......@@ -208,13 +209,11 @@ class Event extends Component {
return (
<View style={styles.registrationActions}>
<Button
color={colors.magenta}
title={this.props.t('Update registration')}
onPress={() => this.props.fields(event.user_registration.pk)}
/>
<View style={styles.secondButtonMargin}>
<Button
color={colors.magenta}
title={this.props.t('Cancel registration')}
onPress={() => this.cancelPrompt(event.user_registration.pk)}
/>
......@@ -224,7 +223,7 @@ class Event extends Component {
}
return (
<View style={styles.registrationActions}>
<Button color={colors.magenta} title={this.props.t('Cancel registration')} onPress={() => this.cancelPrompt(event.user_registration.pk)} />
<Button title={this.props.t('Cancel registration')} onPress={() => this.cancelPrompt(event.user_registration.pk)} />
</View>
);
}
......
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
View,
TextInput,
Text,
Linking,
Image,
TouchableHighlight,
KeyboardAvoidingView,
Keyboard,
KeyboardAvoidingView,
Linking,
Text,
TextInput,
View,
} from 'react-native';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
......@@ -17,6 +16,8 @@ import { url } from '../url';
import * as actions from '../actions/login';
import DismissKeyboardView from './DismissKeyboardView';
import Button from './Button';
import { colors } from '../style';
const image = require('../img/logo.png');
......@@ -59,12 +60,15 @@ class Login extends Component {
}}
/>
</View>
<TouchableHighlight
style={styles.blackbutton} onPress={() =>
login(this.state.username, this.state.password)}
>
<Text style={styles.loginText}>{t('LOGIN')}</Text>
</TouchableHighlight>
<Button
title={t('LOGIN')}
onPress={() =>
login(this.state.username, this.state.password)}
color={colors.darkGrey}
style={styles.loginButton}
textStyle={styles.loginButtonText}
underlayColor={colors.white}
/>
<Text style={styles.forgotpass} onPress={() => Linking.openURL(`${url}/password_reset/`)}>
{t('Forgot password?')}
</Text>
......
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Text, ScrollView, RefreshControl, TouchableOpacity } from 'react-native';
import { RefreshControl, ScrollView, Text, TouchableHighlight, View } from 'react-native';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import Icon from 'react-native-vector-icons/MaterialIcons';
......@@ -8,7 +8,7 @@ import Moment from 'moment';
import LoadingScreen from './LoadingScreen';
import ErrorScreen from './ErrorScreen';
import { retrievePizzaInfo, cancelOrder, orderPizza } from '../actions/pizza';
import { cancelOrder, orderPizza, retrievePizzaInfo } from '../actions/pizza';
import styles from './style/pizza';
import { colors } from '../style';
......@@ -69,16 +69,17 @@ class Pizza extends Component {
<Text style={styles.pizzaPrice}>{productInfo.price}</Text>
</View>
{(!order.paid && !hasEnded) && (
<TouchableOpacity
<TouchableHighlight
onPress={() => this.props.cancelOrder()}
style={styles.button}
underlayColor={colors.darkMagenta}
>
<Icon
name="delete"
color={colors.white}
size={18}
/>
</TouchableOpacity>
</TouchableHighlight>
)}
</View>
</View>
......@@ -104,19 +105,20 @@ class Pizza extends Component {
<Text style={styles.pizzaDescription}>{pizza.description}</Text>
<Text style={styles.pizzaPrice}>{pizza.price}</Text>
</View>
<TouchableOpacity
<TouchableHighlight
onPress={() => {
this.props.orderPizza(pizza.pk, hasOrder);
this.pizzaScroll.scrollTo({ x: 0, y: 0, animated: true });
}}
style={styles.button}
underlayColor={colors.darkMagenta}
>
<Icon
name="add-shopping-cart"
color={colors.white}
size={18}
/>
</TouchableOpacity>
</TouchableHighlight>
</View>
))}
</View>
......
import React, { Component } from 'react';
import { ActivityIndicator, Modal, View, ScrollView, Switch, TextInput, Text, Button } from 'react-native';
import { ActivityIndicator, Modal, View, ScrollView, Switch, TextInput, Text } from 'react-native';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import PropTypes from 'prop-types';
......@@ -10,6 +10,7 @@ import { colors } from '../style';
import ErrorScreen from './ErrorScreen';
import * as registrationActions from '../actions/registration';
import Button from './Button';
class Registration extends Component {
constructor(props) {
......@@ -31,7 +32,7 @@ class Registration extends Component {
getFieldValidity = (key) => {
const field = this.props.fields[key];
const value = this.state[key];
const value = this.state[key] ? this.state[key] : field.value;
if (field.required) {
if (field.type === 'integer' && (value === '' || value === null || !value.match(/^-?\d+$/))) {
return {
......@@ -131,6 +132,7 @@ class Registration extends Component {
color={colors.magenta}
onPress={() => this.props.update(this.props.registration, this.state)}
disabled={!this.isFormValid()}
style={styles.submitButton}
/>
</View>}
</ScrollView>
......
import { colors, StyleSheet } from '../../style';
const styles = StyleSheet.create({
container: {
android: {
borderRadius: 2,
},
ios: {
borderRadius: 100,
paddingLeft: 12,
paddingRight: 12,
},
padding: 10,
},
disabled: {
android: {
elevation: 0,
},
opacity: 0.8,
},
text: {
android: {
fontFamily: 'sans-serif-medium',
},
color: colors.white,
fontSize: 14,
justifyContent: 'center',
textAlign: 'center',
},
touchable: {
android: {
borderRadius: 2,
elevation: 4,
},
ios: {
borderRadius: 100,
},
},
});
export default styles;
import { colors, StyleSheet } from '../../style';
const styles = StyleSheet.create({
loginText: {
color: colors.white,
fontWeight: 'bold',
},
blackbutton: {
marginTop: 40,
loginButton: {
marginTop: 32,
marginBottom: 16,
paddingTop: 12,
paddingBottom: 12,
paddingLeft: 38,
paddingRight: 38,
borderRadius: 2,
elevation: 2,
width: 120,
alignSelf: 'center',
alignItems: 'center',
backgroundColor: colors.darkGrey,
justifyContent: 'center',
},
loginButtonText: {
fontWeight: 'bold',
},
input: {
height: 48,
......
......@@ -191,10 +191,16 @@ const styles = StyleSheet.create({
},
button: {
backgroundColor: colors.magenta,
padding: 8,
marginLeft: 16,
borderRadius: 2,
elevation: 2,
android: {
padding: 8,
elevation: 2,
borderRadius: 2,
},
ios: {
padding: 12,
borderRadius: 100,
},
},
});
......
import { StyleSheet } from 'react-native';
import { APPBAR_HEIGHT } from './standardHeader';
import { colors } from '../../style';
import { colors, StyleSheet } from '../../style';
const styles = StyleSheet.create({
content: {
......@@ -29,18 +27,35 @@ const styles = StyleSheet.create({
padding: 16,
},
field: {
fontFamily: 'sans-serif-medium',
android: {
fontFamily: 'sans-serif-medium',
},
ios: {
fontFamily: 'System',
fontWeight: '600',
},
fontSize: 14,
color: colors.textColour,
},
invalid: {
fontFamily: 'sans-serif-medium',
android: {
fontFamily: 'sans-serif-medium',
},
ios: {
fontFamily: 'System',
fontWeight: '600',
},
fontSize: 12,
color: colors.lightRed,
marginLeft: 4,
},
buttonView: {
margin: 16,
marginBottom: 32,
},
submitButton: {
paddingTop: 16,
paddingBottom: 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