Login screen design done

This commit is contained in:
Filip Rojek 2024-05-05 18:46:02 +02:00
parent 8bff13f98f
commit bd5f7388b8
4 changed files with 75 additions and 32 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -5,7 +5,16 @@ export default function Button(props) {
const { onPress, title = "Save", color = "black" } = props; const { onPress, title = "Save", color = "black" } = props;
return ( return (
<Pressable <Pressable
style={[styles.button, { backgroundColor: color }]} style={({ pressed }) => [
{
backgroundColor: pressed
? "rgb(210, 230, 255 )"
: color
? color
: "black",
},
styles.button,
]}
onPress={onPress} onPress={onPress}
> >
<Text style={styles.text}>{title}</Text> <Text style={styles.text}>{title}</Text>
@ -21,7 +30,6 @@ const styles = StyleSheet.create({
paddingHorizontal: 32, paddingHorizontal: 32,
borderRadius: 4, borderRadius: 4,
elevation: 3, elevation: 3,
backgroundColor: "black",
}, },
text: { text: {
fontSize: 16, fontSize: 16,

View File

@ -1,5 +1,6 @@
export const colors = { export const colors = {
gold: "#FFD700ff", gold: "#FFD700ff",
gold: "#ffa500",
brown: "#8B4513ff", brown: "#8B4513ff",
green: "#228B22ff", green: "#228B22ff",
charcoal: "#2C3E50ff", charcoal: "#2C3E50ff",

View File

@ -4,6 +4,7 @@ import {
TextInput, TextInput,
View, View,
Text, Text,
Image,
} from "react-native"; } from "react-native";
import Button from "../components/Button"; import Button from "../components/Button";
import { colors } from "../components/style"; import { colors } from "../components/style";
@ -11,27 +12,46 @@ import { colors } from "../components/style";
export function LoginForm() { export function LoginForm() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.header}>Please Log In</Text> <View style={styles.header}>
<TextInput <Image
style={styles.input} source={require("../assets/deguapp_logo.png")}
placeholder="Enter your email" style={styles.logo}
autoCapitalize="none" />
autoCompleteType="email" <Text style={styles.h1}>Please Log In</Text>
textContentType="emailAddress" </View>
keyboardType="email-address"
placeholderTextColor={"#aaaaaa"} <View style={styles.form}>
returnKeyType="next" <TextInput
/> style={styles.input}
<TextInput placeholder="Enter your email"
style={styles.input} autoCapitalize="none"
secureTextEntry={true} autoCompleteType="email"
placeholder="Enter your password" textContentType="emailAddress"
placeholderTextColor={"#aaaaaa"} keyboardType="email-address"
returnKeyType="done" placeholderTextColor={"#aaaaaa"}
/> returnKeyType="next"
<View style={styles.btnContainer}> />
<Button style={styles.button} title="Sign Up" color={colors.charcoal} /> <TextInput
<Button style={styles.button} title="Log In" color={colors.green} /> style={styles.input}
secureTextEntry={true}
placeholder="Enter your password"
placeholderTextColor={"#aaaaaa"}
returnKeyType="done"
/>
<View style={styles.btnContainer}>
<Button
style={styles.button}
title="Sign Up"
color={colors.charcoal}
onPress={() => alert("Signed In")}
/>
<Button
style={styles.button}
title="Log In"
color={colors.gold}
onPress={() => alert("Logged In")}
/>
</View>
</View> </View>
</View> </View>
); );
@ -39,16 +59,31 @@ export function LoginForm() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
backgroundColor: colors.dark,
flex: 1,
gap: 15,
alignItems: "center",
justifyContent: "center",
width: "100%", width: "100%",
height: "100%",
backgroundColor: colors.dark,
},
form: {
flex: 1,
alignItems: "center",
paddingTop: "10%",
width: "100%",
gap: 15,
},
h1: {
color: "#FFF",
fontSize: 30,
textAlign: "center",
paddingTop: "20%",
},
logo: {
width: "80%",
resizeMode: "contain",
}, },
header: { header: {
color: "#FFF", width: "100%",
fontSize: 22, alignItems: "center",
paddingTop: "20%",
}, },
input: { input: {
height: "auto", height: "auto",
@ -58,9 +93,8 @@ const styles = StyleSheet.create({
borderRadius: 5, borderRadius: 5,
padding: 10, padding: 10,
}, },
button: {},
btnContainer: { btnContainer: {
flexDirection: "row", flexDirection: "row",
gap: 10, gap: 5,
}, },
}); });