UI design update

Navigations/homeStack.js

@@ -25,10 +25,13 @@ export function homeStack({ navigation }) {
                 color="black"
                 onPress={() => navigation.openDrawer()}
               />
+              
             );
           },
           headerLeftContainerStyle: { paddingLeft: 10 },
+          
         }}
+        
       />
       <Stack.Screen
         name="Leaderboard"

screen/AboutUs.js

@@ -4,10 +4,10 @@
 // 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}>
@@ -15,6 +15,11 @@ export function AboutUs({ navigation }) {
         <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 
       typesetting industry Lorem Ipsum has been the industry's standard dummy text ever
@@ -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

@@ -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

 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

 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}>
@@ -44,7 +48,7 @@ export function PriceScreen({ navigation, data }) {
                         // 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

 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.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.input}
+
+                                style={styles.input1}
                                 // onChangeText={(UserEmail) =>
                                 //     setUserEmail(UserEmail)
                                 // }
                                 placeholder="Enter Email" //dummy@abc.com
+                                placeholderTextColor="#8b9cb5"
                                 // keyboardType="email-address"
                                 // onSubmitEditing={() =>
                                 //     passwordInputRef.current &&
@@ -20,9 +35,14 @@ export function SignIn({ navigation }) {
                                 blurOnSubmit={false}
                             />
                         </View>
+
+                    </View>
+
                     <View style={styles.SectionStyle}>
+                        <View style={styles.textinputicon}>
+                        <FontAwesome name="user-secret" size={30} color="white" />
                             <TextInput
-                    style={styles.input}
+                                style={styles.input1}
                                 // onChangeText={(UserPassword) =>
                                 //     setUserPassword(UserPassword)
                                 // }
@@ -34,7 +54,8 @@ export function SignIn({ navigation }) {
                                 secureTextEntry={true}
                             />
                         </View>
-            <View>
+                    </View>
+                    <View style={styles.buttons}>
 
                         <TouchableOpacity
                             style={styles.buttonSub}
@@ -42,17 +63,23 @@ export function SignIn({ navigation }) {
                             onPress={() => navigation.navigate('HomeScreen')}
                         >
                             <Text style={styles.buttonTextStyle}>LOGIN</Text>
+            {/* <ImageBackground source={require('../assets/loginex.jpg')} style={styles.imagebutton}/> */}
+                        
+
+
                         </TouchableOpacity>
 
-                <TouchableOpacity style={styles.buttonSub} title="Sign Up" onPress={() => navigation.navigate('SignUp')}>
+                    <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
+    }
+
 
 });