From aa53ef19de7be08127a852d20c84078a0bb1942c Mon Sep 17 00:00:00 2001
From: fauquezrodolphe <fauquez.rodolphe@clintal.com>
Date: Mon, 29 Jan 2018 01:38:53 +0000
Subject: [PATCH] Merged in CLT-728 (pull request #63)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CLT-728

* 1. change grey color in Content theme to the true V3 grey color, and used it for login/register backgrund instead of light blue

* 2.
    -Change default date as 1990;01;01 only in Register 3 (not in ProfileScreen because the user already choosed his birthday in Register3 before)
    -removed border in date in Register3 and ProfileScreen

* 3.
    - Add icon mail/password from V3 and replaced default icons in LoginScreen by them
    - icon/field aligned

* 4.
    -Added Grey background for email item
    -Aligned items in Profile Screen (same height for each items)

* changed 修正 to 修正する in Profile Screen

* -Reduced a little creditcard font size (user infos)
    -

* update default birthday value in registerForm.js

* refacto to camelcase var names in Images.js
---
 .../CreditCardInformationComponent.js         |  18 ++++-----
 App/Containers/ChatScreen.js                  |   8 ++--
 .../ConsultationHistoryListScreen.js          |   2 +-
 .../ConsultationIntroductionStep2Screen.js    |   8 ++--
 .../ConsultationIntroductionStep3Screen.js    |   6 +--
 .../ConsultationIntroductionStep4Screen.js    |  12 +++---
 App/Containers/LoginScreen.js                 |  24 +++++++++---
 App/Containers/ProfileScreen.js               |  13 +++++--
 App/Containers/RegisterStep1Screen.js         |   2 +-
 App/Containers/RegisterStep2Screen.js         |   2 +-
 App/Containers/RegisterStep3Screen.js         |   4 +-
 .../Styles/ConsultationScreenStyles.js        |   4 ++
 App/Containers/Styles/LoginScreenStyles.js    |  16 +++++++-
 App/Containers/Styles/ProfileScreenStyles.js  |  32 +++++++++++++---
 App/Images/icon_mail@2x.png                   | Bin 0 -> 1431 bytes
 App/Images/icon_mail@3x.png                   | Bin 0 -> 2155 bytes
 App/Images/icon_password@2x.png               | Bin 0 -> 1168 bytes
 App/Images/icon_password@3x.png               | Bin 0 -> 1645 bytes
 App/Models/RegisterForm.js                    |   2 +-
 App/Themes/Images.js                          |  36 ++++++++++--------
 .../native-base-theme/components/Content.js   |   2 +-
 .../native-base-theme/components/Item.js      |   1 +
 22 files changed, 124 insertions(+), 68 deletions(-)
 create mode 100644 App/Images/icon_mail@2x.png
 create mode 100644 App/Images/icon_mail@3x.png
 create mode 100644 App/Images/icon_password@2x.png
 create mode 100644 App/Images/icon_password@3x.png

diff --git a/App/Components/CreditCardInformationComponent.js b/App/Components/CreditCardInformationComponent.js
index e6d77fff5..c8319f93f 100644
--- a/App/Components/CreditCardInformationComponent.js
+++ b/App/Components/CreditCardInformationComponent.js
@@ -1,10 +1,7 @@
 import React from 'react'
-import {
-  Text,
-  H3,
-} from 'native-base'
+import {Text} from 'native-base'
 import {View} from 'react-native'
-import Styles from "../Containers/Styles/ConsultationScreenStyles";
+import Styles from '../Containers/Styles/ConsultationScreenStyles'
 
 function CreditCardInformationComponent({creditCard}) {
   const {hasValidCreditCard} = creditCard
@@ -12,22 +9,21 @@ function CreditCardInformationComponent({creditCard}) {
     return (
       <View>
         <View>
-          <H3>使用するクレジットカード</H3>
+          <Text>使用するクレジットカード</Text>
         </View>
         <View>
           <View>
             <View style={Styles.priceContainer}>
-              <Text note style={{flex: 1}}>・ブランド</Text><Text style={{flex: 1}}>{creditCard.brand}</Text>
+              <Text note style={{flex: 1}}>・ブランド</Text><Text style={Styles.creditCardInfosText}>{creditCard.brand}</Text>
             </View>
             <View style={Styles.priceContainer}>
-              <Text note style={{flex: 1}}>・下4桁</Text><Text style={{flex: 1}}>{creditCard.last4}</Text>
+              <Text note style={{flex: 1}}>・下4桁</Text><Text style={Styles.creditCardInfosText}>{creditCard.last4}</Text>
             </View>
             <View style={Styles.priceContainer}>
-              <Text note style={{flex: 1}}>・有効期限</Text><Text
-              style={{flex: 1}}>{creditCard.expYear}年 {creditCard.expMonth}月</Text>
+              <Text note style={{flex: 1}}>・有効期限</Text><Text style={Styles.creditCardInfosText}>{creditCard.expYear}年 {creditCard.expMonth}月</Text>
             </View>
             <View style={Styles.priceContainer}>
-              <Text note style={{flex: 1}}>・カード名義</Text><Text style={{flex: 1}}>{creditCard.name}</Text>
+              <Text note style={{flex: 1}}>・カード名義</Text><Text style={Styles.creditCardInfosText}>{creditCard.name}</Text>
             </View>
           </View>
         </View>
diff --git a/App/Containers/ChatScreen.js b/App/Containers/ChatScreen.js
index 66ac8c7c6..c73173d54 100644
--- a/App/Containers/ChatScreen.js
+++ b/App/Containers/ChatScreen.js
@@ -383,7 +383,7 @@ class ChatScreen extends Component {
                           <Image
                             style={ChatScreenStyles.iconHospitalDoctorSearchSlide}
                             resizeMode={'stretch'}
-                            source={Images.icon_hospital}
+                            source={Images.iconHospital}
                           />
                         </Col>
                         <Col size={81}>
@@ -413,7 +413,7 @@ class ChatScreen extends Component {
                             <Image
                               style={ChatScreenStyles.iconDoctorSearchSlide}
                               resizeMode={'stretch'}
-                              source={Images.placemarker}
+                              source={Images.placeMarker}
                             />
                           </Row>
                         </Col>
@@ -443,7 +443,7 @@ class ChatScreen extends Component {
             >
               <Image
                 style={ChatScreenStyles.iconDoctorSearchSlideButtonLeft}
-                source={Images.goto_right_slide}
+                source={Images.gotoRightSlide}
               />
             </TouchableOpacity>
             <TouchableOpacity
@@ -452,7 +452,7 @@ class ChatScreen extends Component {
             >
               <Image
                 style={ChatScreenStyles.iconDoctorSearchSlideButtonRight}
-                source={Images.goto_right_slide}
+                source={Images.gotoRightSlide}
               />
             </TouchableOpacity>
           </View>
diff --git a/App/Containers/ConsultationHistoryListScreen.js b/App/Containers/ConsultationHistoryListScreen.js
index c1bb1a9d3..5181d5d57 100644
--- a/App/Containers/ConsultationHistoryListScreen.js
+++ b/App/Containers/ConsultationHistoryListScreen.js
@@ -67,7 +67,7 @@ class ConsultationHistoryListScreen extends Component {
               </Content>
               :
               <View style={Styles.noHistoryContainer}>
-                <Image source={Images.icon_hospital} />
+                <Image source={Images.iconHospital} />
                 <Text style={Styles.noHistoryText}>
                   相談の履歴はありません。
                 </Text>
diff --git a/App/Containers/ConsultationIntroductionStep2Screen.js b/App/Containers/ConsultationIntroductionStep2Screen.js
index 330acf872..dd3a8ac7d 100644
--- a/App/Containers/ConsultationIntroductionStep2Screen.js
+++ b/App/Containers/ConsultationIntroductionStep2Screen.js
@@ -40,10 +40,10 @@ class ConsultationIntroductionStep2Screen extends Component {
               <Text style={Styles.centerTextBlueSubTitle}>医師紹介サービスのメリット</Text>
               <Text style={Styles.centerTextGrey}>医師紹介サービスには、下記4つのメリットがあります。</Text>
             </View>
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_merit_01} />
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_merit_02} />
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_merit_03} />
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_merit_04} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationMerit01} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationMerit02} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationMerit03} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationMerit04} />
             <PositiveButton
               text='次へ'
               onPress={() => this.onApplyConsultationPress()}
diff --git a/App/Containers/ConsultationIntroductionStep3Screen.js b/App/Containers/ConsultationIntroductionStep3Screen.js
index a539ae840..8e5420b88 100644
--- a/App/Containers/ConsultationIntroductionStep3Screen.js
+++ b/App/Containers/ConsultationIntroductionStep3Screen.js
@@ -38,9 +38,9 @@ class ConsultationIntroductionStep3Screen extends Component {
               <Text style={Styles.centerTextBlueSubTitle}>ユーザーの声</Text>
               <Text style={Styles.centerTextGrey}>実際に医師受診で、治療方法が変わった安心感があったという声をいただいております。</Text>
             </View>
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_voice_01} />
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_voice_02} />
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_voice_03} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationVoice01} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationVoice02} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationVoice03} />
             <View style={Styles.space} />
             <PositiveButton
               text='次へ'
diff --git a/App/Containers/ConsultationIntroductionStep4Screen.js b/App/Containers/ConsultationIntroductionStep4Screen.js
index 98926f263..efb7b1f54 100644
--- a/App/Containers/ConsultationIntroductionStep4Screen.js
+++ b/App/Containers/ConsultationIntroductionStep4Screen.js
@@ -38,12 +38,12 @@ class ConsultationIntroductionStep4Screen extends Component {
             <View style={Styles.subTitleContainer}>
               <Text style={Styles.centerTextBlueSubTitle}>ご利用の流れ</Text>
             </View>
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_flow_01} />
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_flow_02} />
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_flow_03} />
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.icon_consultation_arrow_down} />
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_flow_04} />
-            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultation_flow_05} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationFlow01} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationFlow02} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationFlow03} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.iconConsultationArrowDown} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationFlow04} />
+            <Image style={Styles.imageIntroduction} resizeMode={'contain'} source={Images.consultationFlow05} />
             <View style={Styles.space} />
           </Content>
           <Footer style={Styles.transparentBackground}>
diff --git a/App/Containers/LoginScreen.js b/App/Containers/LoginScreen.js
index c27e0cf55..1ab016d76 100644
--- a/App/Containers/LoginScreen.js
+++ b/App/Containers/LoginScreen.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {
-  ImageBackground,
   Keyboard,
   LayoutAnimation,
   Linking,
   Platform,
   View,
+  Image,
 } from 'react-native'
 import {
   Button,
@@ -27,7 +27,8 @@ import {
 } from 'native-base'
 import {
   Metrics,
-  Colours
+  Colours,
+  Images,
 } from '../Themes'
 import { connect } from 'react-redux'
 import Styles from './Styles/LoginScreenStyles'
@@ -158,13 +159,20 @@ class LoginScreen extends React.Component {
           </Body>
           <Right/>
         </Header>
-        <Content clintalWhiteBackground>
+        <Content clintalLightGreyBackground>
           <View style={Styles.loginTitleBox}>
             <NBText>クリンタル会員の方</NBText>
           </View>
           <Form clintalWhite clintalBorder>
-            <Item fixedLabel clintalRegistration success={!errorMap.username}>
-              <Icon active name='mail'/>
+            <Item
+              fixedLabel
+              clintalRegistration
+              success={!errorMap.username}>
+              <Image
+                source={Images.iconMail}
+                style={Styles.icon}
+                resizeMode={'center'}
+              />
               <Input
                 placeholderTextColor={Colours.placeholder}
                 placeholder="メールアドレスを入力してください"
@@ -182,7 +190,11 @@ class LoginScreen extends React.Component {
               />
             </Item>
             <Item fixedLabel clintalRegistration clintalNoBorder>
-              <Icon active name='lock'/>
+              <Image
+                source={Images.iconPassword}
+                style={Styles.icon}
+                resizeMode={'center'}
+              />
               <Input
                 placeholderTextColor={Colours.placeholder}
                 placeholder="パスワードを入力してください"
diff --git a/App/Containers/ProfileScreen.js b/App/Containers/ProfileScreen.js
index b3ca3ae1e..575e46939 100644
--- a/App/Containers/ProfileScreen.js
+++ b/App/Containers/ProfileScreen.js
@@ -143,12 +143,12 @@ class ProfileScreen extends React.Component {
       <Container>
         <Content>
           <Form>
-            <Item style={Styles.item} inlineLabel error={false}>
+            <Item style={Styles.itemDisabled} error={false}>
               <Label style={Styles.label}>メールアドレス</Label>
               <Input
                 style={Styles.input}
                 multiline={true}
-                numberOfLines = {3}
+                numberOfLines={3}
                 keyboardType="email-address"
                 ref="username"
                 value={username}
@@ -164,6 +164,7 @@ class ProfileScreen extends React.Component {
             <Item style={Styles.item} inlineLabel error={!!errorMap.lastName}>
               <Label style={Styles.label}>名前（姓）</Label>
               <Input
+                style={Styles.input}
                 clearButtonMode="while-editing"
                 ref={ref => (this.lastName = ref)}
                 value={lastName}
@@ -179,6 +180,7 @@ class ProfileScreen extends React.Component {
             <Item style={Styles.item} inlineLabel error={!!errorMap.firstName}>
               <Label style={Styles.label}>名前（名）</Label>
               <Input
+                style={Styles.input}
                 clearButtonMode="while-editing"
                 ref={ref => (this.firstName = ref)}
                 value={firstName}
@@ -193,7 +195,8 @@ class ProfileScreen extends React.Component {
             </Item>
             <Item style={Styles.item} inlineLabel>
               <Label style={Styles.label}>性別</Label>
-              <Picker style={{flex: 1,}}
+              <Picker
+                style={Styles.dateText}
                 mode='dropdown'
                 placeholder='選択してください'
                 selectedValue={this.state.gender}
@@ -206,6 +209,7 @@ class ProfileScreen extends React.Component {
             <Item style={Styles.item} inlineLabel>
               <Label style={Styles.label}>生年月日</Label>
               <DatePicker
+                customStyles={Styles.dateText}
                 date={birthdate} // default is (now - 50 years), if the user let the default value in registerScreenStep3
                 mode="date"
                 format="YYYY-MM-DD"
@@ -220,6 +224,7 @@ class ProfileScreen extends React.Component {
             <Item style={Styles.item} error={!!errorMap.postalCode} inlineLabel>
               <Label style={Styles.label}>郵便番号</Label>
               <Input
+                style={Styles.input}
                 clearButtonMode="while-editing"
                 ref={ref => (this.postalCode = ref)}
                 value={postalCode}
@@ -237,7 +242,7 @@ class ProfileScreen extends React.Component {
         </Content>
         <Footer style={{ marginBottom: this.state.keyboardHeight }}>
           <PositiveButton
-            text='修正'
+            text='修正する'
             disabled={!(!errorMap.firstName && !errorMap.lastName && !errorMap.firstName)}
             onPress={this.handlePressNext}
           />
diff --git a/App/Containers/RegisterStep1Screen.js b/App/Containers/RegisterStep1Screen.js
index 5af60eca5..92ce0b73c 100644
--- a/App/Containers/RegisterStep1Screen.js
+++ b/App/Containers/RegisterStep1Screen.js
@@ -154,7 +154,7 @@ class RegisterStep1Screen extends React.Component {
           <Right>
           </Right>
         </Header>
-        <Content clintalWhiteBackground>
+        <Content clintalLightGreyBackground>
           <View style={Styles.loginTitleBox}>
             <NBText>フォームに入力して登録</NBText>
           </View>
diff --git a/App/Containers/RegisterStep2Screen.js b/App/Containers/RegisterStep2Screen.js
index 789180895..91e972e72 100644
--- a/App/Containers/RegisterStep2Screen.js
+++ b/App/Containers/RegisterStep2Screen.js
@@ -168,7 +168,7 @@ class RegisterStep2Screen extends Component {
           <Right>
           </Right>
         </Header>
-        <Content clintalWhiteBackground>
+        <Content clintalLightGreyBackground>
           <Image source={Images.progress2of3} style={[Styles.stepProgressImage]}/>
           <Form clintalWhite clintalBorder>
             <Item fixedLabel clintalRegistration error={!!errorMap.lastName}>
diff --git a/App/Containers/RegisterStep3Screen.js b/App/Containers/RegisterStep3Screen.js
index 4a7262a26..e5e24a664 100644
--- a/App/Containers/RegisterStep3Screen.js
+++ b/App/Containers/RegisterStep3Screen.js
@@ -180,7 +180,7 @@ class RegisterStep3Screen extends React.Component {
           <Right>
           </Right>
         </Header>
-        <Content clintalWhiteBackground>
+        <Content clintalLightGreyBackground>
           <Image source={Images.progress3of3} style={[Styles.stepProgressImage]}/>
           <Form clintalWhite clintalBorder>
             <Item fixedLabel clintalRegistration>
@@ -195,7 +195,9 @@ class RegisterStep3Screen extends React.Component {
             <Item fixedLabel clintalRegistration>
               <Label>生年月日</Label>
               <DatePicker
+                clintalNoBorder
                 style={Styles.datePicker}
+                customStyles={Styles.dateText}
                 date={birthdate}
                 mode="date"
                 format="YYYY-MM-DD"
diff --git a/App/Containers/Styles/ConsultationScreenStyles.js b/App/Containers/Styles/ConsultationScreenStyles.js
index e928d77b7..bc84282ed 100755
--- a/App/Containers/Styles/ConsultationScreenStyles.js
+++ b/App/Containers/Styles/ConsultationScreenStyles.js
@@ -250,6 +250,10 @@ export default StyleSheet.create({
   space: {
     margin: Metrics.mediumBaseMargin,
   },
+  creditCardInfosText: {
+    fontSize: 14,
+    flex: 1,
+  },
   noHistoryContainer: {
     flex: 1,
     height: Metrics.screenHeight,
diff --git a/App/Containers/Styles/LoginScreenStyles.js b/App/Containers/Styles/LoginScreenStyles.js
index 708c3417c..eff4f548c 100755
--- a/App/Containers/Styles/LoginScreenStyles.js
+++ b/App/Containers/Styles/LoginScreenStyles.js
@@ -8,7 +8,7 @@ import {
   Fonts
 } from '../../Themes'
 
-export default StyleSheet.create({
+export default{
   imageBackground: {
     flex: 1,
   },
@@ -106,4 +106,16 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-})
+  dateText: {
+    dateInput: {
+      borderWidth: 0,
+    },
+    dateText: {
+      fontSize: 18,
+      alignSelf: 'flex-start',
+    },
+  },
+  icon: {
+    width: 25,
+  },
+}
diff --git a/App/Containers/Styles/ProfileScreenStyles.js b/App/Containers/Styles/ProfileScreenStyles.js
index 1acafd8e7..abaa5e5dc 100644
--- a/App/Containers/Styles/ProfileScreenStyles.js
+++ b/App/Containers/Styles/ProfileScreenStyles.js
@@ -1,17 +1,37 @@
-import { StyleSheet } from 'react-native'
-import { Metrics } from '../../Themes'
+import { Metrics, Colours } from '../../Themes'
 
-const labelWidth = Metrics.screenWidth * 0.34
-export default StyleSheet.create({
+const labelWidth = Metrics.screenWidth * 0.35
+export default {
   item: {
     paddingTop: Metrics.baseMargin,
     paddingBottom: Metrics.baseMargin,
+    minHeight: Metrics.tripleSection,
+    marginLeft: 0,
+    paddingLeft: Metrics.mediumBaseMargin,
+  },
+  itemDisabled: {
+    paddingTop: Metrics.baseMargin,
+    paddingBottom: Metrics.baseMargin,
+    minHeight: Metrics.tripleSection,
+    marginLeft: 0,
+    paddingLeft: Metrics.mediumBaseMargin,
+    backgroundColor: Colours.clintalLightGrey,
   },
   label: {
+    paddingTop: Metrics.baseMargin,
     width: labelWidth,
   },
   input: {
     width: Metrics.screenWidth - labelWidth,
     marginRight: Metrics.smallMargin,
-  }
-})
+  },
+  dateText: {
+    dateInput: {
+      borderWidth: 0,
+    },
+    dateText: {
+      fontSize: 18,
+      alignSelf: 'flex-start',
+    },
+  },
+}
diff --git a/App/Images/icon_mail@2x.png b/App/Images/icon_mail@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..29a0a7ffd82de807074d61ff3d92be24bdc68050
GIT binary patch
literal 1431
zcmV;I1!($-P)<h;3K|Lk000e1NJLTq001oj001Hg1^@s6%S=#D00001b5ch_0Itp)
z=>Px)QAtEWR9Fe^m}_WUMHI(p=5990risL~`4H5KAhAJ%)G94jAs8&iA{sO_cbmPf
z((G=EwJL}pe(*yP{h(j!K8&r|cUfq)P@}<0v{Zbcs8KOh5Gz=yO%<t|WFPmA|FgSy
z+1;3!CYyGJ4&0r&^EmUHGv}O{yPW0I!FYU4YC6-+gzPX3X_)nwJ?A_rIGc11sBdx3
zCGl|j84g4{)6)0`#S3^E@CZCrk+|R~DOm!zr*2x?c2`$dS4NPA0emt~*oeGpfQd;O
z(#oW4Mrr-z>EAw}I!kgkeGenGV>x9hjg3f^)m^ez&ZHGYHRgmUTVWQPq?FvkB<n!K
zDzlMtvK_1;B^3U!Ye0Rkxb0GueIt>(p~Yi@3t>p96wNt%AR4`nOhJd13nsxio2J!Z
zI~ok#IP3|=b{7p=@uEKv)d2jiWV|sCoEDrXXkt(aDeLqCY>tK}q2~|LnC*l*8<YA=
z-jR?83n}ZH8&RoWQj|9keo>e5HJE}eD>us_e=sBzTa?N`r0#O4TRG!?*hmgsvIeZ$
z;R{B`g26G0EEP|qqocI|J_3_`oOU=n0f3>{m=NLxyq7p!8FbE`hcx@s7AE$PspJU(
z&hAXesV@)2Vr`YA_D7?ue>wN(r<{v>AvX(*xn|&3&$~5s7dE&AnC6}XZ2}Ey{Rai(
zTd|D4Vc-Vrz8+h6Lo%sPydH_%YW7=B?g_=)^_1}~WOqQeEq{0<EQ<1o+hKooKH2j^
z(*UPtA6KmWb}aRGXr01e4Fq4EPRo=2Q0)Hsgf6DuABc1@J@o~Y(u)38JZU)KAC?-v
z**Vbv&O$O4gr<Q`Rh_J}Sv%pnlV)Ur<`G%+xG!|*iG_sE*X9dFcVg>~p&g+X4$e85
z!_T!=rE}13|9ZZ0X8nIcQ^!a9`p&IwZN3BcbsPtOF8sj54L!5ZGZOO0<MHBHYRaCI
zQ-tsZ!Y?C~?uXOmA_OCcV;?v0)wey?-+yM#pns`Y6f}+N>FG(jwf+a8mi>4wI4HK)
zJ~f?sAK)biRQX(Qj*r)QL(!wUWJ72xgf#4401<18!?DE-v*knQye}G>Mv|krH2bp(
z7emla5jfj4HIw>kIDGh;IWwTb8$8lFd-}}haJX(Vt$d$pO#X~p+rAreFX~o#QP3uk
zQ&R(o<@W*L0v?*M4$t-J%*=#8bZEWVk8)o)-ocES37AzoqHR4b9MuWj-g;fyc29BN
z#g>-@O~PF}>?ag%*#MZc*n$**EU0eQ4gG{?B=!LH@dP5>Mkf84<Z=z{ITs-$JI{q>
zBSP93^;t?<GBiy#sBQbv#%#B6$-l>I&Ris&XnM>WjP1d->nNhbDl7=DfCGc^pK7f9
zX18P8cT0ga$1Dq)glJmt`4*dHBTh8Zoasz9DfL%i2YH9Xm4LI4T5L5NcB$%FbMmF;
zw57{VeSLj&@br2Ek$o_Oy(r_N#d2W~AyP;_>~yG4<?VUd^DSG`#RP86{v22MU~!!y
z#9r49^~p*BlkAE@lR)=?J)$V$Au1z6?8FD@8&s}js)%`%0|E4H)FB$KOscr1R|d0G
z>J{ixeXQKu6-}?4Zc8QqZ#Avp!ed?yas1MM9@UfZ3D$(*nY*h?W*CMpxF;A^aar`@
zOQH!EniM+GZOmLmHP9EV0ot5yv00le^^FaqGk+zTh%OII#X?7VsfGmLS@4B%&(X7{
z;EP0VG&1rNy5vCH_1KQ8F%f{`E1lQkv+UP(*S59OU%dr5e4Sp!lKN(;8|#W}{IV<A
l;6@Vv1f0SjNXJc>e*oZa^(;B!_0|9Y002ovPDHLkV1fykvQhv5

literal 0
HcmV?d00001

diff --git a/App/Images/icon_mail@3x.png b/App/Images/icon_mail@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..10aec7c22b4dbc8e835e37becbefba81f4c94444
GIT binary patch
literal 2155
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

literal 0
HcmV?d00001

diff --git a/App/Images/icon_password@2x.png b/App/Images/icon_password@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..33d658d5497050db9907b5954a0d2ae2ec90f414
GIT binary patch
literal 1168
zcmV;B1aJF^P)<h;3K|Lk000e1NJLTq001Na001ut1^@s6i^phN00001b5ch_0Itp)
z=>Px(N=ZaPR9Fe^SWjpiWfXt!o7psNY@<e6NNdD{cxdrft%7Jy5j4buPO|H|jg)k=
zIY{v!2wudZpdx}bYg(l4vPr|126{1~=-NwBTS2InP$)uLLtA1~4eoX~+3)#g*O|`j
zPG)9zVh*x%`QD%Jz4x2ne1GQq5E^`Pxtw}we&I<;@H`<s287*+umgZ@5#a*M7uj~Y
z?VgU=0|Nug4W<Y58$d*2A~hA20EfBw{a$gLIFAB940Yc1UL(MK0XmjBwQFUyFvB4B
zdI72RGh;VED1(WY!{62VoOI!2wAzklruQ<Kb8K@2!*8?#fD6p^-_|%oCW7rG<=4q{
zX2h_$wXO^uOJ^Tkq0%`Z=&~olD=6p)VcY3M^u<evNV-3np4pD__Om>;M)(syZjI6V
zFk3H-#$M8yUh`QKP&S+0yjWOaFtpo<t`sJEr~QGQhhORKy=~Z?+T`a`8jrQ31k`Ez
znMFi(Um`a2i)pJ7*8F5Q^QA*pFdQclD4ZCMzUc)<uaOvzWL2T)EM3#}%0tira`hua
zb!r_MN~LDH@>IBNe>?H|*#5}-PD$Ks<C*DwST3L8PuOPkQ$X#D4-b81=+@SeAqJz_
zzySW7h=o6}2Ktr9qC?;F06SvsFQI(Us#|48Ks;jxY@GzWZ46wi-LI^K@ZIWctVZyl
zf97~D*X|Tw2Z*Ufo~ln9ojFnd-uBR}p*PdUBaua(VrR@)9!rI**BqCTIzY!yp1hA|
z$0j3~5H4t%RxtEtTYk$Qtg)g@yR5n)*8wUOWw+tfTV`m%sy8bm3R@l$_Bux1IzT+P
zHyh4si-Fmx<RP%-A&E70s@3WM*}-hQ)&k_kIgeR@iSy?}a&GQXTopYa;2|mHTV^1_
zS^lpXH}z%(iBAzpbI0e6HVY(9p#n>|N&PXdX@Bae@v{>rx{D<_%lp<N&DIJWhwz6`
zl)=$x_!}HgO-?hI!N5raCP2XJU0Xsuf_L!VfVtKsocGQhOGUXyCBUt`GFOx8|0@6=
zuS*4gNuJ|vYLC$sNp4jQrP2~C^Z(8pHrs!wjHf5NdAOK>^ir*L$cyk6LoJ5981VA{
zKgUoqmEEb|ig>-fAAcZ*_;jlzQ<Gm3m9Eas|9*KQo$c{c)U8h-K#Rrl6MRbP(+ltx
z&{LMB18&9q_yPeEM0Z<@@Q!WMtv<hUAV7YLG}5mH$cwE&4DorNuN?0@{Ih4%?|A%6
zfdBz17Z_B@EQjJJQ*KfS1SlTU<^?JJeBRCo6tBi(;mIa(m|=le*MBdbDwj{A`y*!J
zW`#fuHCxmz&dw0RmQPbtV{QTK>60WMuFa?Ng>He*9Mzi$f^8DyC$*h6Ocx?ActD=r
zu!1gy`1rL<ogKdlRN*x~QD1TCy8$jNg203E{{B1z1IT2)*!GuP>f?ni@b5#T=y^lF
ir9kN0k(l<I9{Uf{iCt|(PdmN<0000<MNUMnLSTZg;xz#P

literal 0
HcmV?d00001

diff --git a/App/Images/icon_password@3x.png b/App/Images/icon_password@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e94f4f68d6e12f7a8f341c952d6831e2dd4e455
GIT binary patch
literal 1645
zcmV-z29o)SP)<h;3K|Lk000e1NJLTq001@s002h_1^@s6Ogpr>00001b5ch_0Itp)
z=>Px*CrLy>RA>e5TU~5aMHHShyIb0dHdOmygRMfM{3Y^$i7_f!qfs${fn)>Sg~eEC
zi_r%YF)@O{XlP9E!3Wv`{;+lnS)&rss1K$gYDkc%iD;sN3W*>AiV^z5?!EW;-Ig}H
z_s-tEZSQS&$<E8pd~@c^`R2_3&L!b-=sI>RB#xg58$y3VkeDNw>sg3;BB~XF&ohfN
zh@T<BzX_&KYpX-wMj{d2V>3{-N1-dxbH8EmGf?+93$Agi79=l#_@Q7>ytOGB{n2f?
zLUNNPwkL65zQ$TRJh7rsWls4Z2o;>H2-3^V(da2BSvPqTCYDO20)2z&9W3a1W)8Ti
z%$*EfCCS^`*2ms(C$E;85V5XQszx73AArio)M_V>lAvT|V}0{e;qcHzw2hnC-ej^d
zlM!E_+st!QA-b53K6Va0tq+q$9m>_AoOD_CXtk(X7LTvG=te$UW?aP3{bpVqOdo-v
zi?Wqi;~;YcUG(EXNF16K4E~-y>-F~b22Y$myFe4X60_uL=(^ilJ||6dII!@pM_QIF
z$>iV#60V7198qT?c@T!=og_f$Xn<(Tru9vS3)DN7-I?fFZZPk_vaoOrv_yzRS6e*R
zYJnY-u8F~bZH8fN&!f#CDYjt1@640$2%8hpg~810AopTEK`E)Zb$#^heEC+~6|p_t
zAI{F`Ls(F`%BnyRT|t+MY>vl1x8;o!=-k&6V>aHwx)!n*rSmgp&7Ax6%9WSxd3MCr
zAlCH3?J82{+5-hKFG!iDwZ@ye1<7aaW||1srT@M1f;!KR7W7zWcWQy5rGG+EMI+GG
z%^RYx+0{-C=}07ZvB7ONEhPFwAvt$rQ`0$Ho&``Cn=8SZ76)RJ!+`#Eeq()muCzC)
zikg`iYjobGjl~UmhS%6|1z<DSD#OH2S}`+?Zun9-9M)8Mlf}$&gob-nrN<Bg%S7Se
zNUW=;XCB7ZomMrd^fYFukF2<t>B@%sz1X7nD|9}vH<iLk!8te*;|xElE>54QaqrNP
ztrUG})5sju2K9$*xCL+|2Ddj@<cE_a=`$7XHAX__sfU$zW!LXWj9AoX3y;MmpB#((
z8Ij@-m3r)c)OKYFI}$@5S1PCth0bQ_@GTlJ=!{Z18A`jdWgUrO2XJ$?@JO7lVpEIV
zhW}xPs8H|fnQkdmyCX52X>AKQ?kd1{YC@(;Q`QBmY<5{KawKLIE~RvtSSfkSw6*N9
zQuEl@>|)+$T)L_+#W8&`Ccf%xL^k0{AZKdD=2yq1%!E$L<8K_U#O2R(wsIu?#KhQb
z;<#J6ECcj?ZAIW~EJNv0*<oV46Fo~c=6xX4IGRy%zeGRdHaRwWn@nAaRD)rpk7L2O
zvE;~D492PBY^bVYQFA2HCk;-&ay^hTIb!Q@Yi2M#e0?C%N$<4~FYzSZXA+Rup3E+B
zCOPI~vboI!f;s55gxOc63~W^86%(c##s}zs_A5acsU(Im*Wa>kZJtA3@lfk{uUoxK
zhKc2!NAdW{oh4<DxofB5kt%zvczof`lCsC#wNvp(l|5EGzHnzr*<<e7sd%K6n_w@^
z+m%etB8|5|=K}m)cudybw6kUT@&PaFQ0elO*t@;Gl|!fg{syN7kTL_WF#7&`7#Bog
zTngb|D*uA7V{GX3KX~FdN@|1zNIkgw{R8*-M`=W}ufzoDb5sNjVcem@y~O+_md8>u
za7OnzObaoeISs2X6Pt=w_Ogz$$GmLKsnF%C$5=?^dwQ&GO597rz7oUZN%Pg5El@Cc
z+y;6K_)4rbw)QLR4-e+rOr5Q<$S=8=_bFeAndY{|n^wVdt3hxp9x*J#`$qdaMDKa2
zueiOe2b*0CDPg{p^Yyiy)n?y4X033l($_7qJm)bAnO{UqRqIZ)p0tLy)@Dan1T``I
z$)3)LzZCK%1A#GJC>d+r7|LRpkHi%Gog4X5k-<rCn2*HUh<2R%#`Qr=v62Lj0m;EP
zP5Y$z-~+E*nnyn6C{~kQ*hO?n24u8l!<v((^w<%-WB>l!MMgJ2ds+;5^vRJ6jngZF
rhoP6@m>)=1rdrmmo{}fM)5`dN+Ox)nBG30F00000NkvXXu0mjffJQR!

literal 0
HcmV?d00001

diff --git a/App/Models/RegisterForm.js b/App/Models/RegisterForm.js
index 4e51431e5..e0f6aee80 100644
--- a/App/Models/RegisterForm.js
+++ b/App/Models/RegisterForm.js
@@ -19,7 +19,7 @@ class RegisterForm {
     // STEP3
     this.postalCode = data.postalCode || ''
     this.gender = data.gender || 1, //男性
-    this.birthdate = data.birthdate || moment().subtract(50, 'years').calendar()
+    this.birthdate = data.birthdate || '1990/01/01'
   }
 
   params() {
diff --git a/App/Themes/Images.js b/App/Themes/Images.js
index 30a269ab3..1a6408d96 100644
--- a/App/Themes/Images.js
+++ b/App/Themes/Images.js
@@ -11,10 +11,14 @@ const images = {
   botAvatar: require('../Images/chat_bot.png'),
   nurseAvatar: require('../Images/icon_chat_staff.png'),
   nurseGrey: require('../Images/staff_grey.png'),
-  goto_right_slide: require('../Images/goto_right_slide.png'),
-  icon_hospital: require('../Images/icon_hospital.png'),
+  gotoRightSlide: require('../Images/goto_right_slide.png'),
+  iconHospital: require('../Images/icon_hospital.png'),
   phone: require('../Images/phone.png'),
-  placemarker: require('../Images/placemarker.png'),
+  placeMarker: require('../Images/placemarker.png'),
+  iconMail: require('../Images/icon_mail.png'),
+  iconPassword: require('../Images/icon_password.png'),
+
+  // Progress bars
   progress2of3: require('../Images/step2of3.png'),
   progress3of3: require('../Images/step3of3.png'),
   progress1of5: require('../Images/consultation_indicator_step1.png'),
@@ -24,19 +28,19 @@ const images = {
   progress5of5: require('../Images/consultation_indicator_step5.png'),
 
   //Consultation Introduction images
-  consultation_merit_01: require('../Images/consultation_merit_01.png'),
-  consultation_merit_02: require('../Images/consultation_merit_02.png'),
-  consultation_merit_03: require('../Images/consultation_merit_03.png'),
-  consultation_merit_04: require('../Images/consultation_merit_04.png'),
-  consultation_voice_01: require('../Images/consultation_voice_01.png'),
-  consultation_voice_02: require('../Images/consultation_voice_02.png'),
-  consultation_voice_03: require('../Images/consultation_voice_03.png'),
-  consultation_flow_01: require('../Images/consultation_flow_01.png'),
-  consultation_flow_02: require('../Images/consultation_flow_02.png'),
-  consultation_flow_03: require('../Images/consultation_flow_03.png'),
-  consultation_flow_04: require('../Images/consultation_flow_04.png'),
-  consultation_flow_05: require('../Images/consultation_flow_05.png'),
-  icon_consultation_arrow_down: require('../Images/icon_consultation_arrow_down.png'),
+  consultationMerit01: require('../Images/consultation_merit_01.png'),
+  consultationMerit02: require('../Images/consultation_merit_02.png'),
+  consultationMerit03: require('../Images/consultation_merit_03.png'),
+  consultationMerit04: require('../Images/consultation_merit_04.png'),
+  consultationVoice01: require('../Images/consultation_voice_01.png'),
+  consultationVoice02: require('../Images/consultation_voice_02.png'),
+  consultationVoice03: require('../Images/consultation_voice_03.png'),
+  consultationFlow01: require('../Images/consultation_flow_01.png'),
+  consultationFlow02: require('../Images/consultation_flow_02.png'),
+  consultationFlow03: require('../Images/consultation_flow_03.png'),
+  consultationFlow04: require('../Images/consultation_flow_04.png'),
+  consultationFlow05: require('../Images/consultation_flow_05.png'),
+  iconConsultationArrowDown: require('../Images/icon_consultation_arrow_down.png'),
 }
 
 export default images
diff --git a/App/Themes/native-base-theme/components/Content.js b/App/Themes/native-base-theme/components/Content.js
index da7810367..0394ca09a 100644
--- a/App/Themes/native-base-theme/components/Content.js
+++ b/App/Themes/native-base-theme/components/Content.js
@@ -6,7 +6,7 @@ export default (variables = variable) => {
       backgroundColor: '#F1F7FB', // clintalWhite
     },
     ".clintalLightGreyBackground": {
-      backgroundColor: '#EFEFF4', // clintalLightGrey
+      backgroundColor: '#F8F8FA', // clintalLightGrey
     },
     ".padder": {
       padding: variables.contentPadding
diff --git a/App/Themes/native-base-theme/components/Item.js b/App/Themes/native-base-theme/components/Item.js
index ffb7eaf1b..cc6e58d06 100644
--- a/App/Themes/native-base-theme/components/Item.js
+++ b/App/Themes/native-base-theme/components/Item.js
@@ -200,6 +200,7 @@ export default (variables = variable) => {
 			},
 		},
 
+
 		borderWidth: variables.borderWidth * 2,
 		borderTopWidth: 0,
 		borderRightWidth: 0,