1 files changed, 32 insertions, 23 deletions
diff --git a/src/screens/profile/MomentUploadPromptScreen.tsx b/src/screens/profile/MomentUploadPromptScreen.tsx
index 9d46c1e9..f79c81b4 100644
--- a/src/screens/profile/MomentUploadPromptScreen.tsx
+++ b/src/screens/profile/MomentUploadPromptScreen.tsx
@@ -7,6 +7,8 @@ import {StyleSheet, Text, View} from 'react-native';
 import {Moment} from '../../components';
 import {Image} from 'react-native-animatable';
 import {UPLOAD_MOMENT_PROMPT_ONE_MESSAGE} from '../../constants/strings';
+import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants';
+import {isIPhoneX, normalize} from '../../utils';
 
 type MomentUploadPromptScreenRouteProp = RouteProp<
   MainStackParams,
@@ -26,12 +28,10 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
   route,
   navigation,
 }) => {
-  const {screenType, momentCategory} = route.params;
+  const {screenType, momentCategory, profileBodyHeight} = route.params;
   return (
     <View style={styles.container}>
       <CloseIcon
-        height={'10%'}
-        width={'10%'}
         color={'white'}
         style={styles.closeButton}
         onPress={() => {
@@ -42,7 +42,11 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
       <Text style={styles.text}>{UPLOAD_MOMENT_PROMPT_ONE_MESSAGE}</Text>
       <Image
         source={require('../../assets/gifs/dotted-arrow-white.gif')}
-        style={styles.arrowGif}
+        style={[
+          StyleSheet.absoluteFill,
+          styles.arrowGif,
+          {top: profileBodyHeight + PROFILE_CUTOUT_BOTTOM_Y},
+        ]}
       />
       <Moment
         key={1}
@@ -55,7 +59,12 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
         showDownButton={false}
         showUpButton={false}
         externalStyles={{
-          container: styles.momentContainer,
+          container: {
+            ...styles.momentContainer,
+            top: isIPhoneX()
+              ? profileBodyHeight + 615
+              : profileBodyHeight + 500,
+          },
           titleText: styles.momentHeaderText,
           header: styles.momentHeader,
           scrollContainer: styles.momentScrollContainer,
@@ -67,32 +76,28 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     flexDirection: 'column',
-    justifyContent: 'center',
   },
   closeButton: {
-    position: 'relative',
-    height: '48%',
-    aspectRatio: 1,
-    top: 20,
+    ...StyleSheet.absoluteFillObject,
+    top: 45,
+    left: 20,
+    width: 40,
+    height: 40,
   },
   text: {
-    justifyContent: 'center',
+    marginTop: 250,
     color: '#fff',
     fontWeight: 'bold',
-    fontSize: 20,
+    fontSize: normalize(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'}],
+    width: 200,
+    height: 150,
+    left: 120,
+    transform: [{rotate: '350deg'}, {rotateY: '180deg'}],
   },
 
   //Styles to adjust moment container
@@ -100,14 +105,18 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   momentContainer: {
-    top: '62%',
+    ...StyleSheet.absoluteFillObject,
     backgroundColor: 'transparent',
+    height: 170,
   },
   momentHeaderText: {
-    paddingBottom: '5%',
+    ...StyleSheet.absoluteFillObject,
+    marginLeft: 12,
+    marginTop: 10,
   },
   momentHeader: {
     backgroundColor: 'transparent',
+    paddingVertical: 20,
   },
 });