password change screen modified

HeligPfleigh · Jun 4, 2018 · 05bd667 · 05bd667
1 parent 01a57bd
commit 05bd667
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 40 deletions.
diff --git a/src/container/ChangePasswordScreen/index.js b/src/container/ChangePasswordScreen/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Content, Text, Form, Button, View, Toast } from "native-base";
+import { Content, Text, Form, Button, View, Toast, Header, Left, Right, Body, Icon, Title } from "native-base";
 import { Field, reduxForm, formValueSelector } from "redux-form";
 import { compose, graphql } from "react-apollo";
 import { connect } from "react-redux";
@@ -71,9 +71,10 @@ class ChangePassword extends Component {
         type: "success"
       });
       this.props.dispatch(utils.createAction(CHANGE_PASSWORD_SUCCESS));
-      setTimeout( () => this.props.logOut(this.props.navigation), 300);
+      setTimeout(() => this.props.logOut(this.props.navigation), 300);
     } catch (error) {
-      const errorMessage = error && error.graphQLErrors && error.graphQLErrors[0].message || "Đổi password không thành công";
+      const errorMessage =
+        (error && error.graphQLErrors && error.graphQLErrors[0].message) || "Đổi password không thành công";
       Toast.show({
         text: errorMessage,
         duration: 2500,
@@ -89,9 +90,19 @@ class ChangePassword extends Component {
   render() {
     const { handleSubmit, valid, submitting, pristine } = this.props;
     return (
-      <Layout navigation={this.props.navigation}>
-        <Content padder style={{ backgroundColor: "#ccc" }}>
-          <Text style={{ textAlign: "center" }}>{"Đổi Mật Khẩu"}</Text>
+      <Layout navigation={this.props.navigation} >
+        <Header>
+          <Left>
+            <Button transparent onPress={() => this.props.navigation.goBack()}>
+              <Icon name="ios-arrow-back" />
+            </Button>
+          </Left>
+          <Body>
+            <Title> Đổi mật khẩu </Title>
+          </Body>
+          <Right />
+        </Header>
+        <Content padder style={{ backgroundColor: "rgba(85,186,255, 1)" }}>
           {this.formRender()}
           <View padder style={styles.btnLoginWrapper}>
             <Button

diff --git a/src/container/FriendProfileScreen/Details/Friends.js b/src/container/FriendProfileScreen/Details/Friends.js
@@ -7,13 +7,9 @@ class Friends extends Component {
     return (
       <Card>
         <CardItem>
-          <Body>
-          <View style={{ margin: 20 }}>
-          <Text > <Icon name="ios-card" style={{ fontSize: 13, lineHeight: 35  }} /> Bạn bè: {this.props.info.totalFriends} người </Text>
-
-      </View>
-      </Body>
-      </CardItem>
+          <Icon name="ios-card" />
+          <Text> Bạn bè: {this.props.info.totalFriends} người </Text>
+        </CardItem>
       </Card>
     );
   }

diff --git a/src/container/FriendProfileScreen/Details/Setting.js b/src/container/FriendProfileScreen/Details/Setting.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Text, Icon, Button } from "native-base";
+import { Text, Icon, Button, Card, CardItem } from "native-base";
 import { View, Modal } from "react-native";
 import { connect } from "react-redux";
 import SettingOptions from "./SettingOptions";
@@ -18,7 +18,7 @@ class Setting extends Component {
   edit() {
     this.setModalVisible(true);
   }
-  passwordChange(){
+  passwordChange() {
     this.props.dispatch(
       NavigationActions.navigate({
         routeName: "ChangePasswordScreen"
@@ -33,33 +33,35 @@ class Setting extends Component {
     const { userInfo } = this.props;
     if (info.username === userInfo.username) {
       return (
-        <View style={{ margin: 10 }}>
-          <Modal animationType="slide" transparent={false} visible={this.state.modalVisible}>
-            <View style={{ marginTop: 22 }}>
-              <View>
-                <Button
-                  transparent
-                  info
-                  onPress={() => {
-                    this.setModalVisible(!this.state.modalVisible);
-                  }}
-                >
-                  <Icon name="ios-backspace-outline" />
-                </Button>
+        <Card style={{ margin: 10 }}>
+          <CardItem style={{flexDirection:"column"}}>
+            <Modal animationType="slide" transparent={false} visible={this.state.modalVisible}>
+              <View style={{ marginTop: 22 }}>
+                <View>
+                  <Button
+                    transparent
+                    info
+                    onPress={() => {
+                      this.setModalVisible(!this.state.modalVisible);
+                    }}
+                  >
+                    <Icon name="ios-backspace-outline" />
+                  </Button>
 
-                <SettingOptions close={close}/>
+                  <SettingOptions close={close} />
+                </View>
               </View>
-            </View>
-          </Modal>
-          <Button iconLeft light onPress={this.edit.bind(this)}>
-            <Icon name="ios-construct-outline" />
-            <Text>Cập nhật thông tin</Text>
-          </Button>
-          <Button iconLeft light onPress={this.passwordChange.bind(this)}>
-            <Icon name="ios-build-outline" />
-            <Text> Đổi mật khẩu </Text>
-          </Button>
-        </View>
+            </Modal>
+            <Button iconLeft light onPress={this.edit.bind(this)}>
+              <Icon name="ios-construct-outline" />
+              <Text>Cập nhật thông tin</Text>
+            </Button>
+            <Button iconLeft light onPress={this.passwordChange.bind(this)} style={{ marginTop: 10 }}>
+              <Icon name="ios-build-outline" />
+              <Text> Đổi mật khẩu </Text>
+            </Button>
+          </CardItem>
+        </Card>
       );
     } else {
       return null;