[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>

17 files changed, 66 insertions, 93 deletions

diff --git a/src/assets/images/coming-soon.png b/src/assets/images/coming-soon.png
new file mode 100644
index 00000000..5a8e808f
--- /dev/null
+++ b/src/assets/images/coming-soon.png
diff --git a/src/assets/navigationIcons/home-new-clicked.png b/src/assets/navigationIcons/home-new-clicked.png
new file mode 100644
index 00000000..9bf31927
--- /dev/null
+++ b/src/assets/navigationIcons/home-new-clicked.png
diff --git a/src/assets/navigationIcons/home-new-large-clicked.png b/src/assets/navigationIcons/home-new-large-clicked.png
new file mode 100644
index 00000000..d19cc167
--- /dev/null
+++ b/src/assets/navigationIcons/home-new-large-clicked.png
diff --git a/src/assets/navigationIcons/home-new-large.png b/src/assets/navigationIcons/home-new-large.png
new file mode 100644
index 00000000..0531fb9b
--- /dev/null
+++ b/src/assets/navigationIcons/home-new-large.png
diff --git a/src/assets/navigationIcons/home-new.png b/src/assets/navigationIcons/home-new.png
new file mode 100644
index 00000000..c94dceed
--- /dev/null
+++ b/src/assets/navigationIcons/home-new.png
diff --git a/src/assets/navigationIcons/upload-clicked.png b/src/assets/navigationIcons/upload-clicked.png
new file mode 100644
index 00000000..083f289d
--- /dev/null
+++ b/src/assets/navigationIcons/upload-clicked.png
diff --git a/src/assets/navigationIcons/upload-large-clicked.png b/src/assets/navigationIcons/upload-large-clicked.png
new file mode 100644
index 00000000..74fe647c
--- /dev/null
+++ b/src/assets/navigationIcons/upload-large-clicked.png
diff --git a/src/assets/navigationIcons/upload-large.png b/src/assets/navigationIcons/upload-large.png
new file mode 100644
index 00000000..4d7cb7b7
--- /dev/null
+++ b/src/assets/navigationIcons/upload-large.png
diff --git a/src/assets/navigationIcons/upload.png b/src/assets/navigationIcons/upload.png
index ec8c685f..839aaebc 100644
--- a/src/assets/navigationIcons/upload.png
+++ b/src/assets/navigationIcons/upload.png
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';
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index 9cfbe4bf..e0341c40 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -57,13 +57,13 @@ const NavigationBar: React.FC = () => {
         },
       }}>
       <Tabs.Screen name="Home" component={Home} />
+      <Tabs.Screen name="Notifications" component={Notifications} />
+      <Tabs.Screen name="Upload" component={Upload} />
       <Tabs.Screen
         name="Search"
         component={Profile}
         initialParams={{isProfileView: true}}
       />
-      <Tabs.Screen name="Upload" component={Upload} />
-      <Tabs.Screen name="Notifications" component={Notifications} />
       <Tabs.Screen
         name="Profile"
         component={Profile}
diff --git a/src/screens/main/Home.tsx b/src/screens/main/Home.tsx
index 7b6f1aaf..729a7a22 100644
--- a/src/screens/main/Home.tsx
+++ b/src/screens/main/Home.tsx
@@ -1,8 +1,5 @@
 import React from 'react';
-import {StyleSheet, View, TouchableOpacity, Text} from 'react-native';
-import {GradientBackground, SocialMediaLinker} from '../../components';
-import {LinkerType} from 'src/types';
-import {SOCIAL_LIST} from '../../constants/';
+import {ComingSoon} from '../../components';
 
 /**
  * Home Screen for displaying Tagg post suggestions
@@ -10,59 +7,7 @@ import {SOCIAL_LIST} from '../../constants/';
  */
 
 const Home: React.FC = () => {
-  const linkers: Array<LinkerType> = [];
-  const [state, setState] = React.useState({
-    showMore: false,
-  });
-
-  let numSocials: Number = state.showMore ? 9 : 3;
-
-  for (let i = 0; i < numSocials; i++) {
-    let linker: LinkerType = {
-      label: SOCIAL_LIST[i],
-    };
-    linkers.push(linker);
-  }
-
-  const handleShowPress = () => {
-    setState({
-      ...state,
-      showMore: !state.showMore,
-    });
-  };
-
-  return (
-    <GradientBackground>
-      <View style={styles.container}>
-        {linkers.map((linker, index) => (
-          <SocialMediaLinker key={index} social={linker} />
-        ))}
-        <TouchableOpacity onPress={handleShowPress} style={styles.show}>
-          {state.showMore && <Text>Show Less 🔼</Text>}
-          {!state.showMore && <Text>Show More 🔽</Text>}
-        </TouchableOpacity>
-      </View>
-    </GradientBackground>
-  );
+  return <ComingSoon />;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    height: '19%',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    alignContent: 'center',
-  },
-  show: {
-    borderColor: '#fff',
-    borderWidth: 1,
-    borderRadius: 3,
-    paddingHorizontal: '2%',
-    paddingVertical: '1%',
-    marginVertical: '3%',
-    marginLeft: '65%',
-  },
-});
-
 export default Home;
diff --git a/src/screens/main/Notifications.tsx b/src/screens/main/Notifications.tsx
index db89d7f9..ca8c41c3 100644
--- a/src/screens/main/Notifications.tsx
+++ b/src/screens/main/Notifications.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import {Text} from 'react-native-animatable';
-import {StyleSheet} from 'react-native';
-import {GradientBackground} from '../../components';
+import {ComingSoon} from '../../components';
 
 /**
  * Navigation Screen for displaying other users'
@@ -9,16 +7,7 @@ import {GradientBackground} from '../../components';
  */
 
 const Notifications: React.FC = () => {
-  return (
-    <GradientBackground>
-      <Text style={styles.text}> Notifications will go here 🔔 </Text>
-    </GradientBackground>
-  );
+  return <ComingSoon />;
 };
-const styles = StyleSheet.create({
-  text: {
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-  },
-});
+
 export default Notifications;
diff --git a/src/screens/main/Upload.tsx b/src/screens/main/Upload.tsx
index d91af1f5..fc089aec 100644
--- a/src/screens/main/Upload.tsx
+++ b/src/screens/main/Upload.tsx
@@ -1,24 +1,11 @@
 import React from 'react';
-import {Text} from 'react-native-animatable';
-import {StyleSheet} from 'react-native';
-import {GradientBackground} from '../../components';
-
+import {ComingSoon} from '../../components';
 /**
  * Upload Screen to allow users to upload posts to Tagg
  */
 
 const Upload: React.FC = () => {
-  return (
-    <GradientBackground>
-      <Text style={styles.text}> Upload pics ⬆ </Text>
-    </GradientBackground>
-  );
+  return <ComingSoon />;
 };
-const styles = StyleSheet.create({
-  text: {
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-  },
-});
 
 export default Upload;
diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/Checkpoint.tsx
index aae2293e..8e53996f 100644
--- a/src/screens/onboarding/Checkpoint.tsx
+++ b/src/screens/onboarding/Checkpoint.tsx
@@ -48,8 +48,7 @@ const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
     <Background style={styles.container}>
       <StatusBar barStyle="light-content" />
       <RegistrationWizard style={styles.wizard} step="six" />
-
-      <View style={styles.textContainer}>
+       <View style={styles.textContainer}>
         <Text style={styles.header}>You are registered!</Text>
         <Text style={styles.subtext}>
           We're almost there. Would you like to setup your profile now?
@@ -65,6 +64,7 @@ const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
           </TouchableOpacity>
         </View>
       </View>
+      
     </Background>
   );
 };