Skip to content

2
2021-090 frontend
Commit 7d9255ab authored by IT18111170-Silva S.H.I's avatar IT18111170-Silva S.H.I
Browse files
Options

UI design update

parent 6abcade8
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 87 deletions
Navigations/homeStack.js
View file @ 7d9255ab
......@@ -25,10 +25,13 @@ export function homeStack({ navigation }) {
color="black"
onPress={() => navigation.openDrawer()}
/>
);
},
headerLeftContainerStyle: { paddingLeft: 10 },
}}
/>
<Stack.Screen
name="Leaderboard"
......
screen/AboutUs.js
View file @ 7d9255ab
......@@ -4,16 +4,21 @@
// Import React and Component
import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
import { Entypo } from '@expo/vector-icons';
export function AboutUs({ navigation }) {
//to diable the yellow box warning on the simulator
console.disableYellowBox = true;
return (
<View style={styles.container}>
<View>
<Text style={styles.topic}> About Us </Text>
</View>
<View style={styles.iconView}>
<Entypo name="phone" size={50} color="black" />
</View>
<Text style={styles.heading}>
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and
......@@ -55,6 +60,7 @@ const styles = StyleSheet.create({
marginTop: 15,
marginLeft: 10,
marginRight: 10,
backgroundColor: 'gray'
},
topic: {
......@@ -64,6 +70,9 @@ const styles = StyleSheet.create({
padding: 10,
fontSize: 18,
marginTop:15
},
iconView:{
alignSelf: 'center',
}
});
screen/HomeScreen.js
View file @ 7d9255ab
......@@ -17,7 +17,7 @@ export function HomeScreen({ navigation }) {
console.disableYellowBox = true;
return (
<View>
<View style={styles.background}>
<ImageSliderz
height={450}
dataSource={[
......@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
heading: {
fontSize: 17,
alignSelf: "center",
marginTop: 10,
marginTop: 15,
},
heading1: {
fontSize: 15,
......@@ -83,12 +83,12 @@ const styles = StyleSheet.create({
saveExam: {
width: "90%",
padding: 10,
marginTop: 20,
marginTop: 25,
marginLeft: 20,
marginHorizontal: 10,
backgroundColor: "#ff8000",
flexDirection: "row",
marginBottom: 10,
marginBottom: 15,
justifyContent: "center",
borderRadius: 10
......@@ -98,5 +98,9 @@ const styles = StyleSheet.create({
fontSize: 15,
marginLeft: 8
},
background:{
backgroundColor: '#bababa',
height: '100%'
}
});
screen/Leaderboard.js
View file @ 7d9255ab
import React, { useState, useEffect } from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity } from 'react-native';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
import { ScrollView } from "react-native-gesture-handler";
import { FontAwesome } from "@expo/vector-icons";
......@@ -11,7 +11,9 @@ export function Leaderboard({ navigation, data }) {
return (
// <ImageBackground source={require('../assets/agri.jpg')} style={styles.images}>
<ScrollView style={styles.container}>
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}>
......@@ -54,8 +56,8 @@ export function Leaderboard({ navigation, data }) {
</View>
</View>
</TouchableOpacity>
</ScrollView>
// </ImageBackground>
)
......@@ -64,7 +66,8 @@ export function Leaderboard({ navigation, data }) {
const styles = StyleSheet.create({
container: {
marginTop: 15,
// marginTop:20,
backgroundColor: '#8f8f8f'
},
card: {
marginBottom: 10,
......@@ -77,15 +80,22 @@ const styles = StyleSheet.create({
elevation: 5,
padding: 10,
flexDirection: "row",
backgroundColor: '#ff8000',
borderRadius:10
backgroundColor: '#fc9a44',
borderRadius:10,
marginTop: 10
},
right: {
marginLeft: 50
marginLeft: 50,
},
left: {
marginLeft: 5
},
images:{
justifyContent: 'center',
// alignItems: 'center',
height: '100%',
opacity: 0.9
}
});
screen/PriceScreen.js
View file @ 7d9255ab
import React, { useState, useEffect } from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity } from 'react-native';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { FontAwesome5 } from '@expo/vector-icons';
......@@ -10,10 +10,14 @@ export function PriceScreen({ navigation, data }) {
return (
<View style={styles.container}>
<ImageBackground source={require('../assets/agri.jpg')} style={styles.images}>
<View style={styles.editUSer}>
<TouchableOpacity>
<FontAwesome5 name="user-edit" size={24} color="black" />
<FontAwesome5 name="user-edit" size={30} color="black" />
</TouchableOpacity>
</View>
<View style={styles.inContainer}>
......@@ -23,28 +27,28 @@ export function PriceScreen({ navigation, data }) {
name="user-circle"
size={70}
color="black"
/>
/>
</View>
<View>
<TextInput
style={styles.input}
multiline
placeholder='Name'
/>
/>
<TextInput
style={styles.input}
multiline
placeholder='Earns'
/>
/>
<TextInput
style={styles.input}
multiline
placeholder='District'
// onChangeText={props.handleChange('password')}
// value={navigation.getParams('District')}
/>
/>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" >
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" >
<Text style={styles.buttonText}>Save Details</Text>
</TouchableOpacity>
......@@ -53,6 +57,7 @@ export function PriceScreen({ navigation, data }) {
<Text style={styles.texts}>You Have earned 5% Discount</Text>
</View>
</View>
</ImageBackground>
</View>
)
}
......@@ -61,9 +66,8 @@ const styles = StyleSheet.create({
container: {
flex: 1,
color: '#333',
padding: 10,
marginBottom: 10,
width: "100%",
height: "100%"
},
......@@ -83,6 +87,7 @@ const styles = StyleSheet.create({
fontSize: 20,
textAlign: 'center',
marginTop: 10,
marginBottom: 35,
fontWeight: 'bold',
color: '#ff8000'
},
......@@ -92,39 +97,47 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
padding: 5,
fontSize: 18,
marginTop: 70,
marginBottom: 20,
},
iconStyle: {
marginTop: 30,
marginBottom: 40,
marginTop: 5,
marginBottom: 30,
padding: 10,
alignSelf: 'center'
},
editUSer: {
alignSelf: 'flex-end',
},
input: {
borderWidth: 1,
borderColor: '#ff8000',
borderWidth: 2,
borderColor: 'white',
backgroundColor: 'white',
padding: 10,
paddingTop: 10,
fontSize: 18,
borderRadius: 6,
marginTop: 20,
marginBottom: 10,
marginBottom: 15,
},
buttonSub: {
width: "90%",
padding: 10,
marginTop: 20,
marginLeft: 20,
marginHorizontal: 10,
width: "100%",
padding: 15,
marginTop: 35,
backgroundColor: "#ff8000",
flexDirection: "row",
marginBottom: 10,
marginBottom: 35,
justifyContent: "center",
borderRadius:8
},
images:{
justifyContent: 'center',
alignItems: 'center',
height: '100%',
opacity: 0.8
}
});
\ No newline at end of file
screen/SignIn.js
View file @ 7d9255ab
import React from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity } from 'react-native';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { FontAwesome } from '@expo/vector-icons';
export function SignIn({ navigation }) {
return (
<View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
// onChangeText={(UserEmail) =>
// setUserEmail(UserEmail)
// }
placeholder="Enter Email" //dummy@abc.com
// keyboardType="email-address"
// onSubmitEditing={() =>
// passwordInputRef.current &&
// passwordInputRef.current.focus()
// }
blurOnSubmit={false}
/>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.input}
// onChangeText={(UserPassword) =>
// setUserPassword(UserPassword)
// }
placeholder="Enter Password" //12345
placeholderTextColor="#8b9cb5"
// ref={passwordInputRef}
// onSubmitEditing={Keyboard.dismiss}
blurOnSubmit={false}
secureTextEntry={true}
/>
</View>
<View>
<TouchableOpacity
style={styles.buttonSub}
activeOpacity={0.5}
onPress={() => navigation.navigate('HomeScreen')}
>
<Text style={styles.buttonTextStyle}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonSub} title="Sign Up" onPress={() => navigation.navigate('SignUp')}>
<Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.container}>
<ImageBackground source={require('../assets/loginex.jpg')} style={styles.images}>
<View style={styles.secondContainer}>
<View style={styles.SectionStyle}>
<Text style={styles.text}>
HELLO
</Text>
<Text style={styles.text1}>
Sign In to your Account
</Text>
<View style={styles.textinputicon}>
<MaterialIcons name="email" size={30} color="white" />
<TextInput
style={styles.input1}
// onChangeText={(UserEmail) =>
// setUserEmail(UserEmail)
// }
placeholder="Enter Email" //dummy@abc.com
placeholderTextColor="#8b9cb5"
// keyboardType="email-address"
// onSubmitEditing={() =>
// passwordInputRef.current &&
// passwordInputRef.current.focus()
// }
blurOnSubmit={false}
/>
</View>
</View>
<View style={styles.SectionStyle}>
<View style={styles.textinputicon}>
<FontAwesome name="user-secret" size={30} color="white" />
<TextInput
style={styles.input1}
// onChangeText={(UserPassword) =>
// setUserPassword(UserPassword)
// }
placeholder="Enter Password" //12345
placeholderTextColor="#8b9cb5"
// ref={passwordInputRef}
// onSubmitEditing={Keyboard.dismiss}
blurOnSubmit={false}
secureTextEntry={true}
/>
</View>
</View>
<View style={styles.buttons}>
<TouchableOpacity
style={styles.buttonSub}
activeOpacity={0.5}
onPress={() => navigation.navigate('HomeScreen')}
>
<Text style={styles.buttonTextStyle}>LOGIN</Text>
{/* <ImageBackground source={require('../assets/loginex.jpg')} style={styles.imagebutton}/> */}
</TouchableOpacity>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center',}}>
<Text style={{color: 'white', textAlign: 'center'}}>Dont have an account</Text>
<TouchableOpacity style={styles.buttonSignUp} title="Sign Up" onPress={() => navigation.navigate('SignUp')}>
<Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity>
</View>
</View>
</View>
</ImageBackground>
</View>
)
}
......@@ -63,28 +90,89 @@ const styles = StyleSheet.create({
borderColor: '#ddd',
padding: 10,
paddingTop: 10,
fontSize: 18,
borderRadius: 6,
fontSize: 15,
borderRadius: 25,
marginTop: 20,
marginBottom: 10,
marginLeft: 19,
marginRight:19
marginRight: 19,
backgroundColor: 'white',
},
buttonSub: {
width: "90%",
width: "80%",
padding: 10,
marginTop: 20,
marginLeft: 20,
marginTop: 30,
marginLeft: 30,
marginHorizontal: 10,
backgroundColor: "#ff8000",
backgroundColor: "#ff426e",
flexDirection: "row",
marginBottom: 10,
marginBottom: 20,
justifyContent: "center",
borderRadius:8
borderRadius: 8,
},
images: {
height: '100%',
justifyContent: 'center'
},
text: {
fontSize: 30,
alignSelf: "center",
marginTop: 5,
color: '#8b9cb5'
},
text1: {
fontSize: 15,
alignSelf: "center",
marginBottom: 20,
color: '#8b9cb5'
},
container: {
justifyContent: 'flex-start',
alignContent: 'stretch'
},
secondContainer: {
justifyContent: 'flex-start',
},
textinputicon:{
// flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
// backgroundColor: '#fff',
color: 'yellow'
},
input1:{
borderWidth: 1,
borderColor: '#ddd',
padding: 10,
// paddingTop: 10,
fontSize: 15,
borderRadius: 25,
marginTop: 20,
marginBottom: 10,
marginLeft: 10,
marginRight: 19,
backgroundColor: 'white',
width:'75%'
},
buttonSignUp:{
width: "20%",
// padding: 10,
marginLeft: 10,
// marginHorizontal: 10,
backgroundColor: "#ff426e",
flexDirection: "row",
// marginBottom: 10,
justifyContent: "center",
borderRadius: 8
}
});
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