Skip to content
GitLab
Commit b363f36f authored by Gijs Hendriksen's avatar Gijs Hendriksen
Browse files

Merge branch 'tc/refactor-admin-screen' into 'master' 

Refactor events admin screen buttons

See merge request !228
parents 4de28870 f13c1238
Hide whitespace changes
Inline Side-by-side
__tests__/ui/components/button/__snapshots__/Button.spec.js.snap
View file @ b363f36f
......@@ -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 @ b363f36f
......@@ -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 @ b363f36f
......@@ -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 @ b363f36f
......@@ -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 @ b363f36f
......@@ -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 @ b363f36f
......@@ -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 @ b363f36f
......@@ -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 @ b363f36f
......@@ -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 @ b363f36f
......@@ -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 @ b363f36f
......@@ -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 @ b363f36f
......@@ -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 @ b363f36f
......@@ -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)',
......
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