[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, 79 insertions, 0 deletions

diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx
new file mode 100644
index 00000000..5cd3ac3f
--- /dev/null
+++ b/src/components/common/TaggPrompt.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import {Platform, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {Image, View} from 'react-native-animatable';
+import {SCREEN_HEIGHT} from '../../utils';
+import CloseIcon from '../../assets/ionicons/close-outline.svg';
+
+type TaggPromptProps = {
+  messageHeader: string;
+  messageBody: string;
+  logoType: string;
+  onClose: () => void;
+};
+
+const TaggPrompt: React.FC<TaggPromptProps> = ({
+  messageHeader,
+  messageBody,
+  logoType,
+  onClose,
+}) => {
+  /**
+   * Generic prompt for Tagg
+   */
+
+  return (
+    <View style={styles.container}>
+      <Image
+        style={styles.icon}
+        source={require('../../assets/icons/plus-logo.png')}
+      />
+      <Text style={styles.header}>{messageHeader}</Text>
+      <Text style={styles.subtext}>{messageBody}</Text>
+      <TouchableOpacity
+        style={styles.closeButton}
+        onPress={() => {
+          onClose();
+        }}>
+        <CloseIcon height={'50%'} width={'50%'} color="gray" />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    height: SCREEN_HEIGHT / 4.5,
+    paddingTop: SCREEN_HEIGHT / 10,
+    paddingBottom: SCREEN_HEIGHT / 50,
+  },
+  closeButton: {
+    position: 'relative',
+    height: '40%',
+    bottom: SCREEN_HEIGHT / 6,
+    aspectRatio: 1,
+    alignSelf: 'flex-end',
+  },
+  icon: {
+    width: 40,
+    height: 40,
+  },
+  header: {
+    color: 'black',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginTop: '2%',
+  },
+  subtext: {
+    color: 'gray',
+    fontSize: 12,
+    fontWeight: '500',
+    textAlign: 'center',
+    marginTop: '2%',
+  },
+});
+export default TaggPrompt;