From d495bff07b50c47e842dc2c139922d56c87f5c9b Mon Sep 17 00:00:00 2001
From: Ashm Walia <40498934+ashmgarv@users.noreply.github.com>
Date: Tue, 12 Jan 2021 15:38:21 -0800
Subject: [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
---
 src/components/common/TaggPopup.tsx  | 19 +++++----
 src/components/common/TaggPrompt.tsx | 79 ++++++++++++++++++++++++++++++++++++
 src/components/common/index.ts       |  1 +
 3 files changed, 92 insertions(+), 7 deletions(-)
 create mode 100644 src/components/common/TaggPrompt.tsx

(limited to 'src/components/common')

diff --git a/src/components/common/TaggPopup.tsx b/src/components/common/TaggPopup.tsx
index db24adb8..86a472b1 100644
--- a/src/components/common/TaggPopup.tsx
+++ b/src/components/common/TaggPopup.tsx
@@ -31,7 +31,11 @@ const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => {
   const {messageHeader, messageBody, next} = route.params.popupProps;
 
   return (
-    <View style={styles.container}>
+    <TouchableOpacity
+      style={styles.container}
+      onPressOut={() => {
+        navigation.goBack();
+      }}>
       <View style={styles.popup}>
         <Image
           style={styles.icon}
@@ -61,7 +65,7 @@ const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => {
           />
         </View>
       )}
-    </View>
+    </TouchableOpacity>
   );
 };
 
@@ -92,23 +96,23 @@ const styles = StyleSheet.create({
   },
   header: {
     color: '#fff',
-    fontSize: 16,
+    fontSize: SCREEN_WIDTH / 25,
     fontWeight: '600',
     textAlign: 'justify',
     marginBottom: '2%',
-    marginHorizontal: '2%',
+    marginLeft: '4%',
   },
   subtext: {
     color: '#fff',
-    fontSize: 12,
+    fontSize: SCREEN_WIDTH / 30,
     fontWeight: '600',
     textAlign: 'justify',
     marginBottom: '15%',
-    marginHorizontal: '2%',
+    marginLeft: '3%',
   },
   popup: {
     width: SCREEN_WIDTH * 0.8,
-    height: SCREEN_WIDTH * 0.2,
+    height: SCREEN_WIDTH * 0.24,
     backgroundColor: 'black',
     borderRadius: 8,
     flexDirection: 'row',
@@ -116,6 +120,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     position: 'absolute',
     bottom: SCREEN_HEIGHT * 0.7,
+    padding: SCREEN_WIDTH / 40,
   },
   footer: {
     marginLeft: '50%',
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;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index d5d36297..9162ec70 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -18,3 +18,4 @@ export {default as BottomDrawer} from './BottomDrawer';
 export {default as TaggLoadingTndicator} from './TaggLoadingIndicator';
 export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';
 export {default as TaggPopUp} from './TaggPopup';
+export {default as TaggPrompt} from './TaggPrompt';
-- 
cgit v1.2.3-70-g09d2