Commit 0e7f134f authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Fix pizza module styling on iOS

parent e879e307
...@@ -54,10 +54,14 @@ class Pizza extends Component { ...@@ -54,10 +54,14 @@ class Pizza extends Component {
<View style={styles.section}> <View style={styles.section}>
<Text style={styles.header}>Current order</Text> <Text style={styles.header}>Current order</Text>
<View style={styles.card}> <View style={styles.card}>
<Text <View
style={[styles.orderStatus, order.paid ? styles.paidStatus : styles.notPaidStatus]} style={[styles.orderStatus, order.paid ? styles.paidStatus : styles.notPaidStatus]}
>The order has {order.paid || 'not yet '}been paid for.</Text> >
<View style={styles.pizzaContainer}> <Text style={styles.orderStatusText}>
The order has {order.paid || 'not yet '}been paid for.
</Text>
</View>
<View style={[styles.pizzaContainer, styles.orderedPizzaContainer]}>
<View style={styles.pizzaInfo}> <View style={styles.pizzaInfo}>
<Text style={styles.pizzaName}>{productInfo.name}</Text> <Text style={styles.pizzaName}>{productInfo.name}</Text>
<Text style={styles.pizzaDescription}>{productInfo.description}</Text> <Text style={styles.pizzaDescription}>{productInfo.description}</Text>
...@@ -88,7 +92,7 @@ class Pizza extends Component { ...@@ -88,7 +92,7 @@ class Pizza extends Component {
{hasOrder && ( {hasOrder && (
<Text style={styles.header}>Changing your order</Text> <Text style={styles.header}>Changing your order</Text>
)} )}
<View style={styles.card}> <View style={[styles.card, styles.pizzaList]}>
{pizzaList.map(pizza => ( {pizzaList.map(pizza => (
<View <View
key={pizza.pk} key={pizza.pk}
......
...@@ -4,6 +4,7 @@ const styles = create({ ...@@ -4,6 +4,7 @@ const styles = create({
content: { content: {
flex: 1, flex: 1,
padding: 8, padding: 8,
backgroundColor: colors.background,
}, },
eventInfo: { eventInfo: {
padding: 8, padding: 8,
...@@ -21,7 +22,13 @@ const styles = create({ ...@@ -21,7 +22,13 @@ const styles = create({
marginBottom: 8, marginBottom: 8,
}, },
subtitle: { subtitle: {
fontFamily: 'sans-serif-medium', android: {
fontFamily: 'sans-serif-medium',
},
ios: {
fontFamily: 'System',
fontWeight: '600',
},
color: colors.textColour, color: colors.textColour,
fontSize: 14, fontSize: 14,
}, },
...@@ -30,9 +37,17 @@ const styles = create({ ...@@ -30,9 +37,17 @@ const styles = create({
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
elevation: 2, elevation: 2,
borderRadius: 2,
padding: 8, padding: 8,
height: 100, height: 100,
android: {
borderRadius: 2,
},
ios: {
borderRadius: 4,
borderColor: colors.lightGray,
borderStyle: 'solid',
borderWidth: 0.5,
},
}, },
overviewText: { overviewText: {
android: { android: {
...@@ -47,9 +62,11 @@ const styles = create({ ...@@ -47,9 +62,11 @@ const styles = create({
}, },
greenBackground: { greenBackground: {
backgroundColor: colors.lightGreen, backgroundColor: colors.lightGreen,
borderColor: colors.darkGreen,
}, },
redBackground: { redBackground: {
backgroundColor: colors.lightRed, backgroundColor: colors.lightRed,
borderColor: colors.darkRed,
}, },
section: { section: {
marginTop: 8, marginTop: 8,
...@@ -71,10 +88,18 @@ const styles = create({ ...@@ -71,10 +88,18 @@ const styles = create({
}, },
card: { card: {
backgroundColor: colors.white, backgroundColor: colors.white,
borderRadius: 2,
elevation: 2, elevation: 2,
android: {
borderRadius: 2,
},
ios: {
borderRadius: 4,
borderColor: colors.lightGray,
borderStyle: 'solid',
borderWidth: 0.5,
},
}, },
orderStatus: { orderStatusText: {
android: { android: {
fontFamily: 'sans-serif-medium', fontFamily: 'sans-serif-medium',
}, },
...@@ -84,10 +109,18 @@ const styles = create({ ...@@ -84,10 +109,18 @@ const styles = create({
}, },
color: colors.white, color: colors.white,
fontSize: 14, fontSize: 14,
},
orderStatus: {
android: {
borderTopRightRadius: 2,
borderTopLeftRadius: 2,
},
ios: {
borderTopRightRadius: 4,
borderTopLeftRadius: 4,
},
padding: 16, padding: 16,
borderBottomWidth: 1, borderBottomWidth: 1,
borderTopRightRadius: 2,
borderTopLeftRadius: 2,
}, },
paidStatus: { paidStatus: {
backgroundColor: colors.lightGreen, backgroundColor: colors.lightGreen,
...@@ -105,8 +138,18 @@ const styles = create({ ...@@ -105,8 +138,18 @@ const styles = create({
paddingRight: 16, paddingRight: 16,
paddingTop: 8, paddingTop: 8,
paddingBottom: 8, paddingBottom: 8,
borderBottomWidth: 1, android: {
borderBottomColor: colors.dividerGrey, borderBottomWidth: 1,
borderBottomColor: colors.dividerGrey,
},
},
orderedPizzaContainer: {
paddingTop: 16,
paddingBottom: 16,
},
pizzaList: {
paddingTop: 8,
paddingBottom: 8,
}, },
pizzaInfo: { pizzaInfo: {
flex: 1, flex: 1,
......
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