[TMA-280] Add coming soon (#73)

* move async-storage

* removed lock files

* added lock files to gitignore

* added the wrong file to gitignore

* added coming soon screens

* moved search next to profile

* Added the right icons and abstracted cs to ComingSoon.tsx

* Update Checkpoint.tsx

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>

3 files changed, 55 insertions, 3 deletions

diff --git a/src/components/common/ComingSoon.tsx b/src/components/common/ComingSoon.tsx
new file mode 100644
index 00000000..5e1414e2
--- /dev/null
+++ b/src/components/common/ComingSoon.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {StyleSheet, View, Text, Image} from 'react-native';
+import {Background} from '../onboarding';
+
+const ComingSoon: React.FC = () => {
+  return (
+    <Background style={styles.container}>
+      <View style={styles.textContainer}>
+        <Text style={styles.header}>Coming Soon</Text>
+        <Text style={styles.subtext}>
+          Stay tuned! We are working on constructing this page
+        </Text>
+      </View>
+      <Image
+        source={require('../../assets/images/coming-soon.png')}
+        style={styles.image}
+      />
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  image: {
+    width: 400,
+    height: 400,
+  },
+  textContainer: {
+    marginTop: '30%',
+  },
+  header: {
+    color: '#fff',
+    fontSize: 32,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '4%',
+    marginHorizontal: '10%',
+  },
+  subtext: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '16%',
+    marginHorizontal: '10%',
+  },
+});
+export default ComingSoon;
diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index 9497566b..8bf8b4a0 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -17,8 +17,8 @@ const NavigationIcon = (props: NavigationIconProps) => {
   switch (props.tab) {
     case 'Home':
       imgSrc = props.disabled
-        ? require('../../assets/navigationIcons/home.png')
-        : require('../../assets/navigationIcons/home-clicked.png');
+        ? require('../../assets/navigationIcons/home-new.png')
+        : require('../../assets/navigationIcons/home-new-clicked.png');
       break;
     case 'Search':
       imgSrc = props.disabled
@@ -28,7 +28,7 @@ const NavigationIcon = (props: NavigationIconProps) => {
     case 'Upload':
       imgSrc = props.disabled
         ? require('../../assets/navigationIcons/upload.png')
-        : require('../../assets/navigationIcons/upload.png');
+        : require('../../assets/navigationIcons/upload-clicked.png');
       break;
     case 'Notifications':
       imgSrc = props.disabled
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 61d826bd..950b3f61 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -10,4 +10,5 @@ export {default as RecentSearches} from '../search/RecentSearches';
 export {default as LoadingIndicator} from './LoadingIndicator';
 export {default as DateLabel} from './DateLabel';
 export {default as SocialLinkModal} from './SocialLinkModal';
+export {default as ComingSoon} from './ComingSoon';
 export * from './post';