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 }) => ( )}