Fine tuned profile edit form view

src/components/avatarHeader/avatarHeaderView.js

@@ -34,10 +34,11 @@ const AvatarHeader = ({
           size={25}
         />
         <View style={styles.wrapper}>
-          <UserAvatar 
-            key={`${avatarUrl}-${username}`} 
-            noAction size="xl" 
-            username={username} 
+          <UserAvatar
+            key={`${avatarUrl}-${username}`}
+            noAction
+            size="xl"
+            username={username}
             avatarUrl={avatarUrl}
             isLoading={isUploading}
           />

src/components/profileEditForm/profileEditFormStyles.ts

@@ -13,6 +13,7 @@ export default EStyleSheet.create({
     marginTop: 8,
   },
   label: {
+    marginTop:8,
     fontSize: 14,
     color: '$primaryDarkText',
     fontWeight: '500',
@@ -25,7 +26,7 @@ export default EStyleSheet.create({
     height: 60,
     marginBottom: 12,
     alignSelf: 'stretch',
-    backgroundColor: '#296CC0',
+    backgroundColor: '$primaryGray',
   },
   coverImageWrapper: {},
   addIcon: {
@@ -62,13 +63,19 @@ export default EStyleSheet.create({
   },
 
   input: {
-    fontSize: 14,
-    color: '$primaryDarkText',
+    fontSize: 20,
+    color: '$primaryBlack',
     alignSelf: 'flex-start',
     width: '100%',
-    height: 40,
+    paddingBottom:10,
   },
   contentContainer: {
     flexGrow: 1,
   },
+    activityIndicator: {
+    position:'absolute', 
+    alignSelf:'center', 
+    top:0, 
+    bottom:8
+  }
 });

src/components/profileEditForm/profileEditFormView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { withNavigation } from 'react-navigation';
-import { View, TouchableOpacity, Image, Text, Platform } from 'react-native';
+import { View, TouchableOpacity, Image, Text, Platform, ActivityIndicator } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { injectIntl } from 'react-intl';
 
@@ -17,6 +17,9 @@ import { getResizedImage } from '../../utils/image';
 
 // Styles
 import styles from './profileEditFormStyles';
+import FastImage from 'react-native-fast-image';
+import EStyleSheet from 'react-native-extended-stylesheet';
+import { MainButton } from '../mainButton';
 
 
 interface ProfileEditFormProps {
@@ -39,30 +42,40 @@ const ProfileEditFormView = ({
   intl,
   isDarkTheme,
   isLoading,
+  isUploading,
   showImageUploadActions,
   ...props
 }:ProfileEditFormProps) => (
+
   <View style={styles.container}>
-    <IconButton
-      iconStyle={styles.saveIcon}
-      style={styles.saveButton}
-      iconType="MaterialIcons"
-      name="save"
-      onPress={handleOnSubmit}
-      size={30}
-      isLoading={isLoading}
-    />
+
     <KeyboardAwareScrollView
       enableAutoAutomaticScroll={Platform.OS === 'ios'}
       contentContainerStyle={styles.contentContainer}
       enableOnAndroid={true}
     >
       <TouchableOpacity style={styles.coverImgWrapper} onPress={showImageUploadActions}>
-        <Image
-          style={styles.coverImg}
-          source={{ uri: getResizedImage(coverUrl, 600) }}
-          defaultSource={isDarkTheme ? DARK_COVER_IMAGE : LIGHT_COVER_IMAGE}
-        />
+     
+          <FastImage
+            style={styles.coverImg}
+            source={
+              coverUrl 
+                ? { uri: getResizedImage(coverUrl, 600) } 
+                : isDarkTheme 
+                  ? DARK_COVER_IMAGE 
+                  : LIGHT_COVER_IMAGE
+            }
+          />
+          {
+            isUploading && (
+              <ActivityIndicator 
+                style={styles.activityIndicator}
+                color={EStyleSheet.value('$white')}
+                size='large'
+              />
+            )
+          }
+          
 
         <IconButton
           iconStyle={styles.addIcon}
@@ -95,6 +108,17 @@ const ProfileEditFormView = ({
         </View>
       ))}
     </KeyboardAwareScrollView>
+  
+    <MainButton
+      style={{ width: isLoading ? null : 120, marginBottom:24, alignSelf:'flex-end' }}
+      onPress={handleOnSubmit}
+      iconName="save"
+      iconType="MaterialIcons"
+      iconColor="white"
+      text="SAVE"
+      isLoading={isLoading}
+    />
+        
   </View>
 );
 

src/containers/profileEditContainer.js

@@ -105,7 +105,7 @@ class ProfileEditContainer extends Component {
   };
 
   _handleOpenImagePicker = (action) => {
-    ImagePicker.openPicker(IMAGE_PICKER_OPTIONS)
+    ImagePicker.openPicker(action == 'avatarUrl' ? IMAGE_PICKER_AVATAR_OPTIONS : IMAGE_PICKER_COVER_OPTIONS)
       .then((media) => {
         this._uploadImage(media, action);
       })
@@ -115,7 +115,7 @@ class ProfileEditContainer extends Component {
   };
 
   _handleOpenCamera = (action) => {
-    ImagePicker.openCamera(IMAGE_PICKER_OPTIONS)
+    ImagePicker.openCamera(action == 'avatarUrl' ? IMAGE_PICKER_AVATAR_OPTIONS : IMAGE_PICKER_COVER_OPTIONS)
       .then((media) => {
         this._uploadImage(media, action);
       })
@@ -124,7 +124,6 @@ class ProfileEditContainer extends Component {
       });
   };
 
-
   _handleMediaOnSelectFailure = (error) => {
     const { intl } = this.props;
 
@@ -180,7 +179,16 @@ class ProfileEditContainer extends Component {
 
   render() {
     const { children, currentAccount, isDarkTheme } = this.props;
-    const { isLoading, isUploading, name, location, website, about, coverUrl, avatarUrl } = this.state;
+    const {
+      isLoading,
+      isUploading,
+      name,
+      location,
+      website,
+      about,
+      coverUrl,
+      avatarUrl,
+    } = this.state;
 
     return (
       children &&
@@ -212,9 +220,14 @@ const mapStateToProps = (state) => ({
 
 export default connect(mapStateToProps)(injectIntl(withNavigation(ProfileEditContainer)));
 
-
-const IMAGE_PICKER_OPTIONS = {
+const IMAGE_PICKER_AVATAR_OPTIONS = {
   includeBase64: true,
   width: 512,
   height: 512,
-}
+};
+
+const IMAGE_PICKER_COVER_OPTIONS = {
+  includeBase64: true,
+  width: 1440,
+  height: 1440,
+};

src/screens/profileEdit/screen/profileEditScreen.js

@@ -26,7 +26,7 @@ class ProfileEditScreen extends PureComponent {
 
   // Component Functions
   _showImageUploadActions = (action) => {
-    this.setState({ selectedUploadAction: action }, ()=>{
+    this.setState({ selectedUploadAction: action }, () => {
       this.galleryRef.current.show();
     });
   };
@@ -76,6 +76,7 @@ class ProfileEditScreen extends PureComponent {
               isUploading={isUploading && selectedUploadAction === 'coverUrl'}
               handleOnSubmit={handleOnSubmit}
             />
+
             <ActionSheet
               ref={this.galleryRef}
               options={[