Commit f5e8bd0e authored by Lê Thành Đạt's avatar Lê Thành Đạt
Browse files

update UI

parent 093f5e26
......@@ -69,12 +69,21 @@ export default class TabBar extends Component {
{this.tabBarItemView(3)}
{this.tabBarItemView(4)}
</View>
<View style={styles.overlayView}>
<TouchableWithoutFeedback
onPress={() => this.tabBarItemSelectedAt(2)}>
<View style={styles.overlayView_center} />
</TouchableWithoutFeedback>
</View>
<TouchableWithoutFeedback onPress={() => this.tabBarItemSelectedAt(2)}>
<View style={styles.overlayView}>
<Image
style={styles.overlayView_background}
resizeMode="stretch"
source={require('../../../assets/images/login_background.png')}
/>
<View style={styles.overlayView_center}>
<Image
resizeMode="contain"
source={require('../../../assets/images/list2_icons/list2_icon.png')}
/>
</View>
</View>
</TouchableWithoutFeedback>
</View>
);
}
......
......@@ -33,15 +33,23 @@ const styles = StyleSheet.create({
top: 0,
bottom: 0,
alignSelf: 'center',
flex: 1,
width: width,
height: width,
},
overlayView_center: {
backgroundColor: 'white',
overlayView_background: {
position: 'absolute',
width: width,
height: width,
borderRadius: width / 2,
},
overlayView_center: {
width: width,
height: width,
justifyContent: 'center',
alignItems: 'center',
},
});
export default styles;
......@@ -39,7 +39,7 @@ const styles = StyleSheet.create({
},
overview_options_container: {
backgroundColor: '#c4c4c4',
backgroundColor: '#ededed',
borderRadius: 15,
flexDirection: 'row',
alignItems: 'center',
......@@ -68,7 +68,9 @@ const styles = StyleSheet.create({
width: 100,
height: 100,
borderRadius: 50,
backgroundColor: 'black',
borderWidth: 4,
borderColor: 'white',
backgroundColor: 'grey',
top: 25,
},
......
import React, {Component} from 'react';
import {
View,
Image,
Text,
TextInput,
CheckBox,
......@@ -75,6 +76,11 @@ export default class LoginForm extends Component {
</View>
<TouchableWithoutFeedback onPress={this.handleLoginButtonClick}>
<View style={styles.loginButton}>
<Image
style={styles.loginButton_background}
resizeMode="stretch"
source={require('../../../../assets/images/login_background.png')}
/>
<Text style={styles.loginButton_text}>Login</Text>
</View>
</TouchableWithoutFeedback>
......
......@@ -20,7 +20,7 @@ const styles = StyleSheet.create({
form_input_container: {
borderWidth: 1,
borderColor: '#000000',
borderColor: 'grey',
borderRadius: 20,
marginTop: 10,
},
......@@ -51,17 +51,33 @@ const styles = StyleSheet.create({
loginButton: {
alignSelf: 'center',
bottom: 20,
height: 40,
borderRadius: 20,
backgroundColor: AppTheme.primaryColor,
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 80,
paddingRight: 80,
justifyContent: 'center',
bottom: 30,
height: 60,
width: 200,
borderRadius: 30,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.34,
shadowRadius: 6.27,
},
loginButton_background: {
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0,
height: 60,
width: 200,
borderRadius: 30,
},
loginButton_text: {
textAlign: 'center',
fontFamily: AppTheme.primaryFont,
color: '#ffffff',
},
......
import React, {Component} from 'react';
import {View, Text} from 'react-native';
import styles from './styles';
export default class Menu extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<Text> Menu </Text>
</View>
);
}
}
import {StyleSheet} from 'react-native';
const styles = StyleSheet.create({
});
export default styles;
......@@ -15,13 +15,34 @@ export default class TestScreen extends Component {
return (
<View style={itemStyles}>
<Image
style={styles.optionsView_item_image}
resizeMode="contain"
source={require('../../../assets/images/contact_icons/contact_icon.png')}
source={this.imageAt(index)}
/>
</View>
);
}
imageAt(index) {
if (index === 0) {
return require('../../../assets/images/power_icon.png');
}
if (index === 1) {
return require('../../../assets/images/home_icon.png');
}
if (index === 2) {
return require('../../../assets/images/setting_icon.png');
}
if (index === 3) {
return require('../../../assets/images/more_icon.png');
}
return require('../../../assets/images/monitor_icon.png');
}
listItem(title) {
return (
<>
......@@ -35,18 +56,18 @@ export default class TestScreen extends Component {
render() {
const data = [
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'Home',
'Live Flight Details',
'Checked Baggage',
'Hand Baggage',
'Essential Information',
'Booking Conditions',
'Amendment & Cancellation',
'Airport Hotel & Parking',
'ATOL Certificate',
'Visa & Passport',
'Insurance Policy',
'Manage My Booking',
];
return (
<>
......
......@@ -55,7 +55,12 @@ const styles = StyleSheet.create({
height: 60,
borderRadius: 30,
marginTop: 7,
backgroundColor: 'black',
backgroundColor: '#ededed',
},
optionsView_item_image: {
width: 30,
height: 30,
},
optionsView_item_top: {
......
Supports Markdown
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