fiz styles on both screens and navigate

Endurance-Soft · Mar 15, 2024 · b730314 · b730314
1 parent 3f89dbb
commit b730314
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 29 deletions.
diff --git a/src/login/ActivationScreen.js b/src/login/ActivationScreen.js
@@ -1,63 +1,80 @@
 //ActivationScreen.js
 import React, { useState } from "react";
-import { Image, TouchableOpacity, StyleSheet, View, Text, TextInput } from "react-native";
+import { Image, TouchableOpacity, StyleSheet, View, Text, TextInput, Dimensions } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import {theme} from '../../constants';
+import { theme } from '../../constants';
 import { useNavigation } from "@react-navigation/native";
+const windowWidth = Dimensions.get('window').width;
 
 const ActivationScreen = () => {
 	const navigation = useNavigation();
 	return (
 		<SafeAreaView style={styles.container}>
-			<View>
-				<Image source={require('../assets/forma1.png')} style={{ width: 50, height: 50 }}/>
-				<Image source={require('../assets/formas.png')} style={{ width: 200, height: 200 }} /> 
+			<View style={styles.containerImgs}>
+				<Image source={require('../assets/forma1.png')} style={{ width: windowWidth * 0.28, height: 87 }} />
+				<Image source={require('../assets/formas.png')} style={{ width: windowWidth * 0.72, height: 206 }} />
 			</View>
 			<View>
 				<Text style={styles.title}>Avi Pro Mobile</Text>
 				<Text style={styles.subtitle}>Clave de activación</Text>
-				<TextInput placeholder="XXXX - XXXX - XXXX - XXXX" style={styles.label }/>
+				<TextInput placeholder="XXXX - XXXX - XXXX - XXXX" style={styles.label} />
 				<Text style={styles.softText}>Al continuar acepta todos los términos, condiciones y políticas de privacidad.</Text>
 				<TouchableOpacity onPress={() => navigation.navigate("LoginScreen")} style={styles.button}>
-					<Text styles={{ fontWeight: bold, }}>Continuar</Text>
+					<Text style={styles.continueButton}>Continuar</Text>
 				</TouchableOpacity>
 				<Text style={styles.softText}>Si desea adquirir una licencia del producto por favor comuníquese con nuestro equipo de ventas.</Text>
-			</View>		
-			
+			</View>
+
 		</SafeAreaView>
 	)
 };
 
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-		backgroundColor: theme.colors.skyBlue,
+		backgroundColor: '#bbe6ec',
+		padding: 20,
+	},
+	containerImgs: {
+		alignItems: 'center',
+		justifyContent: 'center',
+		width: windowWidth * 0.9,
+		marginTop: 20,
 	},
 	title: {
 		fontSize: 30,
 		fontWeight: 'bold',
 		textAlign: 'center',
 		marginTop: 20,
+		marginBottom: 40,
 	},
 	subtitle: {
-		fontSize: 20,
-		marginTop: 10,
+		fontSize: 18,
+		marginBottom: 5,
 	},
 	label: {
 		backgroundColor: 'white',
-		marginTop: 20,
+		marginVertical: 10,
 		padding: 10,
 		borderRadius: 10,
 	},
 	softText: {
 		color: theme.colors.gray,
-		textAlign: 'center',
-		fontSize: 10,
+		fontSize: 13,
+		marginVertical: 10,
 	},
 	button: {
 		backgroundColor: theme.colors.tertiary,
 		alignItems: 'center',
 		justifyContent: 'center',
+		borderRadius: 10,
+		padding: 10,
+		marginVertical: 15,
+	},
+	continueButton: {
+		color: theme.colors.primary,
+		fontSize: 19,
+		fontWeight: 'bold',
 	}
 });
 

diff --git a/src/login/LoginScreen.js b/src/login/LoginScreen.js
@@ -1,17 +1,17 @@
 //LoginScreen.js
 import React, { useState } from "react";
-import { Image, TouchableOpacity, StyleSheet, View, Text, TextInput } from "react-native";
+import { Image, TouchableOpacity, StyleSheet, SafeAreaView, View, Text, TextInput, Dimensions } from "react-native";
 import {theme} from '../../constants';
 import { useNavigation } from "@react-navigation/native";
+const windowWidth = Dimensions.get('window').width;
 
 const LoginScreen = () => {
   const navigation = useNavigation();
   return (
     <SafeAreaView style={styles.container}>
-      <View>
-        <Image source={require('../assets/forma1.png')} style={{ width: 50, height: 50 }} />
-        <Image source={require('../assets/formas.png')} style={{ width: 200, height: 200 }} />
-        <Text style={styles.title}>Avi Pro Mobile</Text>
+      <View style={styles.containerImgs}>
+        <Image source={require('../assets/forma1.png')} style={{ width: windowWidth*0.28, height: 87 }} />
+        <Image source={require('../assets/formas.png')} style={{ width: windowWidth*0.72, height: 206 }} />
       </View>
       <View>
         <Text style={styles.title}>Información Personal</Text>
@@ -21,8 +21,8 @@ const LoginScreen = () => {
         <TextInput placeholder="Apellidos" style={styles.label} />
         <Text style={styles.subtitle}>Correo Electronico</Text>
         <TextInput placeholder="Correo Electronico" style={styles.label} />
-        <TouchableOpacity style={styles.button} onPress={() => navigation.navigate("HomeScreen")}>
-          <Text styles={{ fontWeight: bold, }}>Continuar</Text>
+        <TouchableOpacity style={styles.button} onPress={() => navigation.navigate("NewScreen")}>
+          <Text style={styles.continueButton}>Continuar</Text>
         </TouchableOpacity>
       </View>
     </SafeAreaView>
@@ -32,33 +32,47 @@ const LoginScreen = () => {
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-		backgroundColor: theme.colors.skyBlue,
+		backgroundColor: '#bbe6ec',
+		padding: 20,
 	},
+  containerImgs:{
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: windowWidth*0.9,
+    marginTop: 20,
+  },
 	title: {
 		fontSize: 30,
 		fontWeight: 'bold',
 		textAlign: 'center',
-		marginTop: 20,
+		marginVertical: 20,
 	},
 	subtitle: {
-		fontSize: 20,
-		marginTop: 10,
+		fontSize: 16,
 	},
 	label: {
 		backgroundColor: 'white',
-		marginTop: 20,
+		marginVertical: 10,
 		padding: 10,
 		borderRadius: 10,
 	},
 	softText: {
 		color: theme.colors.gray,
-		textAlign: 'center',
-		fontSize: 10,
+		fontSize: 13,
+		marginVertical: 10,
 	},
 	button: {
 		backgroundColor: theme.colors.tertiary,
 		alignItems: 'center',
 		justifyContent: 'center',
+		borderRadius: 10,
+		padding: 10,
+    marginVertical: 15,
+	}, 
+	continueButton: {
+		color: theme.colors.primary,
+		fontSize: 19,
+		fontWeight: 'bold',
 	}
 });