Skip to content

C
clone_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 {
/>
<View style={styles.header}>
<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 style={styles.body}>
<View style={styles.itemsRow}>
<View style={styles.items1}>
<Text>Email</Text>
<Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Email</Text>
</View>
<View style={styles.items2}>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }}
style={styles.textInput}
onChangeText={(email) => this.setState({ email })}
value={this.state.email}
keyboardType='email-address'
autoCapitalize="none"
placeholder='Example@gmail.com'
placeholderTextColor='gray'
textAlign='center'
// autoCompleteType="email"
/>
</View>
</View>
<View style={styles.itemsRow}>
<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 style={styles.items2}>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }}
style={styles.textInput}
onChangeText={(password) => this.setState({ password })}
value={this.state.password}
secureTextEntry={true}
placeholder='******'
placeholderTextColor='gray'
textAlign='center'
/>
</View>
</View>
<View style={styles.itemsRow}>
<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 style={styles.items2}>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }}
style={styles.textInput}
onChangeText={(confirm_pass) => this.setState({ confirm_pass })}
value={this.state.confirm_pass}
secureTextEntry={true}
placeholder='******'
placeholderTextColor='gray'
textAlign='center'
/>
</View>
</View>
<View style={styles.itemsRow}>
<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 style={styles.items2}>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }}
style={styles.textInput}
onChangeText={(full_name) => this.setState({ full_name })}
value={this.state.full_name}
placeholder='Example'
placeholderTextColor='gray'
textAlign='center'
/>
</View>
</View>
<View style={styles.itemsRow}>
<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 style={styles.itemPicker}>
<View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1 }}>
<View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker
mode="dropdown"
selectedValue={this.state.dob_day}
......@@ -314,7 +331,7 @@ class NewRegister extends React.Component {
</Picker>
</View>
<View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1 }}>
<View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker
mode="dropdown"
......@@ -328,7 +345,7 @@ class NewRegister extends React.Component {
})}
</Picker>
</View>
<View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1, borderRightWidth: 1 }}>
<View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker
mode="dropdown"
selectedValue={this.state.dob_year}
......@@ -345,9 +362,10 @@ class NewRegister extends React.Component {
</View>
<View style={styles.itemsRow}>
<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 style={styles.items3}>
<View style={styles.pickerGender}>
<Picker selectedValue={this.state.gender}
onValueChange={(itemValue, itemIndex) => this.setState({ gender: itemValue })}>
<Picker.Item label='Pilih' value='' />
......@@ -361,14 +379,24 @@ class NewRegister extends React.Component {
</View>
</View>
<View style={styles.button}>
{/* <View style={styles.button}>
<Button title={i18n.t('register')} onPress={() => this.validate()} />
</View>
<View style={styles.signin}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Login')}>
<Text style={styles.textSignIn}>{i18n.t('signin')}</Text>
</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>
</TouchableOpacity>
</View>
</ScrollView>
</View>
......@@ -384,23 +412,21 @@ const styles = StyleSheet.create({
backgroundColor: 'white'
},
header: {
flex: 0.2,
alignItems: 'center',
flex: 0.1,
backgroundColor: '#CFB368',
justifyContent: 'center',
alignItems: 'center'
},
body: {
flex: 0.8,
flexDirection: 'column',
},
itemsRow: {
flexDirection: 'row',
// flexDirection: 'row',
marginTop: 25,
},
items1: {
marginLeft: 15,
width: 50,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 10
},
items2: {
flex: 1,
......@@ -420,23 +446,45 @@ const styles = StyleSheet.create({
itemPicker: {
flexDirection: 'row',
flex: 1,
marginHorizontal: 15
marginLeft: 44,
marginRight: 44,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 10,
height: 40,
},
titleText: {
margin:15,
margin: 15,
fontSize: 26,
fontWeight: 'bold',
color: 'white'
},
textInput: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
borderColor: 'black',
height: 35,
alignItems: 'stretch'
padding: 10,
margin: 30,
borderRadius: 10
},
pickerGender: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 10,
padding: 10,
paddingLeft: 170,
marginLeft: 44,
marginRight: 44,
alignItems: 'stretch',
justifyContent: 'center'
},
button: {
backgroundColor: '#CFB368',
marginTop: 25,
marginHorizontal: 60,
alignItems: 'stretch'
marginHorizontal: 150,
borderRadius: 15,
paddingVertical: 5
},
signin: {
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