Merged in CLT-728 (pull request beefe#63)

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
Clintal · Jan 29, 2018 · aa53ef1 · aa53ef1
1 parent 13503bd
commit aa53ef1
Show file tree

Hide file tree

Showing 22 changed files with 124 additions and 68 deletions.
diff --git a/App/Components/CreditCardInformationComponent.js b/App/Components/CreditCardInformationComponent.js
@@ -1,33 +1,29 @@
 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
   if (hasValidCreditCard) {
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/App/Images/icon_mail@3x.png b/App/Images/icon_mail@3x.png
diff --git a/App/Images/icon_password@2x.png b/App/Images/icon_password@2x.png
diff --git a/App/Images/icon_password@3x.png b/App/Images/icon_password@3x.png
diff --git 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() {