Product details styling (#64)

* Product details styling + cleanup * Removed headerShown * Changed to displayDollarValue
calblueprint · Apr 3, 2020 · 836d077 · 836d077
1 parent 7bda03f
commit 836d077
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 80 deletions.
diff --git a/components/product/ProductInfo.js b/components/product/ProductInfo.js
@@ -1,10 +1,8 @@
 import React from 'react';
+import { displayDollarValue } from '../../lib/common';
+import { ProductInfoContainer } from '../../styled/product';
+import { SpaceBetweenRowContainer } from '../../styled/shared';
 import { Body, Caption, Title } from '../BaseComponents';
-import {
-  ProductInfoContainer,
-  ProductInfoCaptionContainer,
-  ProductNoticeContainer,
-} from '../../styled/product';
 
 /**
  * @prop
@@ -15,16 +13,14 @@ function ProductInfo({ product }) {
   return (
     <ProductInfoContainer>
       <Title>{name}</Title>
-      <ProductInfoCaptionContainer>
-        <Caption>${customerCost.toFixed(2)} each</Caption>
-        <Caption>Points Earned: {points}</Caption>
-      </ProductInfoCaptionContainer>
-      <ProductNoticeContainer>
-        <Body>
-          Note: Not all products listed are available at every store. Please
-          call individual stores to ask which products are available.
-        </Body>
-      </ProductNoticeContainer>
+      <SpaceBetweenRowContainer style={{ marginTop: 8, paddingBottom: 16 }}>
+        <Caption>{displayDollarValue(customerCost)} each</Caption>
+        <Caption>{`Points Earned: ${points}`}</Caption>
+      </SpaceBetweenRowContainer>
+      <Body>
+        Note: Not all products listed are available at every store. Please call
+        individual stores to ask which products are available.
+      </Body>
     </ProductInfoContainer>
   );
 }

diff --git a/screens/map/ProductDetailsScreen.js b/screens/map/ProductDetailsScreen.js
@@ -1,10 +1,15 @@
+import { FontAwesome5 } from '@expo/vector-icons';
 import React from 'react';
-import { Image } from 'react-native';
+import { Image, View } from 'react-native';
+import {
+  NavButton,
+  NavHeaderContainer,
+  NavTitle,
+} from '../../components/BaseComponents';
 import ProductInfo from '../../components/product/ProductInfo';
-import { ProductInfoImageContainer } from '../../styled/product';
-import { RowContainer } from '../../styled/shared';
+import { SpaceBetweenRowContainer } from '../../styled/shared';
 
-class ProductDetailsScreen extends React.Component {
+export default class ProductDetailsScreen extends React.Component {
   constructor(props) {
     super(props);
     this.state = {};
@@ -13,17 +18,25 @@ class ProductDetailsScreen extends React.Component {
   render() {
     const { currentProduct, store } = this.props.navigation.state.params;
     return (
-      <RowContainer>
-        <ProductInfo product={currentProduct} />
-        <ProductInfoImageContainer>
+      <View>
+        <NavHeaderContainer withMargin backgroundColor="rgba(0,0,0,0)" noShadow>
+          <NavButton onPress={() => this.props.navigation.goBack()}>
+            <FontAwesome5 name="times" solid size={24} />
+          </NavButton>
+          <NavTitle />
+        </NavHeaderContainer>
+        <SpaceBetweenRowContainer
+          style={{
+            marginLeft: 20,
+            marginRight: 8,
+          }}>
+          <ProductInfo style={{ flexShrink: 2 }} product={currentProduct} />
           <Image
             source={{ uri: currentProduct.image }}
-            style={{ width: 80, height: 80, borderRadius: 80 / 2 }}
+            style={{ width: 80, height: 80 }}
           />
-        </ProductInfoImageContainer>
-      </RowContainer>
+        </SpaceBetweenRowContainer>
+      </View>
     );
   }
 }
-
-export default ProductDetailsScreen;
diff --git a/screens/rewards/RewardsScreen.js b/screens/rewards/RewardsScreen.js
@@ -1,6 +1,6 @@
 import { FontAwesome5 } from '@expo/vector-icons';
 import React from 'react';
-import { AsyncStorage, Dimensions } from 'react-native';
+import { AsyncStorage, Dimensions, View } from 'react-native';
 import { TabBar, TabView } from 'react-native-tab-view';
 import {
   BigTitle,
@@ -11,7 +11,7 @@ import PointsHistory from '../../components/rewards/PointsHistory';
 import RewardsHome from '../../components/rewards/RewardsHome';
 import Colors from '../../constants/Colors';
 import { getCustomerTransactions, getUser } from '../../lib/rewardsUtils';
-import { Container, styles } from '../../styled/rewards';
+import { styles } from '../../styled/rewards';
 
 const routes = [
   { key: 'home', title: 'My Rewards' },
@@ -146,7 +146,7 @@ export default class RewardsScreen extends React.Component {
 
   render() {
     return (
-      <Container>
+      <View style={{ flex: 1 }}>
         <NavHeaderContainer vertical backgroundColor={Colors.primaryGreen}>
           <NavButton onPress={() => this.props.navigation.goBack()}>
             <FontAwesome5 name="arrow-down" solid size={24} color="white" />
@@ -171,7 +171,7 @@ export default class RewardsScreen extends React.Component {
           }}
           style={styles.tabView}
         />
-      </Container>
+      </View>
     );
   }
 }
diff --git a/styled/product.js b/styled/product.js
@@ -1,4 +1,3 @@
-import { StyleSheet } from 'react-native';
 import styled from 'styled-components/native';
 
 export const ProductListContainer = styled.View`
@@ -9,36 +8,9 @@ export const ProductListContainer = styled.View`
   padding: 0 20%;
 `;
 
-export const ProductCardContainer = styled.View`
-  margin-right: 10px;
-`;
-
 export const ProductInfoContainer = styled.View`
-  width: 80%;
-  margin-top: 80px;
-  margin-left: 16px;
-`;
-
-export const ProductInfoCaptionContainer = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  width: 80%;
-`;
-
-export const ProductInfoImageContainer = styled.View`
-  margin-top: 80px;
-`;
-
-export const ProductNoticeContainer = styled.View`
-  margin-top: 2%;
+  display: flex;
+  flex-direction: column;
+  margin-right: 8px;
+  flex: auto;
 `;
-
-// TODO @tommypoa re-work styles used in ProductDetailedScreen
-export const styles = StyleSheet.create({
-  horizontalScroll: {
-    paddingTop: 5,
-    paddingLeft: 9,
-    paddingBottom: 13,
-    alignItems: 'center',
-  },
-});
diff --git a/styled/resources.js b/styled/resources.js
@@ -31,18 +31,6 @@ export const CategoryCard = styled.View`
   flex: 1;
 `;
 
-export const CategoryIcon = styled.View`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  width: 40px;
-  padding: 8px
-  border-radius: 20px;
-  background-color: ${Colors.lighterGreen};
-  
-`;
-
 export const CategoryHeadingContainer = styled.View`
   flex-direction: row;
   padding-left: 12px;

diff --git a/styled/rewards.js b/styled/rewards.js
@@ -2,11 +2,6 @@ import { StyleSheet } from 'react-native';
 import styled from 'styled-components/native';
 import Colors from '../constants/Colors';
 
-export const Container = styled.View`
-  flex: 1;
-  background-color: #fff;
-`;
-
 export const RewardsCardContainer = styled.View`
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
   border-radius: 9px;