Skip to content

C
clone_excelso
Commit 533f60a4 authored by Trisno's avatar Trisno
Browse files
Options

update design renewal

parent 70be6528
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 89 deletions
view/Auth.js
View file @ 533f60a4
...@@ -242,7 +242,7 @@ class Auth extends React.Component { ...@@ -242,7 +242,7 @@ class Auth extends React.Component {
headerTitleStyle: { headerTitleStyle: {
alignSelf: 'center', alignSelf: 'center',
fontFamily: 'Gotham-Black', fontFamily: 'Gotham-Black',
fontSize:18, fontSize: 18,
color: 'white', color: 'white',
textAlign: 'center' textAlign: 'center'
}, title: 'LANGUAGE' }, title: 'LANGUAGE'
...@@ -261,7 +261,18 @@ class Auth extends React.Component { ...@@ -261,7 +261,18 @@ class Auth extends React.Component {
}, title: 'CHANGE PASSWORD' }, title: 'CHANGE PASSWORD'
}} /> }} />
<Stack.Screen name="Card Activation" component={CardActivation} /> <Stack.Screen name="Card Activation" component={CardActivation} />
<Stack.Screen name="Renewal" component={Renewal} /> <Stack.Screen name="Renewal" component={Renewal} options={{
headerStyle: { backgroundColor: '#CFB368' },
headerTitleContainerStyle: { alignContent: 'center' },
headerTitleAlign: 'center',
headerTintColor: '#fff',
headerTitleStyle: {
alignSelf: 'center',
fontFamily: 'Gotham-Black',
color: 'white',
textAlign: 'center'
}, title: 'RENEWAL'
}} />
<Stack.Screen name="Account" component={Account} /> <Stack.Screen name="Account" component={Account} />
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} /> <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="Transfer Balance" component={TransferBalance} /> <Stack.Screen name="Transfer Balance" component={TransferBalance} />
...@@ -392,7 +403,7 @@ class Auth extends React.Component { ...@@ -392,7 +403,7 @@ class Auth extends React.Component {
<Stack.Screen name="Transaction Detail" component={TransactionDetail} /> <Stack.Screen name="Transaction Detail" component={TransactionDetail} />
{/* <Stack.Screen name="Email Confirmation" component={EmailConfirmation} /> */} {/* <Stack.Screen name="Email Confirmation" component={EmailConfirmation} /> */}
<Stack.Screen name="News Detail" component={NewsDetail} options={{ headerShown: false }}/> <Stack.Screen name="News Detail" component={NewsDetail} options={{ headerShown: false }} />
<Stack.Screen name="Confirm Your Order" component={MenuConfirmation} /> <Stack.Screen name="Confirm Your Order" component={MenuConfirmation} />
<Stack.Screen name="Date Time" component={DateTime} /> <Stack.Screen name="Date Time" component={DateTime} />
<Stack.Screen name="New Register" component={NewRegister} <Stack.Screen name="New Register" component={NewRegister}
......
view/Renewal.js
View file @ 533f60a4
import React from 'react'; import React from 'react';
import { View, Text, StyleSheet, Button, Alert } from 'react-native'; import { View, Text, StyleSheet, Button, Alert, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Axios from 'axios'; import Axios from 'axios';
...@@ -73,45 +73,50 @@ class Renewal extends React.Component { ...@@ -73,45 +73,50 @@ class Renewal extends React.Component {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={styles.header}>
<Text style={{ textAlign: 'center', margin: 20, fontSize: 25, alignSelf: 'center' }}>Renewal</Text> {/* <Text style={{ textAlign: 'center', margin: 20, fontSize: 25, alignSelf: 'center' }}>Renewal</Text> */}
</View> </View>
<View style={styles.body}> <View style={styles.body}>
<View style={styles.cont_curent_balance}> <View style={styles.cont_curent_balance}>
<View style={styles.current_balance}> <View style={styles.current_balance}>
<Text style={{ textAlign: 'center' }}>Current Balance</Text> <Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'#CFB368' }}>Current Balance</Text>
</View> </View>
<View style={styles.value_current_balance}> <View style={styles.value_current_balance}>
<Text style={{ textAlign: 'center' }}>{this.state.current_balance}</Text> <Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'gray' }}>IDR {this.state.current_balance}</Text>
</View> </View>
</View> </View>
<View style={styles.cont_biaya_renewal}> <View style={styles.cont_curent_balance}>
<View style={styles.biaya_renewal}> <View style={styles.current_balance}>
<Text style={{ textAlign: 'center' }}>Biaya Renewal</Text> <Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'#CFB368' }}>Biaya Renewal</Text>
</View> </View>
<View style={styles.value_biaya_renewal}> <View style={styles.value_current_balance}>
<Text style={{ textAlign: 'center' }}>{this.state.biaya_renewal}</Text> <Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'gray' }}>IDR {this.state.biaya_renewal}</Text>
</View> </View>
</View> </View>
<View style={styles.cont_expired}> <View style={styles.cont_curent_balance}>
<View style={styles.expired}> <View style={styles.current_balance}>
<Text style={{ textAlign: 'center' }}>Expired</Text> <Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'#CFB368' }}>Expired</Text>
</View> </View>
<View style={styles.value_expired}> <View style={styles.value_current_balance}>
<Text style={{ textAlign: 'center' }}>{this.state.expired}</Text> <Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'gray' }}>{this.state.expired}</Text>
</View> </View>
</View> </View>
<View style={styles.cont_renew_until}> <View style={styles.cont_curent_balance}>
<View style={styles.renew_until}> <View style={styles.current_balance}>
<Text style={{ textAlign: 'center' }}>Renew Until</Text> <Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'#CFB368' }}>Renew Until</Text>
</View> </View>
<View style={styles.value_renew_until}> <View style={styles.value_current_balance}>
<Text style={{ textAlign: 'center' }}>{this.state.renew_until}</Text> <Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'gray' }}>{this.state.renew_until}</Text>
</View> </View>
</View> </View>
<View style={styles.btn_renewal}> {/* <View style={styles.btn_renewal}>
<Button title="Renew" onPress={() => this._renewal()}></Button> <Button title="Renew" onPress={() => this._renewal()}></Button>
</View> </View> */}
<TouchableOpacity onPress={() => this._renewal()}>
<View style={styles.button}>
<Text style={{ color: 'white', fontSize: 12, fontFamily: 'Gotham-Black' }}>RENEW</Text>
</View>
</TouchableOpacity>
</View> </View>
</View> </View>
) )
...@@ -125,83 +130,40 @@ const styles = StyleSheet.create({ ...@@ -125,83 +130,40 @@ const styles = StyleSheet.create({
backgroundColor: 'white', backgroundColor: 'white',
}, },
header: { header: {
flex: 1, flex: 0.1,
}, },
body: { body: {
flex: 4, flex: 0.9,
}, },
cont_curent_balance: { cont_curent_balance: {
flexDirection: 'row', flex:0.2
height: 50,
},
cont_biaya_renewal: {
flexDirection: 'row',
height: 50,
},
cont_expired: {
flexDirection: 'row',
height: 50,
},
cont_renew_until: {
flexDirection: 'row',
height: 50,
}, },
current_balance: { current_balance: {
flex: 1, flex: 1,
margin: 5, // backgroundColor:'cyan',
justifyContent: 'center' justifyContent:'center',
},
biaya_renewal: {
flex: 1,
margin: 5,
justifyContent: 'center'
}, },
expired: {
flex: 1,
margin: 5,
justifyContent: 'center'
},
renew_until: {
flex: 1,
margin: 5,
justifyContent: 'center'
},
value_current_balance: { value_current_balance: {
flex: 1, flex: 1,
margin: 5, marginHorizontal:30,
justifyContent: 'center', paddingHorizontal: 10,
paddingVertical : 5,
justifyContent:'center',
borderWidth:1,
borderColor:'gray',
borderRadius:10,
// backgroundColor:'maroon'
}, },
button: {
value_biaya_renewal: { flex: 0.2,
flex: 1, backgroundColor: '#CFB368',
margin: 5, marginTop: 20,
justifyContent: 'center', marginHorizontal: 80,
}, borderRadius: 15,
padding: 20,
value_expired: { alignItems: 'center',
flex: 1, justifyContent: 'center'
margin: 5,
justifyContent: 'center',
},
value_renew_until: {
flex: 1,
margin: 5,
justifyContent: 'center',
}, },
btn_renewal: {
marginRight: 30,
marginLeft: 30,
marginTop: 10,
}
}) })
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
......
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