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