fixed image offset on profile onboarding page (#65)

1 files changed, 21 insertions, 16 deletions

diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index 506d5f63..e13ccc5a 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -110,11 +110,11 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({route}) => {
       accessible={true}
       accessibilityLabel="ADD LARGE PROFILE PIC HERE"
       onPress={goToGalleryLargePic}
-      style={styles.largeProfile}>
+      style={styles.largeProfileUploader}>
       {form.largePic ? (
         <Image
           source={{uri: form.largePic}}
-          style={[styles.largeProfile, styles.profilePic]}
+          style={styles.largeProfilePic}
         />
       ) : (
         <Text style={styles.largeProfileText}>ADD LARGE PROFILE PIC HERE</Text>
@@ -130,11 +130,11 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({route}) => {
       accessible={true}
       accessibilityLabel="ADD SMALLER PIC"
       onPress={goToGallerySmallPic}
-      style={styles.smallProfile}>
+      style={styles.smallProfileUploader}>
       {form.smallPic ? (
         <Image
           source={{uri: form.smallPic}}
-          style={[styles.smallProfile, styles.profilePic]}
+          style={styles.smallProfilePic}
         />
       ) : (
         <Text style={styles.smallProfileText}>ADD SMALLER PIC</Text>
@@ -443,16 +443,16 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginBottom: '5%',
   },
-  largeProfile: {
+  largeProfileUploader: {
     justifyContent: 'center',
     alignItems: 'center',
     padding: 15,
-    height: 230,
-    width: 230,
-    borderRadius: 23,
     backgroundColor: '#fff',
     marginLeft: '13%',
     marginTop: '5%',
+    height: 230,
+    width: 230,
+    borderRadius: 23,
   },
   largeProfileText: {
     textAlign: 'center',
@@ -460,16 +460,21 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: '#863FF9',
   },
-  smallProfile: {
+  largeProfilePic: {
+    height: 230,
+    width: 230,
+    borderRadius: 23,
+  },
+  smallProfileUploader: {
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20,
-    height: 110,
-    width: 110,
-    borderRadius: 55,
     backgroundColor: '#E1F0FF',
     right: '18%',
     marginTop: '38%',
+    height: 110,
+    width: 110,
+    borderRadius: 55,
   },
   smallProfileText: {
     textAlign: 'center',
@@ -477,10 +482,10 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: '#806DF4',
   },
-  profilePic: {
-    marginRight: 0,
-    marginLeft: 0,
-    bottom: 0,
+  smallProfilePic: {
+    height: 110,
+    width: 110,
+    borderRadius: 55,
   },
   submitBtn: {
     backgroundColor: '#8F01FF',