Skip to content

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

Update: UI images updated

parent 68b4e0ce
Hide whitespace changes
Inline Side-by-side
Showing with 270 additions and 127 deletions
screen/AboutUs.js
View file @ 146e53b9
...@@ -3,14 +3,18 @@ ...@@ -3,14 +3,18 @@
// 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, ImageBackground, SafeAreaView } from "react-native";
import { Entypo } from '@expo/vector-icons'; 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
return ( return (
<SafeAreaView style={{flex: 1, color: 'yellow'}}>
<View style={styles.container}> <View style={styles.container}>
<ImageBackground source={require('../assets/gamification.jpg')} style={styles.images}>
<View> <View>
<Text style={styles.topic}> About Us </Text> <Text style={styles.topic}> About Us </Text>
</View> </View>
...@@ -36,7 +40,9 @@ export function AboutUs({ navigation }) { ...@@ -36,7 +40,9 @@ export function AboutUs({ navigation }) {
125, Galle road, colombo-3. 0775555555 125, Galle road, colombo-3. 0775555555
All Right Reserved. All Right Reserved.
</Text> </Text>
</ImageBackground>
</View> </View>
</SafeAreaView>
); );
} }
...@@ -73,6 +79,10 @@ const styles = StyleSheet.create({ ...@@ -73,6 +79,10 @@ const styles = StyleSheet.create({
}, },
iconView:{ iconView:{
alignSelf: 'center', alignSelf: 'center',
},
images:{
height: '100%',
justifyContent: 'center'
} }
}); });
screen/Leaderboard.js
View file @ 146e53b9
...@@ -7,67 +7,85 @@ import { FontAwesome } from "@expo/vector-icons"; ...@@ -7,67 +7,85 @@ import { FontAwesome } from "@expo/vector-icons";
export function Leaderboard({ navigation, data }) { export function Leaderboard({ navigation, data }) {
return ( return (
// <ImageBackground source={require('../assets/agri.jpg')} style={styles.images}> // <ImageBackground source={require('../assets/agri.jpg')} style={styles.images}>
<ScrollView style={styles.container}> <ScrollView style={styles.container}>
{/* <ImageBackground source={require('../assets/gamification.jpg')} style={styles.images}> */}
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}> <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black"/>
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
<Text >Earns: 4500</Text>
<Text >District: Colombo</Text>
<Text >Points: 10</Text>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}> <View style={styles.card}>
<View style={styles.left}> <View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" /> <FontAwesome name="user-circle-o" size={75} size={75} color="black" />
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
<Text >Earns: 4500</Text>
<Text >District: Colombo</Text>
<Text >Points: 10</Text>
</View>
</View> </View>
<View style={styles.right}> </TouchableOpacity>
<Text >Name: Husmitha Silva</Text> <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<Text >Earns: 4500</Text>
<Text >District: Colombo</Text> <View style={styles.card}>
<Text >Points: 10</Text> <View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" />
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
<Text >Earns: 4500</Text>
<Text >District: Colombo</Text>
<Text >Points: 10</Text>
</View>
</View> </View>
</View> </TouchableOpacity>
</TouchableOpacity> <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}> <View style={styles.card}>
<View style={styles.left}> <View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" /> <FontAwesome name="user-circle-o" size={75} size={75} color="black" />
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
<Text >Earns: 4500</Text>
<Text >District: Colombo</Text>
<Text >Points: 5</Text>
</View>
</View> </View>
<View style={styles.right}> </TouchableOpacity>
<Text >Name: Husmitha Silva</Text> <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<Text >Earns: 4500</Text>
<Text >District: Colombo</Text> <View style={styles.card}>
<Text >Points: 5</Text> <View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" />
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
<Text >Earns: 4500</Text>
<Text >District: Colombo</Text>
<Text >Points: 5</Text>
</View>
</View> </View>
</View> </TouchableOpacity>
</TouchableOpacity> {/* </ImageBackground> */}
</ScrollView> </ScrollView>
// </ImageBackground>
) )
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
// marginTop:20, // marginTop:20,
backgroundColor: '#8f8f8f' backgroundColor: '#8f8f8f',
flex: 1,
color: '#333',
padding: 10,
// marginTop: 20,
// marginBottom: 10,
width: "100%",
}, },
card: { card: {
marginBottom: 10, marginBottom: 10,
...@@ -81,21 +99,22 @@ const styles = StyleSheet.create({ ...@@ -81,21 +99,22 @@ const styles = StyleSheet.create({
padding: 10, padding: 10,
flexDirection: "row", flexDirection: "row",
backgroundColor: '#fc9a44', backgroundColor: '#fc9a44',
borderRadius:10, borderRadius: 10,
marginTop: 10 marginTop: 10
}, },
right: { right: {
marginLeft: 50, marginLeft: 50,
}, },
left: { left: {
marginLeft: 5 marginLeft: 5
}, },
images:{ images: {
justifyContent: 'center', // justifyContent: 'center',
// alignItems: 'center', // alignItems: 'center',
height: '100%', // height: '100%',
opacity: 0.9 height: '100%',
justifyContent: 'center'
} }
}); });
screen/PriceScreen.js
View file @ 146e53b9
...@@ -2,15 +2,17 @@ import React, { useState, useEffect } from 'react'; ...@@ -2,15 +2,17 @@ import React, { useState, useEffect } from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } 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';
import { Entypo } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
export function PriceScreen({ navigation, data }) { export function PriceScreen({ navigation, data }) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground source={require('../assets/agri.jpg')} style={styles.images}> {/* <ImageBackground source={require('../assets/agri.jpg')} style={styles.images}>
...@@ -57,87 +59,192 @@ export function PriceScreen({ navigation, data }) { ...@@ -57,87 +59,192 @@ 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> */}
<ImageBackground source={require('../assets/signin1.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> */}
<Text style={{ alignSelf: 'center', marginBottom: 10, fontSize:10}}> User Profile </Text>
<View style={{ alignSelf: 'center', marginBottom: 30 }}>
<Ionicons name="person" size={50} color="black" />
</View>
<View style={styles.textinputicon}>
<Entypo name="user" 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}>
<Entypo name="lock" 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.SectionStyle}>
<View style={styles.textinputicon}>
<Entypo name="lock" 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}>Save Details</Text>
{/* <ImageBackground source={require('../assets/loginex.jpg')} style={styles.imagebutton}/> */}
</TouchableOpacity>
{/* <View style={{flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',}}>
<Text style={{color: 'black', 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>
<Text style={styles.text1}>
You have earned 5% Discount
</Text>
</View>
</View>
</View>
</ImageBackground> </ImageBackground>
</View> </View>
) )
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { input: {
flex: 1, borderWidth: 1,
color: '#333', borderColor: '#ddd',
width: "100%", padding: 10,
height: "100%" paddingTop: 10,
fontSize: 15,
borderRadius: 25,
}, marginTop: 20,
inContainer: {
justifyContent: 'center',
flexDirection: 'column',
marginBottom: 10, marginBottom: 10,
marginLeft: 10, marginLeft: 19,
marginRight: 10, marginRight: 19,
padding: 5, backgroundColor: 'white',
borderColor: 'red' },
buttonSub: {
width: "80%",
padding: 10,
marginTop: 30,
marginLeft: 30,
marginHorizontal: 10,
backgroundColor: "#ff426e",
flexDirection: "row",
marginBottom: 20,
justifyContent: "center",
borderRadius: 8,
},
images: {
height: '100%',
justifyContent: 'center'
},
text: {
fontSize: 30,
alignSelf: "center",
marginTop: 5,
color: 'black'
}, },
texts: { text1: {
fontSize: 20, fontSize: 20,
textAlign: 'center', alignSelf: "center",
marginTop: 10,
marginBottom: 35,
fontWeight: 'bold',
color: '#ff8000'
},
heading: {
textAlign: 'center',
color: '#333',
fontWeight: 'bold',
padding: 5,
fontSize: 18,
marginTop: 70,
marginBottom: 20, marginBottom: 20,
marginTop: 15,
color: 'black'
}, },
iconStyle: { container: {
marginTop: 5, justifyContent: 'flex-start',
marginBottom: 30, alignContent: 'stretch'
padding: 10,
alignSelf: 'center'
}, },
editUSer: { secondContainer: {
justifyContent: 'flex-start',
alignSelf: 'flex-end',
}, },
input: { textinputicon: {
borderWidth: 2, // flex: 1,
borderColor: 'white', flexDirection: 'row',
backgroundColor: 'white', justifyContent: 'center',
alignItems: 'center',
// backgroundColor: '#fff',
color: 'yellow'
},
input1: {
borderWidth: 1,
borderColor: '#ddd',
padding: 10, padding: 10,
paddingTop: 10, // paddingTop: 10,
fontSize: 18, fontSize: 15,
borderRadius: 6, borderRadius: 25,
marginTop: 20, marginTop: 20,
marginBottom: 15, marginBottom: 10,
marginLeft: 10,
marginRight: 19,
backgroundColor: 'white',
width: '75%'
}, },
buttonSub: { buttonSignUp: {
width: "100%", width: "20%",
padding: 15, // padding: 10,
marginTop: 35, marginLeft: 10,
backgroundColor: "#ff8000", // marginHorizontal: 10,
backgroundColor: "#ff426e",
flexDirection: "row", flexDirection: "row",
marginBottom: 35, // marginBottom: 10,
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 @ 146e53b9
...@@ -5,7 +5,7 @@ import { Entypo } from '@expo/vector-icons'; ...@@ -5,7 +5,7 @@ import { Entypo } from '@expo/vector-icons';
export function SignIn({ navigation }) { export function SignIn({ navigation }) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground source={require('../assets/loginex.jpg')} style={styles.images}> <ImageBackground source={require('../assets/signin1.jpg')} style={styles.images}>
<View style={styles.secondContainer}> <View style={styles.secondContainer}>
<View style={styles.SectionStyle}> <View style={styles.SectionStyle}>
<Text style={styles.text}> <Text style={styles.text}>
...@@ -65,7 +65,7 @@ export function SignIn({ navigation }) { ...@@ -65,7 +65,7 @@ export function SignIn({ navigation }) {
<View style={{flexDirection: 'row', <View style={{flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center',}}> alignItems: 'center',}}>
<Text style={{color: 'white', textAlign: 'center'}}>Dont have an account</Text> <Text style={{color: 'black', textAlign: 'center'}}>Dont have an account</Text>
<TouchableOpacity style={styles.buttonSignUp} title="Sign Up" onPress={() => navigation.navigate('SignUp')}> <TouchableOpacity style={styles.buttonSignUp} title="Sign Up" onPress={() => navigation.navigate('SignUp')}>
<Text style={styles.buttonText}>Sign Up</Text> <Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity> </TouchableOpacity>
...@@ -112,13 +112,13 @@ const styles = StyleSheet.create({ ...@@ -112,13 +112,13 @@ const styles = StyleSheet.create({
fontSize: 30, fontSize: 30,
alignSelf: "center", alignSelf: "center",
marginTop: 5, marginTop: 5,
color: '#8b9cb5' color: 'black'
}, },
text1: { text1: {
fontSize: 15, fontSize: 15,
alignSelf: "center", alignSelf: "center",
marginBottom: 20, marginBottom: 20,
color: '#8b9cb5' color: 'black'
}, },
container: { container: {
justifyContent: 'flex-start', justifyContent: 'flex-start',
......
screen/SignUp.js
View file @ 146e53b9
import React from 'react'; import React from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native'; import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
import { Formik } from 'formik'; import { Formik } from 'formik';
import { Ionicons } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons'; import { Entypo } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
export function SignUp({ navigation }) { export function SignUp({ navigation }) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground source={require('../assets/signup.jpg')} style={styles.images}> <ImageBackground source={require('../assets/signup11.jpg')} style={styles.images}>
<Formik <Formik
initialValues={{ name: '', email: '', password: '', district: '' }} initialValues={{ name: '', email: '', password: '', district: '' }}
onSubmit={(values) => { onSubmit={(values) => {
...@@ -26,7 +27,7 @@ export function SignUp({ navigation }) { ...@@ -26,7 +27,7 @@ export function SignUp({ navigation }) {
<View style={styles.container}> <View style={styles.container}>
<View style={styles.iconView}> <View style={styles.iconView}>
<Entypo name="lock" size={30} color="white" /> <Ionicons name="person" size={24} color="white" />
<TextInput <TextInput
style={styles.input} style={styles.input}
placeholder='Name' placeholder='Name'
...@@ -38,7 +39,7 @@ export function SignUp({ navigation }) { ...@@ -38,7 +39,7 @@ export function SignUp({ navigation }) {
<View style={styles.container}> <View style={styles.container}>
<View style={styles.iconView}> <View style={styles.iconView}>
<Entypo name="lock" size={30} color="white" /> <MaterialIcons name="email" size={24} color="white" />
<TextInput <TextInput
style={styles.input} style={styles.input}
placeholder='Email' placeholder='Email'
...@@ -65,7 +66,7 @@ export function SignUp({ navigation }) { ...@@ -65,7 +66,7 @@ export function SignUp({ navigation }) {
<View style={styles.container}> <View style={styles.container}>
<View style={styles.iconView}> <View style={styles.iconView}>
<Entypo name="lock" size={30} color="white" /> <Entypo name="location" size={24} color="white" />
<TextInput <TextInput
style={styles.input} style={styles.input}
placeholder='District' placeholder='District'
......
screen/gamification.js
View file @ 146e53b9
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
// Import React and Component // Import React and Component
import React from 'react'; import React from 'react';
import {StyleSheet, View, Text, SafeAreaView, TouchableOpacity, TextInput} from 'react-native'; import {StyleSheet, View, Text, SafeAreaView, TouchableOpacity, TextInput, ImageBackground} from 'react-native';
import { Formik } from 'formik'; import { Formik } from 'formik';
import { FontAwesome } from '@expo/vector-icons'; import { FontAwesome } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons'; import { MaterialCommunityIcons } from '@expo/vector-icons';
...@@ -12,6 +12,8 @@ import { MaterialCommunityIcons } from '@expo/vector-icons'; ...@@ -12,6 +12,8 @@ import { MaterialCommunityIcons } from '@expo/vector-icons';
export function gamification ({navigation}) { export function gamification ({navigation}) {
return ( return (
<SafeAreaView style={{flex: 1, color: 'yellow'}}> <SafeAreaView style={{flex: 1, color: 'yellow'}}>
<ImageBackground source={require('../assets/gamification.jpg')} style={styles.images}>
<Formik <Formik
initialValues={{ name: ''}} initialValues={{ name: ''}}
onSubmit={(values) => { onSubmit={(values) => {
...@@ -64,7 +66,7 @@ export function gamification ({navigation}) { ...@@ -64,7 +66,7 @@ export function gamification ({navigation}) {
</View> </View>
)} )}
</Formik> </Formik>
</ImageBackground>
</SafeAreaView> </SafeAreaView>
); );
}; };
...@@ -130,5 +132,9 @@ const styles = StyleSheet.create({ ...@@ -130,5 +132,9 @@ const styles = StyleSheet.create({
}, },
iconView:{ iconView:{
alignSelf: 'center', alignSelf: 'center',
},
images:{
height: '100%',
justifyContent: 'center'
} }
}); });
\ No newline at end of file
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