[Improve] profile edit screen

src/components/avatarHeader/avatarHeaderStyles.js

@@ -1,21 +1,25 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
+  headerView: {
+    backgroundColor: '$primaryBackgroundColor',
+  },
   headerContainer: {
     flexDirection: 'row',
     paddingTop: 8,
+    paddingBottom: 8,
     paddingHorizontal: 24,
-    paddingBottom: 24,
     alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '$primaryBackgroundColor',
   },
   backIcon: {
     color: '$white',
   },
   wrapper: {
-    marginLeft: 16,
-    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: '$primaryBackgroundColor',
   },
   textWrapper: {
     marginLeft: 24,
@@ -26,9 +30,10 @@ export default EStyleSheet.create({
     fontWeight: 'bold',
   },
   username: {
-    color: '$white',
-    fontSize: 12,
     marginTop: 4,
+    fontSize: 16,
+    color: '$primaryDarkText',
+    fontWeight: '600',
   },
   addIcon: {
     color: '$white',

src/components/avatarHeader/avatarHeaderView.js

@@ -1,63 +1,48 @@
 import React from 'react';
-import { View, Text, SafeAreaView, TouchableOpacity } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-import LinearGradient from 'react-native-linear-gradient';
+import { View, Text, TouchableOpacity } from 'react-native';
 
 import { UserAvatar } from '../userAvatar';
 import { IconButton } from '../iconButton';
 
 // Styles
 import styles from './avatarHeaderStyles';
 
-const AvatarHeader =
-  ({ username, name, reputation, avatarUrl, showImageUploadActions, isUploading }) =>
-  () => {
-    const navigation = useNavigation();
+const AvatarHeader = ({
+  username,
+  name,
+  reputation,
+  avatarUrl,
+  showImageUploadActions,
+  isUploading,
+}) => {
+  return (
+    <View style={styles.headerContainer}>
+      <View style={styles.wrapper}>
+        <TouchableOpacity onPress={showImageUploadActions}>
+          <UserAvatar
+            key={`${avatarUrl}-${username}`}
+            noAction
+            size="xl"
+            username={username}
+            avatarUrl={avatarUrl}
+            isLoading={isUploading}
+          />
+          <IconButton
+            iconStyle={styles.addIcon}
+            style={styles.addButton}
+            iconType="MaterialCommunityIcons"
+            name="plus"
+            onPress={showImageUploadActions}
+            size={15}
+          />
+        </TouchableOpacity>
 
-    return (
-      <LinearGradient
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 0 }}
-        colors={['#357ce6', '#2d5aa0']}
-        style={styles.headerView}
-      >
-        <SafeAreaView>
-          <View style={styles.headerContainer}>
-            <IconButton
-              iconStyle={styles.backIcon}
-              iconType="MaterialIcons"
-              name="arrow-back"
-              onPress={navigation.goBack}
-              size={25}
-            />
-            <View style={styles.wrapper}>
-              <TouchableOpacity onPress={showImageUploadActions}>
-                <UserAvatar
-                  key={`${avatarUrl}-${username}`}
-                  noAction
-                  size="xl"
-                  username={username}
-                  avatarUrl={avatarUrl}
-                  isLoading={isUploading}
-                />
-                <IconButton
-                  iconStyle={styles.addIcon}
-                  style={styles.addButton}
-                  iconType="MaterialCommunityIcons"
-                  name="plus"
-                  onPress={showImageUploadActions}
-                  size={15}
-                />
-              </TouchableOpacity>
-
-              <View style={styles.textWrapper}>
-                {!!name && <Text style={styles.name}>{name}</Text>}
-                <Text style={styles.username}>{`@${username} (${reputation})`}</Text>
-              </View>
-            </View>
-          </View>
-        </SafeAreaView>
-      </LinearGradient>
-    );
-  };
+        <View style={styles.textWrapper}>
+          {!!name && <Text style={styles.name}>{name}</Text>}
+          <Text style={styles.username}>{`@${username} (${reputation})`}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
 export default AvatarHeader;

src/components/index.tsx

@@ -105,7 +105,6 @@ import TextBoxWithCopy from './textBoxWithCopy/textBoxWithCopy';
 import WebViewModal from './webViewModal/webViewModal';
 import OrDivider from './orDivider/orDividerView';
 import PostTranslationModal from './post-translation-modal/postTranslationModal';
-import SimpleHeader from './simpleHeader/simpleHeader';
 
 // Basic UI Elements
 import {
@@ -258,5 +257,4 @@ export {
   WebViewModal,
   OrDivider,
   PostTranslationModal,
-  SimpleHeader,
 };

src/components/profileEditForm/profileEditFormStyles.ts

@@ -12,14 +12,21 @@ export default EStyleSheet.create({
     height: 30,
     marginTop: 8,
   },
+  imgLabel: {
+    marginTop: 8,
+    marginBottom: 8,
+    fontSize: 14,
+    color: '$primaryDarkText',
+    fontWeight: '500',
+  },
   label: {
     marginTop: 8,
     fontSize: 14,
     color: '$primaryDarkText',
     fontWeight: '500',
   },
   formItem: {
-    marginBottom: 20,
+    marginBottom: 12,
   },
   coverImg: {
     borderRadius: 5,

src/components/profileEditForm/profileEditFormView.tsx

@@ -55,35 +55,42 @@ const ProfileEditFormView = ({
         contentContainerStyle={styles.contentContainer}
         enableOnAndroid={true}
       >
-        <TouchableOpacity style={styles.coverImgWrapper} onPress={showImageUploadActions}>
-          <ExpoImage
-            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"
+
+        <View style={styles.formItem}>
+          <Text style={styles.imgLabel}>
+            {intl.formatMessage({
+              id: 'profile.edit.cover_img',
+            })}
+          </Text>
+          <TouchableOpacity style={styles.coverImgWrapper} onPress={showImageUploadActions}>
+            <ExpoImage
+              style={styles.coverImg}
+              source={
+                coverUrl
+                  ? { uri: getResizedImage(coverUrl, 600) }
+                  : isDarkTheme
+                  ? DARK_COVER_IMAGE
+                  : LIGHT_COVER_IMAGE
+              }
             />
-          )}
-
-          <IconButton
-            iconStyle={styles.addIcon}
-            style={styles.addButton}
-            iconType="MaterialCommunityIcons"
-            name="plus"
-            onPress={showImageUploadActions}
-            size={15}
-          />
-        </TouchableOpacity>
+            {isUploading && (
+              <ActivityIndicator
+                style={styles.activityIndicator}
+                color={EStyleSheet.value('$white')}
+                size="large"
+              />
+            )}
 
+            <IconButton
+              iconStyle={styles.addIcon}
+              style={styles.addButton}
+              iconType="MaterialCommunityIcons"
+              name="plus"
+              onPress={showImageUploadActions}
+              size={15}
+            />
+          </TouchableOpacity>
+        </View>
         {formData.map((item) => (
           <View style={styles.formItem} key={item.valueKey}>
             <Text style={styles.label}>

src/config/locales/en-US.json

@@ -304,7 +304,10 @@
       "display_name": "Display Name",
       "about": "About",
       "location": "Location",
-      "website": "Website"
+      "website": "Website",
+      "edit_profile": "Edit Profile",
+      "cover_img": "Cover Image",
+      "profile_img": "Profile Image"
     }
   },
   "settings": {

src/containers/profileEditContainer.js

@@ -82,6 +82,14 @@ class ProfileEditContainer extends Component {
       .then((res) => {
         if (res.data && res.data.url) {
           this.setState({ [action]: res.data.url, isUploading: false, saveEnabled: true });
+        } else if (res && res.url) {
+          this.setState({ [action]: res.url, isUploading: false, saveEnabled: true });
+        } else {
+          throw Error(
+            intl.formatMessage({
+              id: 'alert.unknow_error',
+            }),
+          );
         }
       })
       .catch((error) => {

src/screens/profileEdit/screen/profileEditScreen.js

@@ -6,10 +6,10 @@ import get from 'lodash/get';
 import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import { ProfileEditContainer } from '../../../containers';
 
-import { AvatarHeader, ProfileEditForm } from '../../../components';
+import { AvatarHeader, ProfileEditForm } from '../../../components/index';
 import { OptionsModal } from '../../../components/atoms';
 import styles from './profileEditScreenStyles';
-import { SimpleHeader } from '../../../components/index';
+import { BasicHeader } from '../../../components/index';
 
 class ProfileEditScreen extends PureComponent {
   /* Props
@@ -57,10 +57,9 @@ class ProfileEditScreen extends PureComponent {
           isUploading,
           saveEnabled,
           handleOnSubmit,
-          navigation,
         }) => (
           <View style={styles.container}>
-            <SimpleHeader onBackPress={() => navigation.goBack()} />
+            <BasicHeader title={intl.formatMessage({ id: 'profile.edit.edit_profile' })} />
             <AvatarHeader
               username={get(currentAccount, 'name')}
               name={name}