Add new upload button in the middle on the nav bar and shifting the older icons to new positions. Follow Blessing's design by enlargining it and making the other icons a bit smaller. Also, add the navigation that goes to the camera screen from the upload icon.

Ending the rebase from master.

1 files changed, 15 insertions, 4 deletions

diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index 5128f3da..f97bb861 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -18,6 +18,7 @@ interface NavigationIconProps extends TouchableOpacityProps {
     | 'Chat';
   disabled?: boolean;
   newIcon?: boolean;
+  isBigger?: boolean;
 }
 
 const NavigationIcon = (props: NavigationIconProps) => {
@@ -35,7 +36,7 @@ const NavigationIcon = (props: NavigationIconProps) => {
       break;
     case 'Upload':
       imgSrc = props.disabled
-        ? require('../../assets/navigationIcons/upload.png')
+        ? require('../../assets/navigationIcons/new-upload.png')
         : require('../../assets/navigationIcons/upload-clicked.png');
       break;
     case 'Notifications':
@@ -68,12 +69,22 @@ const NavigationIcon = (props: NavigationIconProps) => {
   return (
     <View style={styles.container}>
       <TouchableOpacity {...props}>
-        <Image source={imgSrc} style={styles.icon} />
+        <Image source={imgSrc} style={getStyles(props.isBigger ?? false)} />
       </TouchableOpacity>
     </View>
   );
 };
 
+const getStyles = (isBigger: boolean) =>
+  isBigger ? biggerIconStyles.icon : styles.icon;
+
+const biggerIconStyles = StyleSheet.create({
+  icon: {
+    height: 44,
+    width: 44,
+  },
+});
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -87,8 +98,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.4,
   },
   icon: {
-    height: 30,
-    width: 30,
+    height: 28,
+    width: 28,
   },
 });