updated styles

src/components/formInput/view/formInputStyles.js

@@ -20,7 +20,6 @@ export default EStyleSheet.create({
   textInput: {
     flex: 0.7,
     flexDirection: 'row',
-    justifyContent: 'center',
   },
   icon: {
     flex: 0.15,

src/components/formInput/view/formInputView.js

@@ -70,6 +70,7 @@ class FormInputView extends Component {
       iconType,
       wrapperStyle,
       height,
+      inputStyle,
     } = this.props;
     return (
       <View
@@ -99,6 +100,7 @@ class FormInputView extends Component {
         )}
         <View style={styles.textInput}>
           <TextInput
+            style={inputStyle}
             onFocus={() => this._handleOnFocus()}
             autoCapitalize="none"
             secureTextEntry={secureTextEntry}

src/components/profileEditForm/profileEditFormStyles.js

@@ -43,4 +43,27 @@ export default EStyleSheet.create({
     bottom: 0,
     right: 10,
   },
+
+  saveButton: {
+    backgroundColor: '$primaryBlue',
+    width: 55,
+    height: 55,
+    borderRadius: 55 / 2,
+    position: 'absolute',
+    top: -25,
+    right: 10,
+    zIndex: 999,
+    borderWidth: 2,
+    borderColor: '$white',
+  },
+  saveIcon: {
+    color: '$white',
+    textAlign: 'center',
+  },
+
+  input: {
+    fontSize: 14,
+    color: '$primaryDarkText',
+    alignSelf: 'flex-start',
+  },
 });

src/components/profileEditForm/profileEditFormView.js

@@ -23,6 +23,14 @@ const ProfileEditFormView = ({
   isDarkTheme,
 }) => (
   <View style={styles.container}>
+    <IconButton
+      iconStyle={styles.saveIcon}
+      style={styles.saveButton}
+      iconType="MaterialIcons"
+      name="save"
+      onPress={() => alert('upload')}
+      size={30}
+    />
     <KeyboardAwareScrollView
       enableAutoAutomaticScroll={Platform.OS === 'ios'}
       contentContainerStyle={{ flexGrow: 1 }}
@@ -33,11 +41,12 @@ const ProfileEditFormView = ({
           wrapperStyle={styles.formStyle}
           isValid
           height={30}
-          onChange={value => alert('changed')}
+          onChange={value => console.log('changed')}
           placeholder="profile picture url"
           isEditable
           type="text"
           value={avatarUrl}
+          inputStyle={styles.input}
         />
       </View>
 
@@ -47,11 +56,12 @@ const ProfileEditFormView = ({
           wrapperStyle={styles.formStyle}
           isValid
           height={30}
-          onChange={value => alert('changed')}
+          onChange={value => console.log('changed')}
           placeholder="Cover image URL"
           isEditable
           type="text"
           value={coverUrl}
+          inputStyle={styles.input}
         />
       </View>
 
@@ -78,11 +88,12 @@ const ProfileEditFormView = ({
           wrapperStyle={styles.formStyle}
           isValid
           height={30}
-          onChange={value => alert('changed')}
+          onChange={value => console.log('changed')}
           placeholder="Display name"
           isEditable
           type="text"
           value={name}
+          inputStyle={styles.input}
         />
       </View>
 
@@ -92,11 +103,12 @@ const ProfileEditFormView = ({
           wrapperStyle={styles.formStyle}
           isValid
           height={30}
-          onChange={value => alert('changed')}
+          onChange={value => console.log('changed')}
           placeholder="About"
           isEditable
           type="text"
           value={about}
+          inputStyle={styles.input}
         />
       </View>
 
@@ -106,11 +118,12 @@ const ProfileEditFormView = ({
           wrapperStyle={styles.formStyle}
           isValid
           height={30}
-          onChange={value => alert('changed')}
+          onChange={value => console.log('changed')}
           placeholder="Location"
           isEditable
           type="text"
           value={location}
+          inputStyle={styles.input}
         />
       </View>
 
@@ -120,11 +133,12 @@ const ProfileEditFormView = ({
           wrapperStyle={styles.formStyle}
           isValid
           height={30}
-          onChange={value => alert('changed')}
+          onChange={value => console.log('changed')}
           placeholder="Website"
           isEditable
           type="text"
           value={website}
+          inputStyle={styles.input}
         />
       </View>
     </KeyboardAwareScrollView>