[Improve] profile edit screen

src/components/editAvatar/editAvatar.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { UserAvatar } from '../userAvatar';
+import { IconButton } from '../iconButton';
+// Styles
+import styles from './editAvatarStyles';
+
+const EditAvatar = ({ username, avatarUrl, showImageUploadActions, isUploading }) => {
+  return (
+    <View style={styles.headerContainer}>
+      <View style={styles.wrapper}>
+        <TouchableOpacity disabled={isUploading} onPress={showImageUploadActions}>
+          <UserAvatar
+            key={`${avatarUrl}-${username}`}
+            noAction
+            size="xxl"
+            username={username}
+            avatarUrl={avatarUrl}
+          />
+          <IconButton
+            isLoading={isUploading}
+            color={'white'}
+            iconStyle={styles.addIcon}
+            style={styles.addButton}
+            iconType="MaterialIcons"
+            name="edit"
+            onPress={showImageUploadActions}
+            size={18}
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+export default EditAvatar;

src/components/avatarHeader/avatarHeaderStyles.js → src/components/editAvatar/editAvatarStyles.ts

@@ -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,23 +30,24 @@ export default EStyleSheet.create({
     fontWeight: 'bold',
   },
   username: {
-    color: '$white',
-    fontSize: 12,
     marginTop: 4,
+    fontSize: 16,
+    color: '$primaryDarkText',
+    fontWeight: '600',
   },
   addIcon: {
-    color: '$white',
+    color: 'white',
     textAlign: 'center',
   },
   addButton: {
-    backgroundColor: '$iconColor',
-    width: 20,
-    height: 20,
-    borderRadius: 20 / 2,
+    backgroundColor: '$primaryBlue',
+    width: 30,
+    height: 30,
+    borderRadius: 30 / 2,
     borderColor: '$white',
     borderWidth: 1,
     position: 'absolute',
     bottom: 0,
-    left: 45,
+    left: 90,
   },
 });

src/components/index.tsx

@@ -1,4 +1,4 @@
-import { AvatarHeader } from './avatarHeader';
+import EditAvatar from './editAvatar/editAvatar';
 import { AccountsBottomSheet } from './accountsBottomSheet';
 import { BasicHeader } from './basicHeader';
 import { BoostIndicatorAnimation, PulseAnimation, SpinIndicator } from './animations';
@@ -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 {
@@ -133,7 +132,7 @@ import {
 } from './basicUIElements';
 
 export {
-  AvatarHeader,
+  EditAvatar,
   AccountsBottomSheet,
   BasicHeader,
   BeneficiaryModal,
@@ -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,
@@ -30,14 +37,14 @@ export default EStyleSheet.create({
   },
   coverImageWrapper: {},
   addIcon: {
-    color: '$white',
+    color: 'white',
     textAlign: 'center',
   },
   addButton: {
-    backgroundColor: '$iconColor',
-    width: 20,
-    height: 20,
-    borderRadius: 20 / 2,
+    backgroundColor: '$primaryBlue',
+    width: 30,
+    height: 30,
+    borderRadius: 30 / 2,
     borderColor: '$white',
     borderWidth: 1,
     position: 'absolute',

src/components/profileEditForm/profileEditFormView.tsx

@@ -25,7 +25,7 @@ interface ProfileEditFormProps {
   coverUrl: string;
   formData: any;
   handleOnItemChange: () => void;
-  handleOnSubmit: () => void;
+  handleOnSubmit: ({ goBack }: { goBack: boolean }) => void;
   intl: any;
   isDarkTheme: boolean;
   isLoading: boolean;
@@ -55,35 +55,39 @@ 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"
-            />
-          )}
-
-          <IconButton
-            iconStyle={styles.addIcon}
-            style={styles.addButton}
-            iconType="MaterialCommunityIcons"
-            name="plus"
+        <View style={styles.formItem}>
+          <Text style={styles.imgLabel}>
+            {intl.formatMessage({
+              id: 'profile.edit.cover_img',
+            })}
+          </Text>
+          <TouchableOpacity
+            disabled={isUploading}
+            style={styles.coverImgWrapper}
             onPress={showImageUploadActions}
-            size={15}
-          />
-        </TouchableOpacity>
-
+          >
+            <ExpoImage
+              style={styles.coverImg}
+              source={
+                coverUrl
+                  ? { uri: getResizedImage(coverUrl, 600) }
+                  : isDarkTheme
+                  ? DARK_COVER_IMAGE
+                  : LIGHT_COVER_IMAGE
+              }
+            />
+            <IconButton
+              color={'white'}
+              isLoading={isUploading}
+              iconStyle={styles.addIcon}
+              style={styles.addButton}
+              onPress={showImageUploadActions}
+              iconType="MaterialIcons"
+              name="edit"
+              size={18}
+            />
+          </TouchableOpacity>
+        </View>
         {formData.map((item) => (
           <View style={styles.formItem} key={item.valueKey}>
             <Text style={styles.label}>
@@ -110,7 +114,7 @@ const ProfileEditFormView = ({
         <Animated.View style={styles.floatingContainer} entering={BounceInRight}>
           <MainButton
             style={{ width: isLoading ? null : 120, marginBottom: 24, alignSelf: 'flex-end' }}
-            onPress={handleOnSubmit}
+            onPress={() => handleOnSubmit({ goBack: true })}
             iconName="save"
             iconType="MaterialIcons"
             iconColor="white"

src/components/profileSummary/view/profileSummaryStyles.js

@@ -11,12 +11,11 @@ export default EStyleSheet.create({
   },
   longImage: {
     borderRadius: 5,
-    height: 60,
+    height: 65,
     marginTop: 16,
     marginBottom: 12,
     alignSelf: 'stretch',
     maxWidth: '$deviceWidth - 24',
-    backgroundColor: '#296CC0',
   },
   footer: {
     width: '$deviceWidth - 14',

src/components/profileSummary/view/profileSummaryView.js

@@ -19,17 +19,14 @@ import DARK_COVER_IMAGE from '../../../assets/dark_cover_image.png';
 // Components
 import { TextWithIcon } from '../../basicUIElements';
 import { PercentBar } from '../../percentBar';
-import { IconButton } from '../../iconButton';
 import { DropdownButton } from '../../dropdownButton';
 
 // Utils
 import { makeCountFriendly } from '../../../utils/formatter';
-import { getCoverImageUrl } from '../../../utils/image';
+import { proxifyImageSrc } from '@ecency/render-helper';
 
 // Styles
 import styles from './profileSummaryStyles';
-import { TextButton } from '../../buttons';
-import { Icon } from '../..';
 import getWindowDimensions from '../../../utils/getWindowDimensions';
 
 const DEVICE_WIDTH = getWindowDimensions().width;
@@ -127,6 +124,7 @@ class ProfileSummaryView extends PureComponent {
     const rcPowerText = `Resource Credits: ${percentRC}% ${rcPowerHoursText || ''}`;
     const link = get(about, 'website', '');
     const location = get(about, 'location', '');
+    const coverImage = get(about, 'cover_image', '');
 
     const ABOUT_DATA = [
       { id: 1, text: date, icon: 'calendar' },
@@ -141,7 +139,12 @@ class ProfileSummaryView extends PureComponent {
     const followButtonText = intl.formatMessage({
       id: !isFollowing ? 'user.follow' : 'user.unfollow',
     });
-    let coverImageUrl = getCoverImageUrl(username);
+    let coverImageUrl = proxifyImageSrc(
+      coverImage,
+      360,
+      240,
+      Platform.OS !== 'ios' ? 'webp' : 'match',
+    );
 
     if (!coverImageUrl) {
       coverImageUrl = isDarkTheme
@@ -185,10 +188,11 @@ class ProfileSummaryView extends PureComponent {
           )}
         </View>
         <ExpoImage
+          key={`${new Date()}`}
           style={styles.longImage}
           source={coverImageUrl}
           contentFit="cover"
-          defaultSource={isDarkTheme ? DARK_COVER_IMAGE : LIGHT_COVER_IMAGE}
+          placeholder={isDarkTheme ? DARK_COVER_IMAGE : LIGHT_COVER_IMAGE}
         />
         <TouchableOpacity
           onPress={() =>