added ui customization

dalvira · Aug 9, 2018 · daea537 · daea537
1 parent 452be28
commit daea537
Show file tree

Hide file tree

Showing 9 changed files with 762 additions and 649 deletions.
diff --git a/App.js b/App.js
@@ -22,6 +22,6 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#F5FCFF'
+    backgroundColor: 'white'
   }
 });
diff --git a/actions/types.js b/actions/types.js
diff --git a/components/BillTotal.js b/components/BillTotal.js
@@ -31,17 +31,28 @@ BillTotal.propTypes = {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'purple'
+    backgroundColor: '#65CB92'
   },
   billTotalLabelContainer: {
-    backgroundColor: 'pink'
+    marginTop: 30,
+    alignItems: 'center',
+    backgroundColor: '#65CB92'
+  },
+  billTotalLabel: {
+    fontSize: 20,
+    color: 'white'
+  },
+  billTotalInputContainer: {
+    backgroundColor: '#5AB181',
+    marginLeft: 60,
+    marginRight: 60
   },
-  billTotalLabel: {},
-  billTotalInputContainer: {},
   billTotalInput: {
-    height: 40,
+    height: 60,
     borderColor: 'gray',
-    borderWidth: 1
+    borderWidth: 1,
+    fontSize: 45,
+    textAlign: 'center'
   }
 });
 

diff --git a/components/Calculation.js b/components/Calculation.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View, Button } from 'react-native';
+import PropTypes from 'prop-types';
 
 const Calculation = ({
   calculateTip,
@@ -14,29 +15,49 @@ const Calculation = ({
   return (
     <View style={styles.container}>
       <View style={styles.tipContainer}>
-        <Text style={styles.tip}>{calculation}</Text>
+        <Text style={styles.tip}>${calculation}</Text>
         <Text style={styles.perTipper}>per Tipper</Text>
       </View>
       <View style={styles.calculateButtonContainer}>
-        <Button onPress={this.handleCalculation} title="Calculate" />
+        <Button
+          style={styles.calculateButton}
+          onPress={this.handleCalculation}
+          title="Calculate"
+          color="white"
+        />
       </View>
     </View>
   );
 };
 
+Calculation.proptypes = {
+  calculateTip: PropTypes.func.isRequired,
+  percentage: PropTypes.number.isRequired,
+  billTotal: PropTypes.number.isRequired,
+  numOfTippers: PropTypes.number.isRequired,
+  calculation: PropTypes.number.isRequired
+};
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'magenta'
+    backgroundColor: '#65CB92'
   },
   tipContainer: {
-    flex: 2
+    flex: 2,
+    alignItems: 'center'
+  },
+  tip: {
+    fontSize: 45,
+    color: 'white'
+  },
+  perTipper: {
+    fontSize: 20,
+    color: 'white'
   },
-  tip: {},
-  perTipper: {},
   calculateButtonContainer: {
     flex: 1,
-    backgroundColor: 'orange'
+    backgroundColor: '#5AB181'
   }
 });
 

diff --git a/components/Home.js b/components/Home.js
@@ -15,7 +15,7 @@ class Home extends React.Component {
     return (
       <View style={styles.container}>
         <View style={styles.header}>
-          <Text>Star Tipper</Text>
+          <Text style={styles.title}>Star Tipper</Text>
         </View>
         <View style={styles.body}>
           <View style={styles.starRatingContainer}>
@@ -41,18 +41,23 @@ const styles = StyleSheet.create({
     flex: 1,
     alignSelf: 'stretch',
     justifyContent: 'center',
-    alignItems: 'stretch'
+    alignItems: 'stretch',
+    backgroundColor: '#65CB92'
   },
   header: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'red'
+    backgroundColor: '#65CB92'
+  },
+  title: {
+    fontSize: 45,
+    color: 'white',
+    fontFamily: 'Bodoni 72'
   },
-  title: {},
   body: {
     flex: 6,
-    backgroundColor: 'blue'
+    backgroundColor: 'white'
   },
   starRatingContainer: {
     flex: 0.25
@@ -63,6 +68,7 @@ const styles = StyleSheet.create({
   numOfTippersContainer: {
     flex: 0.25
   },
+  footer: {},
   calculationContainer: {
     flex: 0.25
   }

diff --git a/components/StarRating.js b/components/StarRating.js
@@ -35,7 +35,7 @@ StarRating.propTypes = {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'orange'
+    backgroundColor: '#65CB92'
   },
   starButtonsContainer: {
     flex: 2,
@@ -44,9 +44,13 @@ const styles = StyleSheet.create({
   },
   percentageContainer: {
     flex: 1,
-    backgroundColor: 'green'
+    backgroundColor: '#65CB92',
+    alignItems: 'center'
   },
-  percentage: {}
+  percentage: {
+    fontSize: 45,
+    color: 'white'
+  }
 });
 
 export default StarRating;
diff --git a/components/TippersSelection.js b/components/TippersSelection.js
@@ -18,20 +18,20 @@ const TippersSelection = ({
           <Icon.Button
             name="arrow-left"
             size={40}
-            backgroundColor="red"
-            underlayColor="blue"
+            backgroundColor="#65CB92"
+            underlayColor="white"
             onPress={decrementTippers}
           />
         </View>
         <View style={styles.numOfTippersContainer}>
-          <Text>{numOfTippers}</Text>
+          <Text style={styles.numOfTippers}>{numOfTippers}</Text>
         </View>
         <View style={styles.numOfTippersMoreContainer}>
           <Icon.Button
             name="arrow-right"
             size={40}
-            backgroundColor="red"
-            underlayColor="blue"
+            backgroundColor="#65CB92"
+            underlayColor="white"
             onPress={incrementTippers}
           />
         </View>
@@ -49,19 +49,27 @@ TippersSelection.propTypes = {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'teal'
+    backgroundColor: '#65CB92'
   },
   numOfTippersLabelContainer: {
-    backgroundColor: 'skyblue'
+    alignItems: 'center',
+    backgroundColor: '#65CB92'
+  },
+  numOfTippersLabel: {
+    fontSize: 20,
+    color: 'white'
   },
-  numOfTippersLabel: {},
   numOfTippersSelectContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center'
   },
   numOfTippersSelect: {},
-  numOfTippersContainer: {}
+  numOfTippersContainer: {},
+  numOfTippers: {
+    fontSize: 45,
+    color: 'white'
+  }
 });
 
 export default TippersSelection;
diff --git a/containers/CalculationContainer.js b/containers/CalculationContainer.js
@@ -10,9 +10,6 @@ class CalculationContainer extends React.Component {
   }
 
   render() {
-    console.log(this.props.percentage);
-    console.log(this.props.billTotal);
-    console.log(this.props.numOfTippers);
     return (
       <View style={styles.container}>
         <Calculation
@@ -37,7 +34,7 @@ const mapStateToProps = state => ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'teal'
+    backgroundColor: 'white'
   }
 });