Replace card styling by reusable CardSection in Pizza screen

app/assets/locales/nl/app/ui/screens/pizza/Pizza.json

@@ -5,5 +5,6 @@
   "The order has not yet been paid for.": "Je bestelling is nog niet betaald.",
   "Changing your order": "Bestelling bewerken",
   "Sorry! We couldn't load any data.": "Sorry! We konden geen gegevens laden.",
-  "There is currently no event for which you can order food.": "Er is geen evenement waarvoor je eten kunt bestellen."
+  "There is currently no event for which you can order food.": "Er is geen evenement waarvoor je eten kunt bestellen.",
+  "Current order": "Huidige bestelling"
 }

app/ui/components/cardSection/CardSection.js

@@ -7,9 +7,11 @@ import styles from './style/CardSection';
 
 const CardSection = props => (
   <View style={[styles.section, props.style]}>
-    <Text style={styles.sectionHeader}>
-      {props.sectionHeader}
-    </Text>
+    {props.sectionHeader !== null && (
+      <Text style={styles.sectionHeader}>
+        {props.sectionHeader}
+      </Text>
+    )}
     <View style={[styles.card, props.contentStyle]}>
       {props.children}
     </View>

app/ui/screens/pizza/Pizza.js

@@ -13,6 +13,7 @@ import ErrorScreen from '../../components/errorScreen/ErrorScreen';
 import { retrievePizzaInfo, cancelOrder, orderPizza } from '../../../actions/pizza';
 import styles from './style/Pizza';
 import Colors from '../../style/Colors';
+import CardSection from '../../components/cardSection/CardSection';
 
 class Pizza extends Component {
   getProductFromList = (pk, pizzaList) => {
@@ -26,10 +27,10 @@ class Pizza extends Component {
 
   getEventInfo = (title, subtitle) => (
     <View style={styles.eventInfo}>
-      <Text style={styles.title}>
+      <Text style={styles.eventTitle}>
         {this.props.t('Order pizza for {{title}}', { title })}
       </Text>
-      <Text style={styles.subtitle}>
+      <Text style={styles.eventSubtitle}>
         {subtitle}
       </Text>
     </View>
@@ -40,7 +41,10 @@ class Pizza extends Component {
       const productInfo = this.getProductFromList(order.product, pizzaList);
       return (
         <View
-          style={[styles.overview, order.paid ? styles.greenBackground : styles.redBackground]}
+          style={[
+            styles.overviewContainer,
+            order.paid ? styles.greenBackground : styles.redBackground,
+          ]}
         >
           <Text
             style={styles.overviewText}
@@ -52,7 +56,7 @@ class Pizza extends Component {
       );
     }
     return (
-      <Text style={styles.header}>
+      <Text style={styles.overviewNoOrder}>
         {this.props.t('You did not place an order.')}
       </Text>
     );
@@ -63,96 +67,84 @@ class Pizza extends Component {
       const productInfo = this.getProductFromList(order.product, pizzaList);
 
       return (
-        <View style={styles.section}>
-          <Text style={styles.header}>
-Current order
-          </Text>
-          <View style={styles.card}>
-            <View
-              style={[styles.orderStatus, order.paid ? styles.paidStatus : styles.notPaidStatus]}
-            >
-              <Text style={styles.orderStatusText}>
-                {order.paid && this.props.t('The order has been paid for.')}
-                {!order.paid && this.props.t('The order has 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>
-                <Text style={styles.pizzaPrice}>
-€
-                  {productInfo.price}
-                </Text>
-              </View>
-              {(!order.paid && !hasEnded) && (
-                <TouchableHighlight
-                  onPress={() => this.props.cancelOrder()}
-                  style={styles.button}
-                  underlayColor={Colors.darkMagenta}
-                >
-                  <Icon
-                    name="delete"
-                    color={Colors.white}
-                    size={18}
-                  />
-                </TouchableHighlight>
-              )}
-            </View>
-          </View>
-        </View>
-      );
-    }
-    return null;
-  };
-
-  getPizzaList = (pizzaList, hasOrder) => (
-    <View style={styles.section}>
-      {hasOrder && (
-        <Text style={styles.header}>
-          {this.props.t('Changing your order')}
-        </Text>
-      )}
-      <View style={[styles.card, styles.pizzaList]}>
-        {pizzaList.map(pizza => (
+        <CardSection sectionHeader={this.props.t('Current order')}>
           <View
-            key={pizza.pk}
-            style={styles.pizzaContainer}
+            style={[styles.orderStatus, order.paid ? styles.paidStatus : styles.notPaidStatus]}
           >
+            <Text style={styles.orderStatusText}>
+              {order.paid && this.props.t('The order has been paid for.')}
+              {!order.paid && this.props.t('The order has not yet been paid for.')}
+            </Text>
+          </View>
+          <View style={[styles.pizzaContainer, styles.orderedPizzaContainer]}>
             <View style={styles.pizzaInfo}>
               <Text style={styles.pizzaName}>
-                {pizza.name}
+                {productInfo.name}
               </Text>
               <Text style={styles.pizzaDescription}>
-                {pizza.description}
+                {productInfo.description}
               </Text>
               <Text style={styles.pizzaPrice}>
-€
-                {pizza.price}
+                €
+                {productInfo.price}
               </Text>
             </View>
-            <TouchableHighlight
-              onPress={() => {
-                this.props.orderPizza(pizza.pk, hasOrder);
-                this.pizzaScroll.scrollTo({ x: 0, y: 0, animated: true });
-              }}
-              style={styles.button}
-              underlayColor={Colors.darkMagenta}
-            >
-              <Icon
-                name="add-shopping-cart"
-                color={Colors.white}
-                size={18}
-              />
-            </TouchableHighlight>
+            {(!order.paid && !hasEnded) && (
+              <TouchableHighlight
+                onPress={() => this.props.cancelOrder()}
+                style={styles.button}
+                underlayColor={Colors.darkMagenta}
+              >
+                <Icon
+                  name="delete"
+                  color={Colors.white}
+                  size={18}
+                />
+              </TouchableHighlight>
+            )}
           </View>
-        ))}
-      </View>
-    </View>
+        </CardSection>
+      );
+    }
+    return null;
+  };
+
+  getPizzaList = (pizzaList, hasOrder) => (
+    <CardSection sectionHeader={hasOrder ? this.props.t('Changing your order') : null} contentStyle={styles.pizzaList}>
+      {pizzaList.map((pizza, i) => (
+        <View
+          key={pizza.pk}
+          style={i === 0 ? styles.pizzaContainer : [styles.borderTop, styles.pizzaContainer]}
+        >
+          <View style={styles.pizzaInfo}>
+            <Text style={styles.pizzaName}>
+              {pizza.name}
+            </Text>
+            <Text style={styles.pizzaDescription}>
+              {pizza.description}
+            </Text>
+            <Text style={styles.pizzaPrice}>
+              €
+              {pizza.price}
+            </Text>
+          </View>
+          <TouchableHighlight
+            onPress={() => {
+              this.props.orderPizza(pizza.pk, hasOrder);
+              this.pizzaScroll.scrollTo({ x: 0, y: 0, animated: true });
+            }}
+            style={styles.button}
+            underlayColor={Colors.darkMagenta}
+          >
+            <Icon
+              name="add-shopping-cart"
+              color={Colors.white}
+              size={18}
+            />
+          </TouchableHighlight>
+        </View>
+      ))}
+    </CardSection>
   );
 
   handleRefresh = () => {

app/ui/screens/pizza/style/Pizza.js

@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
   eventInfo: {
     padding: 8,
   },
-  title: {
+  eventTitle: {
     android: {
       fontFamily: 'sans-serif-medium',
     },
@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
     fontSize: 20,
     marginBottom: 8,
   },
-  subtitle: {
+  eventSubtitle: {
     android: {
       fontFamily: 'sans-serif-medium',
     },
@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
     color: Colors.textColour,
     fontSize: 14,
   },
-  overview: {
+  overviewContainer: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
@@ -69,11 +69,7 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.lightRed,
     borderColor: Colors.darkRed,
   },
-  section: {
-    marginTop: 8,
-    marginBottom: 8,
-  },
-  header: {
+  overviewNoOrder: {
     android: {
       fontFamily: 'sans-serif-medium',
     },
@@ -83,23 +79,10 @@ const styles = StyleSheet.create({
     },
     color: Colors.textColour,
     fontSize: 14,
-    paddingLeft: 10,
+    paddingLeft: 8,
     paddingTop: 6,
     paddingBottom: 6,
   },
-  card: {
-    backgroundColor: Colors.white,
-    elevation: 2,
-    android: {
-      borderRadius: 2,
-    },
-    ios: {
-      borderRadius: 4,
-      borderColor: Colors.lightGray,
-      borderStyle: 'solid',
-      borderWidth: 0.5,
-    },
-  },
   orderStatusText: {
     android: {
       fontFamily: 'sans-serif-medium',
@@ -139,10 +122,10 @@ const styles = StyleSheet.create({
     paddingRight: 16,
     paddingTop: 8,
     paddingBottom: 8,
-    android: {
-      borderBottomWidth: 1,
-      borderBottomColor: Colors.dividerGrey,
-    },
+  },
+  borderTop: {
+    borderTopWidth: 1,
+    borderTopColor: Colors.dividerGrey,
   },
   orderedPizzaContainer: {
     paddingTop: 16,