added fourth button for charges in footer

Author: janithl

src/components/Footer.tsx

@@ -11,19 +11,23 @@ import colours from '@res/colours';
 export const FooterButton = ({
   title,
   value,
+  short = true,
   onPress,
 }: FooterButtonProps): JSX.Element => (
   <TouchableOpacity style={styles.footerButton} onPress={onPress}>
     <Text colour={colours.white}>{title}</Text>
-    <Text colour={colours.white} H4>
-      {value}
-    </Text>
+    <View style={styles.footerValue}>
+      <Text colour={colours.white} H3={short} H5={!short}>
+        {value}
+      </Text>
+    </View>
   </TouchableOpacity>
 );
 
 type FooterButtonProps = {
   title: string;
   value: string;
+  short: boolean;
   onPress?: () => void;
 };
 
@@ -38,6 +42,7 @@ export default ({
       <FooterButton
         title="Division"
         value={DivisionList[division]}
+        short={false}
         onPress={() => dispatch({ type: Actions.INCREMENT_DIVISION })}
       />
       <FooterButton
@@ -55,6 +60,11 @@ export default ({
           })
         }
       />
+      <FooterButton
+        title="Charges"
+        value="5"
+        onPress={() => dispatch({ type: Actions.INCREMENT_PROPORTION })}
+      />
     </Row>
   </View>
 );
@@ -69,12 +79,15 @@ type OwnProps = {
 const styles = StyleSheet.create({
   footer: {
     alignSelf: 'stretch',
-    height: Platform.OS === 'android' ? 70 : 100,
+    height: Platform.OS === 'android' ? 50 : 80,
     backgroundColor: colours.primaryBlue,
   },
   footerButton: {
-    paddingHorizontal: 5,
-    paddingVertical: 20,
+    padding: 10,
     alignItems: 'center',
   },
+  footerValue: {
+    height: 30,
+    justifyContent: 'center',
+  },
 });

src/components/Text.tsx

@@ -7,6 +7,7 @@ export default ({
   H2 = false,
   H3 = false,
   H4 = false,
+  H5 = false,
   colour,
   children = [],
 }: OwnProps): JSX.Element => {
@@ -23,6 +24,9 @@ export default ({
   if (H4) {
     style = styles.heading4;
   }
+  if (H5) {
+    style = styles.heading5;
+  }
 
   const textStyle = colour ? [style, { color: colour }] : style;
   return <Text style={textStyle}>{children}</Text>;
@@ -33,6 +37,7 @@ type OwnProps = {
   H2?: boolean;
   H3?: boolean;
   H4?: boolean;
+  H5?: boolean;
   colour?: string;
   children?: JSX.Element[] | JSX.Element | string;
 };
@@ -58,6 +63,11 @@ const styles = StyleSheet.create({
     fontSize: 20,
     color: colours.black,
   },
+  heading5: {
+    fontFamily: 'FiraSans-ExtraBold',
+    fontSize: 16,
+    color: colours.black,
+  },
   paragraph: {
     fontFamily: 'FiraSans-Regular',
     fontSize: 14,