From 759c98e5ee10734ae067c74974e765145c8c3830 Mon Sep 17 00:00:00 2001
From: Bart Akeley <bart.akeley@gmail.com>
Date: Thu, 20 Apr 2017 08:32:57 -0500
Subject: [PATCH] food item detail layout updates

---
 js/components/IconButton.js | 12 ++++----
 js/pages/FoodItemDetail.js  | 61 +++++++++++++++++++------------------
 2 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/js/components/IconButton.js b/js/components/IconButton.js
index 0f5cbaa..2aab839 100644
--- a/js/components/IconButton.js
+++ b/js/components/IconButton.js
@@ -7,10 +7,10 @@ import { Icon } from 'react-native-material-ui';
 type Props = { glyph: string, text: string, route: string, onPress: Function, underlayColor?: string };
 
 export default pure(({ glyph, text, ...others }: Props) => (
-    <TouchableOpacity {...others}>
-        <View style={{ alignItems: 'center' }}>
-            <Icon name={glyph} size={50} color="grey" />
-            <Text>{text}</Text>
-        </View>
-    </TouchableOpacity>
+	<TouchableOpacity {...others}>
+		<View style={{ flexDirection: 'row', marginTop: 5 }}>
+			<Icon name={glyph} size={35} color="grey" style={{ marginRight: 10 }} />
+			<Text style={{ lineHeight: 26 }}>{text}</Text>
+		</View>
+	</TouchableOpacity>
 ));
diff --git a/js/pages/FoodItemDetail.js b/js/pages/FoodItemDetail.js
index fa8e856..213ab7a 100644
--- a/js/pages/FoodItemDetail.js
+++ b/js/pages/FoodItemDetail.js
@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import { Picker, Text, View } from 'react-native';
+import { Picker, View, TouchableHighlight } from 'react-native';
 import theme from '../ui-theme';
 import { NameAndPlace } from '../components/ItemTile';
 import { type FoodItem } from '../records/FoodItemRecord';
@@ -11,11 +11,18 @@ import IconButton from '../components/IconButton';
 import { type Quantity, getQuantityText } from '../helpers/QuantityHelpers';
 import Modal from '../components/Modal';
 import { withFoodItem } from '../enhancers/foodItemEnhancers';
+import { COLOR } from 'react-native-material-ui';
 
-const QuantityText = pure(({ quantity }: { quantity: Quantity }) => (
-	<View style={{ flex: 1, alignItems: 'center', paddingTop: 20 }}>
-		<Text style={{ fontSize: 50, color: 'black', height: 100 }}>{getQuantityText(quantity)}</Text>
-	</View>
+const QuantityText = pure(({ quantity, onPress }: { quantity: Quantity, style: Object }) => (
+	<TouchableHighlight style={{ flex: 1, flexDirection: 'row' }} onPress={onPress} underlayColor="pink">
+		<View style={{ flex: 1 }}>
+			<Picker selectedValue={quantity} onValueChange={this.toggleQuantityModal} style={{ flex: 1 }}>
+				{['none', 'few', 'alot', 'plenty'].map(quantity => (
+					<Picker.Item key={quantity} label={getQuantityText(quantity)} value={quantity} />
+				))}
+			</Picker>
+		</View>
+	</TouchableHighlight>
 ));
 
 export class FoodItemDetail extends Component {
@@ -46,8 +53,8 @@ export class FoodItemDetail extends Component {
 	render() {
 		const { foodItem } = this.props;
 		return (
-			<View style={theme.page.container}>
-				<View style={{ flex: 2 }}>
+			<View style={{ ...theme.page.container, backgroundColor: COLOR.grey300 }}>
+				<View style={{ flex: 3 }}>
 					<ImageBackdrop uri={foodItem.titleImage} />
 					<View style={{ position: 'absolute', bottom: 0, left: 0, flexDirection: 'row' }}>
 						{foodItem.images.map((imageURI, index) => {
@@ -55,31 +62,25 @@ export class FoodItemDetail extends Component {
 						})}
 					</View>
 				</View>
-				<View style={{ flex: 3, paddingTop: 10, paddingLeft: 20, paddingRight: 20 }}>
+				<View style={{ flex: 1, marginBottom: 10, backgroundColor: 'white', paddingLeft: 20 }}>
 					<NameAndPlace name="Whole Foods Market" place="525 N. Lamar Blvd. Austin" />
-					<QuantityText quantity="many" />
-					<View style={{ flexDirection: 'row', paddingBottom: 20 }}>
-						<IconButton style={{ flex: 3 }} glyph="stars" text="Add to Faves" onPress={this.addToFaves} />
-						<IconButton
-							style={{ flex: 3 }}
-							glyph="mode-edit"
-							text="Update Amount"
-							onPress={this.updateAmount}
-						/>
-						<IconButton style={{ flex: 3 }} glyph="insert-photo" text="Add Photo" onPress={this.addPhoto} />
-					</View>
 				</View>
-				<Modal isVisible={this.state.quantityModalOpen}>
-					<Picker
-						selectedValue={foodItem.quantity}
-						onValueChange={this.toggleQuantityModal}
-						style={{ width: 250 }}
-					>
-						{['none', 'few', 'alot', 'plenty'].map(quantity => (
-							<Picker.Item key={quantity} label={getQuantityText(quantity)} value={quantity} />
-						))}
-					</Picker>
-				</Modal>
+				<View
+					style={{
+						flex: 1,
+						backgroundColor: 'white',
+						marginBottom: 10,
+						paddingLeft: 20,
+						paddingRight: 20,
+					}}
+				>
+					<QuantityText quantity="many" onPress={this.toggleQuantityModal} />
+				</View>
+				<View style={{ flex: 2, paddingBottom: 20, paddingTop: 10, backgroundColor: 'white', paddingLeft: 20 }}>
+					<IconButton glyph="stars" text="Add to Faves" onPress={this.addToFaves} />
+					<IconButton glyph="insert-photo" text="Add Photo" onPress={this.addPhoto} />
+				</View>
+				<Modal isVisible={this.state.quantityModalOpen} />
 			</View>
 		);
 	}