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 {
headerTitleStyle: {
alignSelf: 'center',
fontFamily: 'Gotham-Black',
fontSize:18,
fontSize: 18,
color: 'white',
textAlign: 'center'
}, title: 'LANGUAGE'
......@@ -261,7 +261,18 @@ class Auth extends React.Component {
}, title: 'CHANGE PASSWORD'
}} />
<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="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="Transfer Balance" component={TransferBalance} />
......@@ -392,7 +403,7 @@ class Auth extends React.Component {
<Stack.Screen name="Transaction Detail" component={TransactionDetail} />
{/* <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="Date Time" component={DateTime} />
<Stack.Screen name="New Register" component={NewRegister}
......
view/Renewal.js
View file @ 533f60a4
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 Axios from 'axios';
......@@ -73,45 +73,50 @@ class Renewal extends React.Component {
return (
<View style={styles.container}>
<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 style={styles.body}>
<View style={styles.cont_curent_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 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 style={styles.cont_biaya_renewal}>
<View style={styles.biaya_renewal}>
<Text style={{ textAlign: 'center' }}>Biaya Renewal</Text>
<View style={styles.cont_curent_balance}>
<View style={styles.current_balance}>
<Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'#CFB368' }}>Biaya Renewal</Text>
</View>
<View style={styles.value_biaya_renewal}>
<Text style={{ textAlign: 'center' }}>{this.state.biaya_renewal}</Text>
<View style={styles.value_current_balance}>
<Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'gray' }}>IDR {this.state.biaya_renewal}</Text>
</View>
</View>
<View style={styles.cont_expired}>
<View style={styles.expired}>
<Text style={{ textAlign: 'center' }}>Expired</Text>
<View style={styles.cont_curent_balance}>
<View style={styles.current_balance}>
<Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'#CFB368' }}>Expired</Text>
</View>
<View style={styles.value_expired}>
<Text style={{ textAlign: 'center' }}>{this.state.expired}</Text>
<View style={styles.value_current_balance}>
<Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'gray' }}>{this.state.expired}</Text>
</View>
</View>
<View style={styles.cont_renew_until}>
<View style={styles.renew_until}>
<Text style={{ textAlign: 'center' }}>Renew Until</Text>
<View style={styles.cont_curent_balance}>
<View style={styles.current_balance}>
<Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'#CFB368' }}>Renew Until</Text>
</View>
<View style={styles.value_renew_until}>
<Text style={{ textAlign: 'center' }}>{this.state.renew_until}</Text>
<View style={styles.value_current_balance}>
<Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color:'gray' }}>{this.state.renew_until}</Text>
</View>
</View>
<View style={styles.btn_renewal}>
{/* <View style={styles.btn_renewal}>
<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>
)
......@@ -125,83 +130,40 @@ const styles = StyleSheet.create({
backgroundColor: 'white',
},
header: {
flex: 1,
flex: 0.1,
},
body: {
flex: 4,
flex: 0.9,
},
cont_curent_balance: {
flexDirection: 'row',
height: 50,
},
cont_biaya_renewal: {
flexDirection: 'row',
height: 50,
},
cont_expired: {
flexDirection: 'row',
height: 50,
},
cont_renew_until: {
flexDirection: 'row',
height: 50,
flex:0.2
},
current_balance: {
flex: 1,
margin: 5,
justifyContent: 'center'
},
biaya_renewal: {
flex: 1,
margin: 5,
justifyContent: 'center'
// backgroundColor:'cyan',
justifyContent:'center',
},
expired: {
flex: 1,
margin: 5,
justifyContent: 'center'
},
renew_until: {
flex: 1,
margin: 5,
justifyContent: 'center'
},
value_current_balance: {
flex: 1,
margin: 5,
justifyContent: 'center',
marginHorizontal:30,
paddingHorizontal: 10,
paddingVertical : 5,
justifyContent:'center',
borderWidth:1,
borderColor:'gray',
borderRadius:10,
// backgroundColor:'maroon'
},
value_biaya_renewal: {
flex: 1,
margin: 5,
justifyContent: 'center',
},
value_expired: {
flex: 1,
margin: 5,
justifyContent: 'center',
},
value_renew_until: {
flex: 1,
margin: 5,
justifyContent: 'center',
button: {
flex: 0.2,
backgroundColor: '#CFB368',
marginTop: 20,
marginHorizontal: 80,
borderRadius: 15,
padding: 20,
alignItems: 'center',
justifyContent: 'center'
},
btn_renewal: {
marginRight: 30,
marginLeft: 30,
marginTop: 10,
}
})
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