Commit 210fe70a authored by Wietse Kuipers's avatar Wietse Kuipers
Browse files

Merge branch 'fix/pizza-styling-ios' into 'master'

Fix pizza module styling on iOS

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