Skip to content

N
new_excelso
Commit deaba70b authored by Trisno's avatar Trisno
Browse files
Options

update mockup design

parent 7a30f19f
Show whitespace changes
Inline Side-by-side
Showing with 184 additions and 136 deletions
view/New_Register.js
View file @ deaba70b
...@@ -238,71 +238,88 @@ class NewRegister extends React.Component { ...@@ -238,71 +238,88 @@ class NewRegister extends React.Component {
/> />
<View style={styles.header}> <View style={styles.header}>
<StatusBar barStyle='dark-content' /> <StatusBar barStyle='dark-content' />
<Text style={styles.titleText}>{i18n.t('register')}</Text> {/* <Text style={styles.titleText}>{i18n.t('register')}</Text> */}
<Text style={styles.titleText}>REGISTER</Text>
</View> </View>
<View style={styles.body}> <View style={styles.body}>
<View style={styles.itemsRow}> <View style={styles.itemsRow}>
<View style={styles.items1}> <View style={styles.items1}>
<Text>Email</Text> <Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Email</Text>
</View> </View>
<View style={styles.items2}> <View style={styles.items2}>
<TextInput <TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }} style={styles.textInput}
onChangeText={(email) => this.setState({ email })} onChangeText={(email) => this.setState({ email })}
value={this.state.email} value={this.state.email}
keyboardType='email-address' keyboardType='email-address'
autoCapitalize="none" autoCapitalize="none"
placeholder='Example@gmail.com'
placeholderTextColor='gray'
textAlign='center'
// autoCompleteType="email" // autoCompleteType="email"
/> />
</View> </View>
</View> </View>
<View style={styles.itemsRow}> <View style={styles.itemsRow}>
<View style={styles.items1}> <View style={styles.items1}>
<Text>{i18n.t('password')}</Text> {/* <Text>{i18n.t('password')}</Text> */}
<Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Password</Text>
</View> </View>
<View style={styles.items2}> <View style={styles.items2}>
<TextInput <TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }} style={styles.textInput}
onChangeText={(password) => this.setState({ password })} onChangeText={(password) => this.setState({ password })}
value={this.state.password} value={this.state.password}
secureTextEntry={true} secureTextEntry={true}
placeholder='******'
placeholderTextColor='gray'
textAlign='center'
/> />
</View> </View>
</View> </View>
<View style={styles.itemsRow}> <View style={styles.itemsRow}>
<View style={styles.items1}> <View style={styles.items1}>
<Text>{i18n.t('password2')}</Text> {/* <Text>{i18n.t('password2')}</Text> */}
<Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Confirm Password</Text>
</View> </View>
<View style={styles.items2}> <View style={styles.items2}>
<TextInput <TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }} style={styles.textInput}
onChangeText={(confirm_pass) => this.setState({ confirm_pass })} onChangeText={(confirm_pass) => this.setState({ confirm_pass })}
value={this.state.confirm_pass} value={this.state.confirm_pass}
secureTextEntry={true} secureTextEntry={true}
placeholder='******'
placeholderTextColor='gray'
textAlign='center'
/> />
</View> </View>
</View> </View>
<View style={styles.itemsRow}> <View style={styles.itemsRow}>
<View style={styles.items1}> <View style={styles.items1}>
<Text>{i18n.t('name')}</Text> {/* <Text>{i18n.t('name')}</Text> */}
<Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Name</Text>
</View> </View>
<View style={styles.items2}> <View style={styles.items2}>
<TextInput <TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }} style={styles.textInput}
onChangeText={(full_name) => this.setState({ full_name })} onChangeText={(full_name) => this.setState({ full_name })}
value={this.state.full_name} value={this.state.full_name}
placeholder='Example'
placeholderTextColor='gray'
textAlign='center'
/> />
</View> </View>
</View> </View>
<View style={styles.itemsRow}> <View style={styles.itemsRow}>
<View style={styles.items1}> <View style={styles.items1}>
<Text>{i18n.t('dob')}</Text> {/* <Text>{i18n.t('dob')}</Text> */}
<Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Date Of Birth</Text>
</View> </View>
<View style={styles.itemPicker}> <View style={styles.itemPicker}>
<View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1 }}> <View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker <Picker
mode="dropdown" mode="dropdown"
selectedValue={this.state.dob_day} selectedValue={this.state.dob_day}
...@@ -314,7 +331,7 @@ class NewRegister extends React.Component { ...@@ -314,7 +331,7 @@ class NewRegister extends React.Component {
</Picker> </Picker>
</View> </View>
<View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1 }}> <View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker <Picker
mode="dropdown" mode="dropdown"
...@@ -328,7 +345,7 @@ class NewRegister extends React.Component { ...@@ -328,7 +345,7 @@ class NewRegister extends React.Component {
})} })}
</Picker> </Picker>
</View> </View>
<View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1, borderRightWidth: 1 }}> <View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker <Picker
mode="dropdown" mode="dropdown"
selectedValue={this.state.dob_year} selectedValue={this.state.dob_year}
...@@ -345,9 +362,10 @@ class NewRegister extends React.Component { ...@@ -345,9 +362,10 @@ class NewRegister extends React.Component {
</View> </View>
<View style={styles.itemsRow}> <View style={styles.itemsRow}>
<View style={styles.items1}> <View style={styles.items1}>
<Text>{i18n.t('gender')}</Text> {/* <Text>{i18n.t('gender')}</Text> */}
<Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Gender</Text>
</View> </View>
<View style={styles.items3}> <View style={styles.pickerGender}>
<Picker selectedValue={this.state.gender} <Picker selectedValue={this.state.gender}
onValueChange={(itemValue, itemIndex) => this.setState({ gender: itemValue })}> onValueChange={(itemValue, itemIndex) => this.setState({ gender: itemValue })}>
<Picker.Item label='Pilih' value='' /> <Picker.Item label='Pilih' value='' />
...@@ -361,14 +379,24 @@ class NewRegister extends React.Component { ...@@ -361,14 +379,24 @@ class NewRegister extends React.Component {
</View> </View>
</View> </View>
<View style={styles.button}> {/* <View style={styles.button}>
<Button title={i18n.t('register')} onPress={() => this.validate()} /> <Button title={i18n.t('register')} onPress={() => this.validate()} />
</View> </View>
<View style={styles.signin}> <View style={styles.signin}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Login')}> <TouchableOpacity onPress={() => this.props.navigation.navigate('Login')}>
<Text style={styles.textSignIn}>{i18n.t('signin')}</Text> <Text style={styles.textSignIn}>{i18n.t('signin')}</Text>
</TouchableOpacity> </TouchableOpacity>
</View> */}
<TouchableOpacity onPress={() => this.validate()}>
<View style={styles.button}>
<Text style={{ color: 'white', fontWeight: 'bold', textAlign: 'center', fontSize: 22 }}>REGISTER</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Login')}>
<View style={styles.signin}>
<Text style={{ color: '#CFB368' }}>SIGN IN</Text>
</View> </View>
</TouchableOpacity>
</View> </View>
</ScrollView> </ScrollView>
</View> </View>
...@@ -384,23 +412,21 @@ const styles = StyleSheet.create({ ...@@ -384,23 +412,21 @@ const styles = StyleSheet.create({
backgroundColor: 'white' backgroundColor: 'white'
}, },
header: { header: {
flex: 0.2, flex: 0.1,
alignItems: 'center', backgroundColor: '#CFB368',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center'
}, },
body: { body: {
flex: 0.8, flex: 0.8,
flexDirection: 'column', flexDirection: 'column',
}, },
itemsRow: { itemsRow: {
flexDirection: 'row', // flexDirection: 'row',
marginTop: 25, marginTop: 25,
}, },
items1: { items1: {
marginLeft: 15, marginBottom: 10
width: 50,
justifyContent: 'center',
alignItems: 'center',
}, },
items2: { items2: {
flex: 1, flex: 1,
...@@ -420,23 +446,45 @@ const styles = StyleSheet.create({ ...@@ -420,23 +446,45 @@ const styles = StyleSheet.create({
itemPicker: { itemPicker: {
flexDirection: 'row', flexDirection: 'row',
flex: 1, flex: 1,
marginHorizontal: 15 marginLeft: 44,
marginRight: 44,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 10,
height: 40,
}, },
titleText: { titleText: {
margin:15, margin: 15,
fontSize: 26, fontSize: 26,
fontWeight: 'bold', fontWeight: 'bold',
color: 'white'
}, },
textInput: { textInput: {
height: 40,
borderColor: 'gray',
borderWidth: 1, borderWidth: 1,
borderColor: 'black', padding: 10,
height: 35, margin: 30,
alignItems: 'stretch' borderRadius: 10
},
pickerGender: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 10,
padding: 10,
paddingLeft: 170,
marginLeft: 44,
marginRight: 44,
alignItems: 'stretch',
justifyContent: 'center'
}, },
button: { button: {
backgroundColor: '#CFB368',
marginTop: 25, marginTop: 25,
marginHorizontal: 60, marginHorizontal: 150,
alignItems: 'stretch' borderRadius: 15,
paddingVertical: 5
}, },
signin: { signin: {
marginTop: 25, marginTop: 25,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment