Fix pizza module styling on iOS

app/components/Pizza.js

@@ -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}

app/components/style/pizza.js

@@ -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,