[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, 18 insertions, 10 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index be6f78a8..446bc07b 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,6 +1,13 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {Alert, StyleSheet, View} from 'react-native';
+import {
+  Alert,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
@@ -20,6 +27,7 @@ interface MomentProps {
   screenType: ScreenType;
   handleMomentCategoryDelete: (_: string) => void;
   shouldAllowDeletion: boolean;
+  externalStyles?: Record<string, StyleProp<ViewStyle>>;
 }
 
 const Moment: React.FC<MomentProps> = ({
@@ -29,6 +37,7 @@ const Moment: React.FC<MomentProps> = ({
   screenType,
   handleMomentCategoryDelete,
   shouldAllowDeletion,
+  externalStyles,
 }) => {
   const navigation = useNavigation();
 
@@ -63,9 +72,11 @@ const Moment: React.FC<MomentProps> = ({
       });
   };
   return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <Text style={styles.titleText}>{title}</Text>
+    <View style={[styles.container, externalStyles?.container]}>
+      <View style={[styles.header, externalStyles?.header]}>
+        <Text style={[styles.titleText, externalStyles?.titleText]}>
+          {title}
+        </Text>
         {!userXId ? (
           <>
             <PlusIcon
@@ -90,7 +101,7 @@ const Moment: React.FC<MomentProps> = ({
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
-        style={styles.scrollContainer}>
+        style={[styles.scrollContainer, externalStyles?.scrollContainer]}>
         {images &&
           images.map((imageObj: MomentType) => (
             <MomentTile
@@ -107,7 +118,7 @@ const Moment: React.FC<MomentProps> = ({
               <View style={styles.defaultImage}>
                 <BigPlusIcon width={24} height={24} />
                 <Text style={styles.defaultImageText}>
-                  Add a moment of your {title.toLowerCase()}!
+                  Add a moment of your {title?.toLowerCase()}!
                 </Text>
               </View>
             </LinearGradient>
@@ -126,12 +137,9 @@ const styles = StyleSheet.create({
   },
   header: {
     flex: 1,
-    paddingLeft: '3%',
-    padding: 5,
-    paddingTop: 20,
+    padding: '3%',
     backgroundColor: 'white',
     flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center',
   },
   titleText: {