Updated icons in tab bar and edited some styles

js/components/TopToolbar.js

@@ -80,8 +80,8 @@ class TopToolbar extends Component {
 		const showSearchClear = filter.search.length > 0;
 
 		const searchPlaceholder = cond([
-			[test(/\/food/), () => 'Search Food...'],
-			[test(/\/places/), () => 'Search Places...'],
+			[test(/\/food/), () => 'Search products...'],
+			[test(/\/places/), () => 'Search places...'],
 			[test(/\/faves/), () => 'Search favorites'],
 		])(route);
 
@@ -100,7 +100,7 @@ class TopToolbar extends Component {
 						<View
 							style={{
 								flexDirection: 'row',
-								padding: 10,
+								padding: 8,
 							}}>
 							<View
 								style={{
@@ -110,7 +110,7 @@ class TopToolbar extends Component {
 									backgroundColor: 'white',
 									borderRadius: 10,
 								}}>
-								<Icon name="search" style={{ marginHorizontal: 10 }} />
+								<Icon name="search" style={{ marginHorizontal: 8 }} />
 								<TextInput
 									value={filter.search}
 									onChangeText={this.onChangeText}
@@ -118,13 +118,14 @@ class TopToolbar extends Component {
 									underlineColorAndroid="transparent"
 									style={{
 										flex: 1,
-										fontSize: 18,
-										padding: 5,
+										fontSize: 16,
+										padding: 4,
+										height: 40,
 									}}
 								/>
 								{showSearchClear ? (
 									<TouchableOpacity onPress={this.onSearchCleared}>
-										<Icon name="close" style={{ margin: 10 }} />
+										<Icon name="close" style={{ margin: 8 }} />
 									</TouchableOpacity>
 								) : (
 									<TouchableOpacity
@@ -136,7 +137,7 @@ class TopToolbar extends Component {
 											paddingVertical: 5,
 											paddingHorizontal: 8,
 										}}>
-										<FAIcon name="filter" style={{ fontSize: 22, color: palette.primaryColor }} />
+										<FAIcon name="filter" style={{ fontSize: 24, color: palette.primaryColor }} />
 									</TouchableOpacity>
 								)}
 							</View>
@@ -150,7 +151,7 @@ class TopToolbar extends Component {
 									alignItems: 'center',
 									justifyContent: 'center',
 								}}>
-								<Icon name={viewMode === 'map' ? 'view-list' : 'map'} size={22} color="white" />
+								<Icon name={viewMode === 'map' ? 'view-list' : 'map'} size={24} color="white" />
 							</TouchableOpacity>
 						</View>
 					)}

js/pages/FoodList.js

@@ -30,7 +30,7 @@ const FoodList = (props: Props) => {
 		<View style={{ flex: 1 }}>
 			{showNoResults && (
 				<FullScreenMessage>
-					<Text style={{ fontSize: 16 }}>No food matched your search.</Text>
+					<Text style={{ fontSize: 16 }}>No products matched your search.</Text>
 					<Text style={{ fontSize: 16 }}>Check your filters and try again</Text>
 				</FullScreenMessage>
 			)}

js/pages/LoginPage.js

@@ -75,6 +75,7 @@ const LoginPageComponent = ({
 					flexDirection: 'column',
 					alignItems: 'center',
 					justifyContent: 'flex-start',
+					backgroundColor: '#fff',
 				}}>
 				{error && (
 					<Text style={{ fontSize: 16, color: '#721c24', backgroundColor: '#f8d7da', padding: 16 }}>
@@ -82,7 +83,7 @@ const LoginPageComponent = ({
 					</Text>
 				)}
 
-				<Text style={{ fontSize: 42, fontWeight: '300', margin: 16 }}>Sign In</Text>
+				<Text style={{ fontSize: 36, fontWeight: '700', marginTop: 32, marginBottom: 16 }}>Sign In</Text>
 
 				<View style={{ flexDirection: 'row', padding: 16, paddingBottom: 0 }}>
 					<View style={{ flex: 1, flexDirection: 'column' }}>

js/pages/Nav.js

@@ -36,8 +36,8 @@ const Nav = (props: Props) => {
 				<BottomNavigation active={activeTab}>
 					<BottomNavigation.Action
 						key="food"
-						icon="local-pizza"
-						label="Food"
+						icon="widgets"
+						label="Products"
 						onPress={setRoute('/list/food')}
 						style={{
 							container: {
@@ -47,7 +47,7 @@ const Nav = (props: Props) => {
 					/>
 					<BottomNavigation.Action
 						key="places"
-						icon="restaurant"
+						icon="store"
 						label="Places"
 						onPress={setRoute('/list/places')}
 						style={{

js/pages/ProfilePage.js

@@ -44,7 +44,7 @@ export const ProfilePage = (props: Props) => {
 	const usingGPS = zipcode === 'usegps';
 	return (
 		<View style={{ flex: 1, flexDirection: 'column' }}>
-			<Text style={{ fontSize: 42, marginBottom: 8, color: '#000', padding: 16 }}>Profile</Text>
+			<Text style={{ fontSize: 36, fontWeight: '700', marginBottom: 8, color: '#000', padding: 16 }}>Profile</Text>
 			<View
 				style={{
 					flexDirection: 'row',

js/ui-theme.js

@@ -115,8 +115,9 @@ export default {
 			margin: 10,
 		},
 		titleStyle: {
-			fontSize: 64,
+			fontSize: 56,
 			margin: 10,
+			fontWeight: 'bold',
 		},
 	},
 	drawer: {