[TMA 491 Frontend] Revamp onboarding (#173)

* First commit, arrow excluded

* Done from my side

* Some small nitpicks

* exclude tsconfig

* Show profile screen after onboarding

* Update string

* Small fix

* small cosmetic

1 files changed, 114 insertions, 0 deletions

diff --git a/src/screens/profile/MomentUploadPromptScreen.tsx b/src/screens/profile/MomentUploadPromptScreen.tsx
new file mode 100644
index 00000000..6111985d
--- /dev/null
+++ b/src/screens/profile/MomentUploadPromptScreen.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {MainStackParams} from '../../routes';
+import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {StyleSheet, Text, View} from 'react-native';
+import {Moment} from '../../components';
+import {Image} from 'react-native-animatable';
+
+type MomentUploadPromptScreenRouteProp = RouteProp<
+  MainStackParams,
+  'MomentUploadPrompt'
+>;
+type MomentUploadPromptScreenNavigationProp = StackNavigationProp<
+  MainStackParams,
+  'MomentUploadPrompt'
+>;
+
+interface MomentUploadPromptScreenProps {
+  route: MomentUploadPromptScreenRouteProp;
+  navigation: MomentUploadPromptScreenNavigationProp;
+}
+
+const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
+  route,
+  navigation,
+}) => {
+  const {screenType, momentCategory} = route.params;
+  return (
+    <View style={styles.container}>
+      <CloseIcon
+        height={'10%'}
+        width={'10%'}
+        color={'white'}
+        style={styles.closeButton}
+        onPress={() => {
+          navigation.goBack();
+        }}
+      />
+
+      <Text style={styles.text}>
+        Post your first moment to {'\n'} continue building your digital {'\n'}{' '}
+        identity!
+      </Text>
+      <Image
+        source={require('../../assets/gifs/dotted-arrow-white.gif')}
+        style={styles.arrowGif}
+      />
+      <Moment
+        key={1}
+        title={momentCategory}
+        images={[]}
+        userXId={undefined}
+        screenType={screenType}
+        handleMomentCategoryDelete={() => {}}
+        shouldAllowDeletion={false}
+        externalStyles={{
+          container: styles.momentContainer,
+          titleText: styles.momentHeaderText,
+          header: styles.momentHeader,
+          scrollContainer: styles.momentScrollContainer,
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  closeButton: {
+    position: 'relative',
+    height: '48%',
+    aspectRatio: 1,
+    top: 20,
+  },
+  text: {
+    justifyContent: 'center',
+    color: '#fff',
+    fontWeight: 'bold',
+    fontSize: 20,
+    textAlign: 'center',
+    position: 'relative',
+    top: '40%',
+  },
+  arrowGif: {
+    position: 'relative',
+    width: '25%',
+    height: '40%',
+    left: '40%',
+    aspectRatio: 1.2,
+    top: '50%',
+    transform: [{scaleX: -1}, {rotate: '15deg'}],
+  },
+
+  //Styles to adjust moment container
+  momentScrollContainer: {
+    backgroundColor: 'transparent',
+  },
+  momentContainer: {
+    top: '62%',
+    backgroundColor: 'transparent',
+  },
+  momentHeaderText: {
+    paddingBottom: '5%',
+  },
+  momentHeader: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export default MomentUploadPromptScreen;