Skip to content

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

design account

parent 6f6e496a
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 75 deletions
view/Account.js
View file @ 94b50f86
...@@ -179,34 +179,32 @@ class Account extends React.Component { ...@@ -179,34 +179,32 @@ class Account extends React.Component {
<View style={{ flex: 1, height: 90 }}> <View style={{ flex: 1, height: 90 }}>
<View style={{ alignSelf: 'center' }}> <View style={{ alignSelf: 'center' }}>
<Image <Image
style={{ height: 70, width: 70, justifyContent: 'center',top:20 }} style={{ height: 70, width: 70, justifyContent: 'center', top: 20 }}
source={require('../assets/images/people-actv.png')} source={require('../assets/images/people-actv.png')}
/> />
</View> </View>
<View style={{ height: 90, justifyContent: 'center' }}> <View style={{ height: 90, justifyContent: 'center' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 18, textAlign: 'center' }}> <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center' }}>
{this.state.full_name} {this.state.full_name}
</Text> </Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Profile')}> <TouchableOpacity onPress={() => this.props.navigation.navigate('Profile')}>
<Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 18, textAlign: 'center',top:2 }}> <Text style={{ fontFamily: 'Gotham-Light', color: '#838383', fontSize: 12, textAlign: 'center', top: 2 }}>View Profile</Text>
View Profil
</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
{ {
this.props.set_card === false ? ( this.props.set_card === false ? (
<View style={{ marginTop: 65 }}> <View style={{ marginTop: 65 }}>
<View style={{ flex: 1, backgroundColor: 'grey', height: 250, borderRadius: 20, marginRight: 10, marginLeft: 10,justifyContent:'center' }}> <View style={{ flex: 1, backgroundColor: 'grey', height: 250, borderRadius: 20, marginRight: 10, marginLeft: 10, justifyContent: 'center' }}>
<View style={{justifyContent:'center'}}> <View style={{ justifyContent: 'center' }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Card Activation')}> <TouchableOpacity onPress={() => this.props.navigation.navigate('Card Activation')}>
<View style={{ height: 50, borderRadius: 20, backgroundColor: 'white', marginRight: 20, marginLeft: 20, }}> <View style={{ height: 50, borderRadius: 20, backgroundColor: 'white', marginRight: 20, marginLeft: 20, }}>
<Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 15 }}>ACTIVATE CARD</Text> <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 15 }}>ACTIVATE CARD</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
<View style={{ flex: 1, height: 250 }}> <View style={{ flex: 1, height: 250 }}>
<TouchableOpacity style={{ top: 20, marginLeft: 15, marginRight: 15, justifyContent: 'center' }} onPress={() => this.logout()}> <TouchableOpacity style={{ top: 20, marginLeft: 15, marginRight: 15, justifyContent: 'center' }} onPress={() => this.logout()}>
...@@ -215,7 +213,7 @@ class Account extends React.Component { ...@@ -215,7 +213,7 @@ class Account extends React.Component {
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.v_logo}> <View style={styles.v_logo}>
<View style={{ flex: 1, alignSelf: 'flex-start',marginTop:20 }}> <View style={{ flex: 1, alignSelf: 'flex-start', marginTop: 20 }}>
<Image resizeMode="contain" source={require('../assets/images/daun.png')} style={styles.logo}></Image> <Image resizeMode="contain" source={require('../assets/images/daun.png')} style={styles.logo}></Image>
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
...@@ -228,8 +226,13 @@ class Account extends React.Component { ...@@ -228,8 +226,13 @@ class Account extends React.Component {
<View> <View>
<View style={styles.Card}> <View style={styles.Card}>
<View style={styles.card}> <View style={styles.card}>
<Card style={{ padding: 10, alignContent: 'center' }}> <Card style={{ padding: 20, margin: 10, alignContent: 'center' }}>
{/* <Text>
{i18n.t('yourCardNumber')} | {this.state.expire_date}{'\n'}
</Text> */}
{/* <Text>
YOUR CARD NUMBER | {this.state.expire_date}
</Text> */}
<View style={{ flexDirection: 'row', flex: 1, paddingBottom: 5 }}> <View style={{ flexDirection: 'row', flex: 1, paddingBottom: 5 }}>
<View style={{ flex: 0.5 }}> <View style={{ flex: 0.5 }}>
<Text style={{ fontSize: 10, fontFamily: 'Gotham-Light' }}>YOUR CARD NUMBER</Text> <Text style={{ fontSize: 10, fontFamily: 'Gotham-Light' }}>YOUR CARD NUMBER</Text>
...@@ -246,33 +249,41 @@ class Account extends React.Component { ...@@ -246,33 +249,41 @@ class Account extends React.Component {
<View style={styles.line}></View> <View style={styles.line}></View>
{/* <Text style={{ textAlign: 'left', fontWeight: 'bold' }}>
{i18n.t('balance')} {this.state.balance}
</Text> */}
<View style={{ flexDirection: 'row', flex: 1 }}> <View style={{ flexDirection: 'row', flex: 1 }}>
<View style={{ flex: 0.2, justifyContent: 'center' }}> <View style={{ flex: 0.3, justifyContent: 'center' }}>
{/* <Text>{i18n.t('balance')}</Text> */} {/* <Text>{i18n.t('balance')}</Text> */}
<Text style={{ fontSize: 10, fontFamily: 'Gotham-Light' }}>BALANCE</Text> <Text style={{ fontSize: 14, fontFamily: 'Gotham-Light' }}>BALANCE</Text>
</View> </View>
<View style={{ flex: 0.8, alignItems: 'center' }}> <View style={{ flex: 0.7, alignItems: 'center' }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', color: 'gray' }}>IDR {this.state.balance}</Text> <Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color: 'gray' }}>IDR {this.state.balance}</Text>
</View> </View>
</View> </View>
<View style={styles.line2}></View> <View style={styles.line2}></View>
{/* <Text style={{ textAlign: 'left', fontWeight: 'bold' }}>
{i18n.t('point')} {this.state.point}
</Text> */}
<View style={{ flexDirection: 'row', flex: 1 }}> <View style={{ flexDirection: 'row', flex: 1 }}>
<View style={{ flex: 0.2, justifyContent: 'center' }}> <View style={{ flex: 0.3, justifyContent: 'center' }}>
{/* <Text>{i18n.t('balance')}</Text> */} {/* <Text>{i18n.t('balance')}</Text> */}
<Text style={{ fontSize: 10, fontFamily: 'Gotham-Light' }}>POINTS</Text> <Text style={{ fontSize: 14, fontFamily: 'Gotham-Light' }}>POINTS</Text>
</View> </View>
<View style={{ flex: 0.8, alignItems: 'center' }}> <View style={{ flex: 0.7, alignItems: 'center' }}>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Black', color: 'gray' }}>IDR {this.state.points}</Text> <Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color: 'gray' }}>IDR {this.state.point}</Text>
</View> </View>
</View> </View>
</Card> </Card>
</View> </View>
</View> </View>
<TouchableOpacity style={styles.submitTopUp} activeOpacity={.5} onPress={() => this.props.navigation.navigate('TopUpInfo')}> <TouchableOpacity style={styles.submitTopUp} activeOpacity={.5} onPress={() => this.props.navigation.navigate('TopUpInfo')}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 16, textAlign: 'center' }}>TOP UP BALANCE</Text> <Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 16, textAlign: 'center' }}>TOP UP BALANCE</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={{ padding: 10, margin: 10, height: 200, top: 20 }}> <View style={{ padding: 10, margin: 10, height: 200, top: 10 }}>
<ImageBackground style={{ width: '100%', height: '100%', padding: 0, margin: 0 }} resizeMode='stretch' source={this.state.img_card ? { uri: this.state.img_card } : null}> <ImageBackground style={{ width: '100%', height: '100%', padding: 0, margin: 0 }} resizeMode='stretch' source={this.state.img_card ? { uri: this.state.img_card } : null}>
<View style={{ justifyContent: 'center' }}> <View style={{ justifyContent: 'center' }}>
<Text style={{ fontFamily: 'Gotham-Black', margin: 15, fontSize: 14, color: '#c9af6d', top: 120 }}> <Text style={{ fontFamily: 'Gotham-Black', margin: 15, fontSize: 14, color: '#c9af6d', top: 120 }}>
...@@ -281,47 +292,46 @@ class Account extends React.Component { ...@@ -281,47 +292,46 @@ class Account extends React.Component {
</View> </View>
</ImageBackground> </ImageBackground>
</View> </View>
<View style={{marginLeft:20,marginRight:20,padding:5}}> <View style={{ marginLeft: 20, marginRight: 20, padding: 5 }}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', top: 10 }}> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
<TouchableOpacity style={{ marginBottom: 10 }} onPress={() => this.TransferBalance()} > <TouchableOpacity style={{ marginBottom: 10 }} onPress={() => this.TransferBalance()} >
<Card style={{ height: 100, width: 160 }}> <Card style={{ height: 100, width: 155 }}>
<View style={{ height: 50, alignItems: 'center', padding: 10 }}>
<View style={{ height: 50, alignItems: 'center',padding:10 }}> <MaterialIcons name="monetization-on" size={30} color="gray" style={{ top: 10 }} />
<MaterialIcons name="monetization-on" size={30} color="gray" style={{ top: 10 }} /> <Text style={{ fontFamily: 'Gotham-Black', textAlign: 'center', top: 10, fontSize: 14, color: '#838383' }}>TRANSFER BALANCE</Text>
<Text style={{ fontFamily: 'Gotham-Black', textAlign: 'center', top: 30, fontSize: 14 }}>TRANSFER BALANCE</Text> </View>
</View> </Card>
</Card> </TouchableOpacity>
</TouchableOpacity> <View style={{ width: 5 }}></View>
<View style={{ width: 5 }}></View> <TouchableOpacity>
<TouchableOpacity> <Card style={{ height: 100, width: 155 }}>
<Card style={{ height: 100, width: 160 }}> <View style={{ height: 50, alignItems: 'center', padding: 10 }}>
<View style={{ height: 50, alignItems: 'center',padding:10 }}> <AntDesign name="shoppingcart" size={30} color="gray" style={{ top: 10 }} />
<AntDesign name="shoppingcart" size={30} color="gray" style={{ top: 10 }} /> <Text style={{ fontFamily: 'Gotham-Black', textAlign: 'center', top: 20, fontSize: 14, color: '#838383' }}>BALANCE / POINT</Text>
<Text style={{ fontFamily: 'Gotham-Black', textAlign: 'center', top: 30, fontSize: 14 }}>BALANCE / POINT</Text> </View>
</View> </Card>
</Card> </TouchableOpacity>
</TouchableOpacity> </View>
</View> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', top: 10 }}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', top: 10 }}> <TouchableOpacity style={{ marginBottom: 10 }} onPress={() => this.TransferBalance()} >
<TouchableOpacity style={{ marginBottom: 10 }} onPress={() => this.TransferBalance()} > <Card style={{ height: 100, width: 155 }}>
<Card style={{ height: 100, width: 160 }}>
<View style={{ height: 50, alignItems: 'center',padding:10 }}> <View style={{ height: 50, alignItems: 'center', padding: 10 }}>
<MaterialIcons name="autorenew" size={30} color="gray" style={{ top: 10 }} /> <MaterialIcons name="autorenew" size={30} color="gray" style={{ top: 10 }} />
<Text style={{ fontFamily: 'Gotham-Black', textAlign: 'center', top: 20, fontSize: 14,margin:5 }}>RENEWAL</Text> <Text style={{ fontFamily: 'Gotham-Black', textAlign: 'center', top: 20, fontSize: 14, margin: 5, color: '#838383' }}>RENEWAL</Text>
</View> </View>
</Card> </Card>
</TouchableOpacity> </TouchableOpacity>
<View style={{ width: 5 }}></View> <View style={{ width: 5 }}></View>
<TouchableOpacity style={{ marginBottom: 10 }} onPress={() => this.props.navigation.navigate('Transaction History')} > <TouchableOpacity style={{ marginBottom: 10 }} onPress={() => this.props.navigation.navigate('Transaction History')} >
<Card style={{ height: 100, width: 160 }}> <Card style={{ height: 100, width: 155 }}>
<View style={{ height: 50, alignItems: 'center',padding:10 }}> <View style={{ height: 50, alignItems: 'center', padding: 10 }}>
<MaterialIcons name="autorenew" size={30} color="gray" style={{ top: 10 }} /> <MaterialIcons name="autorenew" size={30} color="gray" style={{ top: 10 }} />
<Text style={{ fontFamily: 'Gotham-Black', textAlign: 'center', top: 20, fontSize: 14,margin:5}}>TRANSACTION HISTORY</Text> <Text style={{ fontFamily: 'Gotham-Black', textAlign: 'center', top: 10, fontSize: 14, margin: 5, color: '#838383' }}>TRANSACTION HISTORY</Text>
</View> </View>
</Card> </Card>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', top: 10 }}> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', top: 10 }}>
{this.state.premium === false ? ( {this.state.premium === false ? (
...@@ -329,7 +339,7 @@ class Account extends React.Component { ...@@ -329,7 +339,7 @@ class Account extends React.Component {
<Card style={{ height: 100, width: 160 }}> <Card style={{ height: 100, width: 160 }}>
<View style={{ height: 50, alignItems: 'center' }}> <View style={{ height: 50, alignItems: 'center' }}>
<MaterialIcons name="autorenew" size={30} color="gray" style={{ top: 20 }} /> <MaterialIcons name="autorenew" size={30} color="gray" style={{ top: 20 }} />
<Text style={{ fontFamily: 'Gotham-Black', textAlign: 'center', top: 30, fontSize: 14 }}>UPGRADE PREMIUM</Text> <Text style={{ fontFamily: 'Gotham-Black', textAlign: 'center', top: 30, fontSize: 14, color: '#838383' }}>UPGRADE PREMIUM</Text>
</View> </View>
</Card> </Card>
</TouchableOpacity> </TouchableOpacity>
...@@ -339,7 +349,7 @@ class Account extends React.Component { ...@@ -339,7 +349,7 @@ class Account extends React.Component {
</View> </View>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<TouchableOpacity onPress={() => this.logout()}> <TouchableOpacity onPress={() => this.logout()}>
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368',justifyContent:'center',marginLeft:20,marginRight:20,marginBottom:10,padding:10,top:5,bottom:5 }}> <View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368', justifyContent: 'center', marginLeft: 20, marginRight: 20, marginBottom: 10, padding: 10, top: 5, bottom: 5 }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 16, textAlign: 'center' }}>LOGOUT</Text> <Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 16, textAlign: 'center' }}>LOGOUT</Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
...@@ -377,16 +387,16 @@ const styles = StyleSheet.create({ ...@@ -377,16 +387,16 @@ const styles = StyleSheet.create({
top: 50, top: 50,
alignItems: 'center', alignItems: 'center',
alignContent: 'center', alignContent: 'center',
marginRight:10, marginRight: 10,
marginLeft:10, marginLeft: 10,
}, },
card: { card: {
top: 20, top: 20,
flex: 1, flex: 1,
alignItems: 'center', alignItems: 'center',
marginRight:10, marginRight: 10,
marginLeft:10 marginLeft: 10,
}, },
line: { line: {
...@@ -417,10 +427,10 @@ const styles = StyleSheet.create({ ...@@ -417,10 +427,10 @@ const styles = StyleSheet.create({
}, },
submitTopUp: { submitTopUp: {
marginTop: 70, marginTop: 70,
top:10, top: 10,
height:40, height: 40,
marginLeft: 20, marginLeft: 20,
justifyContent:'center', justifyContent: 'center',
marginRight: 20, marginRight: 20,
backgroundColor: '#c9af6d', backgroundColor: '#c9af6d',
borderRadius: 10, borderRadius: 10,
......
view/Home.js
View file @ 94b50f86
...@@ -351,7 +351,7 @@ class Home extends React.Component { ...@@ -351,7 +351,7 @@ class Home extends React.Component {
<Text style={{ fontSize: 14, fontFamily: 'Gotham-Light' }}>BALANCE</Text> <Text style={{ fontSize: 14, fontFamily: 'Gotham-Light' }}>BALANCE</Text>
</View> </View>
<View style={{ flex: 0.7, alignItems:'center'}}> <View style={{ flex: 0.7, alignItems:'center'}}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color:'gray' }}>IDR {this.state.balance}</Text> <Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color:'gray' }}>IDR {this.state.balance}</Text>
</View> </View>
</View> </View>
...@@ -366,7 +366,7 @@ class Home extends React.Component { ...@@ -366,7 +366,7 @@ class Home extends React.Component {
<Text style={{ fontSize: 14, fontFamily: 'Gotham-Light' }}>POINTS</Text> <Text style={{ fontSize: 14, fontFamily: 'Gotham-Light' }}>POINTS</Text>
</View> </View>
<View style={{ flex: 0.7,alignItems:'center' }}> <View style={{ flex: 0.7,alignItems:'center' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black', color:'gray' }}>IDR {this.state.point}</Text> <Text style={{ fontSize: 14, fontFamily: 'Gotham-Black', color:'gray' }}>IDR {this.state.point}</Text>
</View> </View>
</View> </View>
</Card> </Card>
......
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