Skip to content

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

update design reward detail

parent 0565bb89
Show whitespace changes
Inline Side-by-side
Showing with 19 additions and 13 deletions
view/RewardDetail.js
View file @ 989f2c84
...@@ -93,19 +93,23 @@ class RewardDetail extends React.Component { ...@@ -93,19 +93,23 @@ class RewardDetail extends React.Component {
render() { render() {
console.log(this.state.content) // console.log(this.state.content)
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView> <ScrollView>
<View style={styles.images}> <View style={styles.images}>
<Image style={{ height: 250, width: '100%' }} source={this.state.image ? { uri: this.state.image } : null} /> <Image style={{ height: 250, width: '100%' }} source={this.state.image ? { uri: this.state.image } : null} />
<View style={styles.voucher_code}> <View style={styles.voucher_code}>
<Text style={styles.text_voucher}>VOUCHER CODE : </Text> <Text style={styles.text_voucher}>VOUCHER CODE</Text>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 20, textAlign: 'center', marginBottom: 5, top: 15 }}>{this.state.code}</Text> <Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 20, textAlign: 'center', marginBottom: 5, top: 15 }}>{this.state.code}</Text>
</View> </View>
<View style={styles.expire_time}> <View style={styles.expire_time}>
<Text style={styles.text_expire}>EXPIRE TIME : </Text> <View style={{flex:0.5}}>
<Text style={{ fontFamily: 'Gotham-Light', color: 'white', fontSize: 14, textAlign: 'center', marginBottom: 5, top: 7 }}>{this.state.expire}</Text> <Text style={styles.text_expire}>EXPIRE DATE</Text>
</View>
<View style={{flex:0.5}}>
<Text style={{ fontFamily: 'Gotham-Light', color: 'white', fontSize: 14, textAlign: 'center', marginBottom: 5, top: 5, paddingLeft:55 }}>{this.state.expire}</Text>
</View>
</View> </View>
</View> </View>
...@@ -115,9 +119,9 @@ class RewardDetail extends React.Component { ...@@ -115,9 +119,9 @@ class RewardDetail extends React.Component {
<Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 15 }}>{this.state.title}</Text> <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 15 }}>{this.state.title}</Text>
</View> </View>
<View <View
style={{ marginHorizontal:20 }} style={{ marginHorizontal: 20 }}
> >
<HTML html={this.state.content} tagsStyles={{ p: {fontFamily: 'Gotham-Light', marginTop: 8, marginBottom: 8}, blockquote: { backgroundColor: "#f1f1f1", padding: 12, paddingBottom: 0, marginTop: 6 } }}/> <HTML html={this.state.content} tagsStyles={{ p: { fontSize:12, color:'#838383', fontFamily: 'Gotham-Light'}, blockquote: { backgroundColor: "#f1f1f1", padding: 12, paddingBottom: 0, marginTop: 6 } }} />
</View> </View>
</View> </View>
<View style={styles.content}> <View style={styles.content}>
...@@ -131,7 +135,7 @@ class RewardDetail extends React.Component { ...@@ -131,7 +135,7 @@ class RewardDetail extends React.Component {
</View> </View>
) )
: this.state.used == 0 ? ( : this.state.used == 0 ? (
<View style={{ flex: 1, height: 50, marginRight: 70, marginLeft: 70, justifyContent: 'center'}}> <View style={{ flex: 1, height: 50, marginRight: 70, marginLeft: 70, justifyContent: 'center' }}>
<TouchableOpacity onPress={() => this.useVoucher()}> <TouchableOpacity onPress={() => this.useVoucher()}>
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368' }}> <View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 16, textAlign: 'center', margin: 11 }}>USE VOUCHER</Text> <Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 16, textAlign: 'center', margin: 11 }}>USE VOUCHER</Text>
...@@ -171,17 +175,19 @@ const styles = StyleSheet.create({ ...@@ -171,17 +175,19 @@ const styles = StyleSheet.create({
marginRight: 20, marginRight: 20,
backgroundColor: '#CFB368', backgroundColor: '#CFB368',
flex: 1, flex: 1,
marginTop: -140 marginTop: -100
}, },
expire_time: { expire_time: {
fontFamily: 'Gotham-Light', fontFamily: 'Gotham-Light',
flex: 1, flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginLeft: 20, marginLeft: 20,
marginRight: 20, marginRight: 20,
height: 70, height: 30,
justifyContent:'center', justifyContent: 'center',
backgroundColor: '#838383', backgroundColor: '#838383',
}, },
...@@ -189,7 +195,7 @@ const styles = StyleSheet.create({ ...@@ -189,7 +195,7 @@ const styles = StyleSheet.create({
fontFamily: 'Gotham-Light', fontFamily: 'Gotham-Light',
fontSize: 14, fontSize: 14,
marginLeft: 10, marginLeft: 10,
top:5, top: 5,
color: 'white' color: 'white'
}, },
......
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