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

View File

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

View File

@ -4,6 +4,7 @@ import {
TextInput,
View,
Text,
Image,
} from "react-native";
import Button from "../components/Button";
import { colors } from "../components/style";
@ -11,7 +12,15 @@ import { colors } from "../components/style";
export function LoginForm() {
return (
<View style={styles.container}>
<Text style={styles.header}>Please Log In</Text>
<View style={styles.header}>
<Image
source={require("../assets/deguapp_logo.png")}
style={styles.logo}
/>
<Text style={styles.h1}>Please Log In</Text>
</View>
<View style={styles.form}>
<TextInput
style={styles.input}
placeholder="Enter your email"
@ -30,8 +39,19 @@ export function LoginForm() {
returnKeyType="done"
/>
<View style={styles.btnContainer}>
<Button style={styles.button} title="Sign Up" color={colors.charcoal} />
<Button style={styles.button} title="Log In" color={colors.green} />
<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>
);
@ -39,16 +59,31 @@ export function LoginForm() {
const styles = StyleSheet.create({
container: {
backgroundColor: colors.dark,
flex: 1,
gap: 15,
alignItems: "center",
justifyContent: "center",
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: {
color: "#FFF",
fontSize: 22,
width: "100%",
alignItems: "center",
paddingTop: "20%",
},
input: {
height: "auto",
@ -58,9 +93,8 @@ const styles = StyleSheet.create({
borderRadius: 5,
padding: 10,
},
button: {},
btnContainer: {
flexDirection: "row",
gap: 10,
gap: 5,
},
});