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