Skip to content

GitLab

Commit f13c1238 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg Committed by Gijs Hendriksen
Browse files

Refactor events admin screen buttons

parent 4de28870
Hide whitespace changes
Inline Side-by-side
__tests__/ui/components/button/__snapshots__/Button.spec.js.snap
View file @ f13c1238
......@@ -28,6 +28,7 @@ exports[`Button component renders correctly 1`] = `
"paddingLeft": 12,
"paddingRight": 12,
},
Object {},
Object {
"backgroundColor": "#E62272",
},
......@@ -84,6 +85,7 @@ exports[`Button component renders disabled correctly 1`] = `
"paddingLeft": 12,
"paddingRight": 12,
},
Object {},
Object {
"backgroundColor": "#E62272",
},
......@@ -137,6 +139,7 @@ exports[`Button component renders title correctly on Android 1`] = `
"paddingLeft": 12,
"paddingRight": 12,
},
Object {},
Object {
"backgroundColor": "#E62272",
},
......
app/ui/components/button/Button.js
View file @ f13c1238
......@@ -21,7 +21,7 @@ const Button = (props) => {
underlayColor={props.underlayColor}
>
<View
style={[styles.container, { backgroundColor: props.color }]}
style={[styles.container, props.containerStyle, { backgroundColor: props.color }]}
>
<Text style={[styles.text, props.textStyle]}>
{title}
......@@ -36,6 +36,7 @@ Button.propTypes = {
color: PropTypes.string,
disabled: PropTypes.bool,
onPress: PropTypes.func.isRequired,
containerStyle: Text.propTypes.style,
// eslint-disable-next-line react/no-typos
textStyle: Text.propTypes.style,
title: PropTypes.string.isRequired,
......@@ -45,6 +46,7 @@ Button.propTypes = {
Button.defaultProps = {
color: Colors.magenta,
disabled: false,
containerStyle: {},
textStyle: {},
underlayColor: Colors.white,
};
......
app/ui/components/errorScreen/style/ErrorScreen.js
View file @ f13c1238
......@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
fontWeight: '500',
},
fontSize: 16,
color: Colors.gray,
color: Colors.grey,
textAlign: 'center',
},
});
......
app/ui/screens/events/EventAdminScreen.js
View file @ f13c1238
......@@ -14,6 +14,7 @@ import StandardHeader from '../../components/standardHeader/StandardHeader';
import LoadingScreen from '../../components/loadingScreen/LoadingScreen';
import ErrorScreen from '../../components/errorScreen/ErrorScreen';
import SearchHeader from '../../components/searchHeader/SearchHeaderContainer';
import Button from '../../components/button/Button';
const PAYMENT_TYPES = {
NONE: 'no_payment',
......@@ -157,43 +158,35 @@ class EventAdminScreen extends Component {
value={present}
onValueChange={value => this.updateValue(item, value, payment)}
onTintColor={Colors.magenta}
thumbTintColor={present ? Colors.darkMagenta : Colors.gray}
thumbTintColor={present ? Colors.darkMagenta : Colors.grey}
/>
</View>
<View style={styles.paymentContainer}>
<TouchableHighlight
<Button
key={`${item}_${PAYMENT_TYPES.NONE}`}
onPress={() => this.updateValue(item, present, PAYMENT_TYPES.NONE)}
style={styles.button}
>
<View style={[styles.card, payment === PAYMENT_TYPES.NONE && styles.selected]}>
<Text style={[styles.text, styles.buttonText]}>
{t('NOT PAID')}
</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
title={t('NOT PAID')}
color={payment === PAYMENT_TYPES.NONE ? Colors.magenta : Colors.grey}
textStyle={styles.buttonText}
containerStyle={styles.buttonTextContainer}
/>
<Button
key={`${item}_${PAYMENT_TYPES.CASH}`}
onPress={() => this.updateValue(item, present, PAYMENT_TYPES.CASH)}
style={styles.button}
>
<View style={[styles.card, payment === PAYMENT_TYPES.CASH && styles.selected]}>
<Text style={[styles.text, styles.buttonText]}>
{t('CASH')}
</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
title={t('CASH')}
style={styles.buttonMargin}
color={payment === PAYMENT_TYPES.CASH ? Colors.magenta : Colors.grey}
textStyle={styles.buttonText}
containerStyle={styles.buttonTextContainer}
/>
<Button
key={`${item}_${PAYMENT_TYPES.CARD}`}
onPress={() => this.updateValue(item, present, PAYMENT_TYPES.CARD)}
style={styles.button}
>
<View style={[styles.card, payment === PAYMENT_TYPES.CARD && styles.selected]}>
<Text style={[styles.text, styles.buttonText]}>
{t('CARD')}
</Text>
</View>
</TouchableHighlight>
title={t('CARD')}
color={payment === PAYMENT_TYPES.CARD ? Colors.magenta : Colors.grey}
textStyle={styles.buttonText}
containerStyle={styles.buttonTextContainer}
/>
</View>
</View>
</View>
......
app/ui/screens/events/style/CalendarItem.js
View file @ f13c1238
......@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
card: {
padding: 16,
borderRadius: 2,
backgroundColor: Colors.gray,
backgroundColor: Colors.grey,
},
registered: {
backgroundColor: Colors.magenta,
......
app/ui/screens/events/style/EventAdminScreen.js
View file @ f13c1238
......@@ -46,29 +46,21 @@ const styles = StyleSheet.create({
paymentContainer: {
flex: 1,
},
button: {
flex: 1,
margin: 2,
borderRadius: 2,
overflow: 'hidden',
android: {
elevation: 2,
},
ios: {
borderColor: Colors.lightGray,
borderStyle: 'solid',
borderWidth: 0.5,
},
},
card: {
padding: 8,
backgroundColor: Colors.gray,
alignItems: 'center',
},
buttonText: {
color: Colors.white,
fontSize: 12,
},
buttonTextContainer: {
padding: 8,
ios: {
paddingLeft: 10,
paddingRight: 10,
},
},
buttonMargin: {
marginTop: 4,
marginBottom: 4,
},
selected: {
backgroundColor: Colors.magenta,
},
......@@ -78,7 +70,7 @@ const styles = StyleSheet.create({
right: 16,
borderRadius: 28,
overflow: 'hidden',
backgroundColor: Colors.gray,
backgroundColor: Colors.grey,
android: {
elevation: 4,
},
......
app/ui/screens/pizza/style/PizzaScreen.js
View file @ f13c1238
......@@ -161,7 +161,7 @@ const styles = StyleSheet.create({
fontFamily: 'System',
fontWeight: '300',
},
color: Colors.gray,
color: Colors.grey,
fontSize: 14,
marginTop: 2,
marginBottom: 2,
......
app/ui/screens/profile/style/Profile.js
View file @ f13c1238
......@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
data: {
fontSize: 14,
lineHeight: 24,
color: Colors.gray,
color: Colors.grey,
android: {
fontFamily: 'sans-serif-medium',
},
......
app/ui/screens/settings/NotificationsSection.js
View file @ f13c1238
......@@ -75,7 +75,7 @@ class NotificationsSection extends Component {
onValueChange={value => this.updateField(category.key, value)}
onTintColor={Colors.magenta}
thumbTintColor={this.state[category.key]
? Colors.darkMagenta : Colors.gray}
? Colors.darkMagenta : Colors.grey}
disabled={category.key === GENERAL_KEY}
style={styles.settingsSwitch}
/>
......
app/ui/screens/settings/style/NotificationsSection.js
View file @ f13c1238
......@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
},
},
description: {
color: Colors.gray,
color: Colors.grey,
android: {
fontFamily: 'sans-serif-medium',
},
......
app/ui/screens/welcome/style/EventDetailCard.js
View file @ f13c1238
......@@ -106,7 +106,7 @@ const styles = StyleSheet.create({
backgroundColor: Colors.magenta,
},
unregistered: {
backgroundColor: Colors.gray,
backgroundColor: Colors.grey,
},
});
......
app/ui/style/Colors.js
View file @ f13c1238
......@@ -6,7 +6,7 @@ export default {
background: '#FAFAFA',
black: '#000000',
lightGray: '#BBBBBB',
gray: '#616161',
grey: '#616161',
textColour: '#313131',
darkGrey: '#373737',
dividerGrey: 'rgba(0, 0, 0, 0.12)',
......
Markdown is supported
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