diff --git a/src/components/formInput/view/formInputView.js b/src/components/formInput/view/formInputView.js
index d511ce610..9a2bb2b02 100644
--- a/src/components/formInput/view/formInputView.js
+++ b/src/components/formInput/view/formInputView.js
@@ -27,7 +27,7 @@ class FormInputView extends Component {
super(props);
this.state = {
- value: '',
+ value: props.value || '',
inputBorderColor: '#c1c5c7',
isValid: true,
};
diff --git a/src/components/profileEditForm/profileEditFormStyles.js b/src/components/profileEditForm/profileEditFormStyles.js
index dd5fb8acd..7a3c0b210 100644
--- a/src/components/profileEditForm/profileEditFormStyles.js
+++ b/src/components/profileEditForm/profileEditFormStyles.js
@@ -10,5 +10,37 @@ export default EStyleSheet.create({
formStyle: {
backgroundColor: '$white',
height: 30,
+ marginTop: 8,
+ },
+ label: {
+ fontSize: 14,
+ color: '$primaryDarkText',
+ fontWeight: '500',
+ },
+ formItem: {
+ marginBottom: 24,
+ },
+ coverImg: {
+ borderRadius: 5,
+ height: 60,
+ marginBottom: 12,
+ alignSelf: 'stretch',
+ backgroundColor: '#296CC0',
+ },
+ coverImageWrapper: {},
+ addIcon: {
+ color: '$white',
+ textAlign: 'center',
+ },
+ addButton: {
+ backgroundColor: '$iconColor',
+ width: 20,
+ height: 20,
+ borderRadius: 20 / 2,
+ borderColor: '$white',
+ borderWidth: 1,
+ position: 'absolute',
+ bottom: 0,
+ right: 10,
},
});
diff --git a/src/components/profileEditForm/profileEditFormView.js b/src/components/profileEditForm/profileEditFormView.js
index 9f968d9a9..0b6f35d77 100644
--- a/src/components/profileEditForm/profileEditFormView.js
+++ b/src/components/profileEditForm/profileEditFormView.js
@@ -1,32 +1,132 @@
import React from 'react';
import { withNavigation } from 'react-navigation';
-import { View, Text, Platform } from 'react-native';
+import { View, TouchableOpacity, Image, Text, Platform } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+// Images
+import LIGHT_COVER_IMAGE from '../../assets/default_cover_image.png';
+import DARK_COVER_IMAGE from '../../assets/dark_cover_image.png';
+
// Components
import { FormInput } from '../formInput';
-
+import { IconButton } from '../iconButton';
// Styles
import styles from './profileEditFormStyles';
-const ProfileEditFormView = ({ avatarUrl, coverUrl, name, about, location, website }) => (
+const ProfileEditFormView = ({
+ avatarUrl,
+ coverUrl,
+ name,
+ about,
+ location,
+ website,
+ isDarkTheme,
+}) => (
- Profile picture URL
- alert('changed')}
- placeholder="profile picture url"
- isEditable
- type="username"
- isFirstImage
- value="sex"
- />
+
+ Profile picture URL
+ alert('changed')}
+ placeholder="profile picture url"
+ isEditable
+ type="text"
+ value={avatarUrl}
+ />
+
+
+
+ Cover image URL
+ alert('changed')}
+ placeholder="Cover image URL"
+ isEditable
+ type="text"
+ value={coverUrl}
+ />
+
+
+ alert('upload')}>
+
+
+ alert('upload')}
+ size={15}
+ />
+
+
+
+ Display Name
+ alert('changed')}
+ placeholder="Display name"
+ isEditable
+ type="text"
+ value={name}
+ />
+
+
+
+ About
+ alert('changed')}
+ placeholder="About"
+ isEditable
+ type="text"
+ value={about}
+ />
+
+
+
+ Location
+ alert('changed')}
+ placeholder="Location"
+ isEditable
+ type="text"
+ value={location}
+ />
+
+
+
+ Website
+ alert('changed')}
+ placeholder="Website"
+ isEditable
+ type="text"
+ value={website}
+ />
+
);
diff --git a/src/containers/profileEditContainer.js b/src/containers/profileEditContainer.js
index 42acd8270..401347dbf 100644
--- a/src/containers/profileEditContainer.js
+++ b/src/containers/profileEditContainer.js
@@ -21,12 +21,13 @@ class ProfileEditContainer extends Component {
_handleOnSave = () => {};
render() {
- const { children, currentAccount } = this.props;
+ const { children, currentAccount, isDarkTheme } = this.props;
return (
children &&
children({
currentAccount,
+ isDarkTheme,
})
);
}
@@ -34,6 +35,7 @@ class ProfileEditContainer extends Component {
const mapStateToProps = state => ({
currentAccount: state.account.currentAccount,
+ isDarkTheme: state.application.isDarkTheme,
});
export default connect(mapStateToProps)(ProfileEditContainer);
diff --git a/src/screens/profileEdit/screen/profileEditScreen.js b/src/screens/profileEdit/screen/profileEditScreen.js
index c81c52c4b..4318dcd27 100644
--- a/src/screens/profileEdit/screen/profileEditScreen.js
+++ b/src/screens/profileEdit/screen/profileEditScreen.js
@@ -25,21 +25,22 @@ class ProfileEditScreen extends PureComponent {
render() {
return (
- {({ currentAccount }) => (
+ {({ currentAccount, isDarkTheme }) => (
)}